微信小程序常见组件以及用法（二）

4、Button按钮

属性和用法：

 运行结果如

 

（2）button的open-type：

代码验证：

<button open-type="contact">客服</button>

<button open-type="share">分享</button>

<button open-type="getPhoneNumber">获取用户手机号码</button>

<button open-type="getUserInfo">获取个人信息</button>

<button open-type="launchApp">打开app</button>

<button open-type="openSetting">是否授权</button>

<button open-type="feedback">意见反馈</button>

5、icon

（1）type属性（2）size属性

（3）color属性

 

代码验证：

<icon type="success" size="50" color="red"></icon>

<icon type="success_no_circle" size="50" color="red"></icon>

<icon type="info" size="50" color="red"></icon>

<icon type="warn" size="50" color="red"></icon>

<icon type="waiting" size="50" color="red"></icon>

<icon type="cancel" size="50" color="red"></icon>

<icon type="download" size="50" color="red"></icon>

<icon type="search" size="50" color="red"></icon>

<icon type="clear" size="50" color="red"></icon>

运行结果：

6、radio单选标签

radio标签必须和父元素radio-group来使用

Value 是选中的单选框的值

代码验证：

<radio-group bindchange="handleChange">

<radio color="red" value="male">男</radio>

<radio value="female">女</radio>

</radio-group>

<view>您选中的是：{{gender}}</view>

相关的js:

7、checkbox标签

Checkbox标签必须和父元素Checkbox-group来使用

代码验证：

<view>

<checkbox-group bindchange="click">

    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>

</checkbox-group>

<view>选中的水果是{{genderlist}}</view>

</view>

相关的js

   list:[

            {

            id:0,

            value:"apple",

            name: "苹果"

        },

            {

            id:1,

            value:"banana",

            name: "香蕉"

        },

            {

            id:2,

            value:"pear",

            name:"梨子"

        }

     ],

   

    },

    genderlist:[{}],

    click(e){

        // console.log(e);

        const genderlist=e.detail.value;

        this.setData({

            genderlist

        })

    },

运行结果：