「小程序JAVA实战」小程序的基础组件（24）

来说下 ，小程序的基础组件。源码：https://github.com/limingios/wxProgram.git 中的No.11

• icon图标组件

• rich-text 富文本组件

• text 文本组件

• progress 进度条组件

• 官方介绍
  >https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

• 演示用例

• 官方介绍
  >https://developers.weixin.qq.com/miniprogram/dev/component/text.html

• 演示用例
  text.html

欢迎关注：编程坑太多



欢迎关注：编程坑太多




个人博客：    idig8.com



个人博客：    idig8.com



个人博客：tnidig8.com

• 官方介绍
  >https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

• 演示用例
  rich-text.html

rich-text.js

//rich-text.js
//获取应用实例
const app = getApp()

Page({
  data:{
    mycontentStr: '',
    mycontentArray:[
      {
        name:"img",
        attrs:{
          class:"s_lg_img_gold_show",
          src:"//www.baidu.com/img/bd_logo1.png",
          width:"270",
          height:"129"
        }
      }
    ]
  }
})

rich-text.wxss

.s_lg_img_gold_show{
  width:600rpx;
}

使用富文本需要特别注意

• 官方介绍
  >https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

• 演示用例
  rich-text.html

  
    
  增加进度条百分比

//progress.js
//获取应用实例
const app = getApp()

Page({
  data:{
    mypercent:15
  },
  addpercent:function(){
    var newpercent = this.data.mypercent+20;
    this.setData({
      mypercent: newpercent
    })
  }
})

PS：关于基础组件部分就是这4块，从下次开始咱们一起了解下表单组件