微信小程序组件学习笔记

微信公众平台提供了应用开发框架、组件及API，对于我们的开发很有帮助。
组件的概念：

• 组件是视图层的基本组成单元。
• 组件自带一些功能与微信风格的样式。
• 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件， 内容在两个标签之内。

基础组件	名称
icon	图标
progress	进度条
rich-text	富文本
text	文本

图标：

<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

进度条：

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

富文本：

<rich-text nodes="{{nodes}}" bindtap="tap"></rich-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>

表单组件类似css

button	checkbox
checkbox-group	editor
form	input
label	picker
picker-view	picker-view-column
radio-group	radio
slider	switch
textarea

一个表单：

Page({
  data: {
    items: [
      { name: 'USA', value: 'A国' },
      { name: 'CHN', value: 'B国', checked: 'true' },
      { name: 'ENG', value: 'C国' },
      { name: 'TUR', value: 'D国' },
    ]
  },
  checkboxChange: function (e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})
<view class="page">
    <view class="page__hd">
        <text class="page__title">radio</text>
        <text class="page__desc">单选框</text>
    </view>
    <view class="page__bd">
        <view class="section section_gap">
            <radio-group class="radio-group" bindchange="radioChange">
                <radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
                    <text>{{item.value}}</text>
                </radio>
            </radio-group>
        </view>
    </view>
</view>