小程序开发的心得

主要研究了icon，text，process三个组件

 

1，icon

     这个还挺好玩的，比iconfont好用的多，但是就是设置的样式挺少的，提供的选择不是很多，用起来也还行，就用icon标签就好了，后面跟上icon的size，type，color，一个icon图标就出来了，提供的样式请参考官网：https://mp.weixin.qq.com/debug/wxadoc/dev/component/icon.html

     ps:我在学习icon的时候，最有意思的事，是我学会了小程序开发里面的循环，感觉挺不错的，格式：

<view class="group">

  <block wx:for="{{iconSize}}">

    <icon type="success" size="{{item}}"/>

  </block>

</view>

2，text

     这个没什么，很平常的一个组件，显示文字，主要是看他的时候又学了一次，点击事件；

<view class="btn-area">

  <view class="body-view">

    <text>{{text}}</text>

    <button bindtap="add">add line</button>

    <button bindtap="remove">remove line</button>

  </view>

</view>

 

var initData = 'this is first line\nthis is second line'

var extraLine = [];

Page({

  data: {

    text: initData

  },

  add: function(e) {

    extraLine.push('other line')

    this.setData({

      text: initData + '\n' + extraLine.join('\n')

    })

  },

  remove: function(e) {

    if (extraLine.length > 0) {

      extraLine.pop()

      this.setData({

        text: initData + '\n' + extraLine.join('\n')

      })

    }

  }

})

 

在wxml文件中定义事件，在js中的page中定义函数处理程序，完美！

tips：text的长按复制功能还没有实现，使用的时候注意；

3.process

       这个挺好的，今天我刚刚实现了一个pc端的文件上传功能，刚好也用到了进度条，但是微信中的用法，明显更简单一些，提供了percent, show-info,stroke-width,coloe,active等五个属性，操作非常方便

<progress percent="20" show-info />

<progress percent="40" stroke-width="12" />

<progress percent="60" color="pink" />

<progress percent="80" active />