完成第一个微信小程序组件

假装会写代码

于 2018-12-10 15:39:09 发布

阅读量462

点赞数

分类专栏：微信小程序文章标签：组件健康 BMI 体重指标

本文链接：https://blog.youkuaiyun.com/qq_16247851/article/details/84940942

版权

本文介绍了如何在微信小程序中开发一个进度条组件，用于显示身体九个基础指标的完成情况。通过编写progress.json、progress.wxml、progress.js和progress.wxss文件，实现了组件的声明和使用。在目标页面的json中声明组件，并在wxml中调用，配合js中的数据源，可以动态展示健康指标的进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

身体有九个基础指标，为了不重复写同样的代码，写了一个进度条组件：

在这里插入图片描述

创建一个组件叫progress
在这里插入图片描述

progress.json的代码

{
    "component": true,
    "usingComponents": {}
}

progress.wxml的代码

<!--pages/bodyScale/progress/progress.wxml-->
<view class="parent">
    <view style="width:{
  {totalWidth}}px; margin:0 auto;">
        <view class="progress" style="padding-left:{
  {half_width}}px; padding-right:{
  {half_width}}px;">
            <view wx:for="{
  {num}}" wx:for-index="index" wx:for-item="numItem">
                <view style="width:{
  {width}}px;font-size: 12px;color: #6C6E6F;text-align: center;">{
  {numItem}}</view>
            </view>
        </view>
        <view class='progress_item'>
            <view class="progress" style='padding-top:14rpx;'>
                <view wx:for="{
  {colors}}" wx:for-index="index" wx:for-item="color">
                    <view style="background:{
  {color}}; height: 6rpx; width:{
  {width}}px;margin-right:5rpx;" />
                </view>
            </view>

最低0.47元/天解锁文章