微信小程序 - 16.组件(button、icon、radio、

一. button

1. button标签基本信息

1 外观属性
    1 size 控制按钮大小
        1 default 默认值
        2 mini 小尺寸
    2 type 控制按钮颜色
        1 default 灰色
        2 primary 绿色
        3 warn 红色
    3 plain 按钮是否镂空,背景色透明
    4 loading 名称前是否带有loading图标
    5 disable 是否禁用
2 开放能力 open-type
    1 contact 打开客服会话(需要再微信小程序后台配置)，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
        1 只能够通过真机调试打开
    2 share 触发用户转发(转发当前小程序到微信朋友中,不能把小程序分享到朋友圈)
    3 getPhoneNumber 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息(不是企业的小程序,没有权限获取用户的手机号码)
        1 绑定一个事件bindgetphonenumber
        2 再事件的回调函数中,通过参数获取信息
        3 获取到的信息已加密过 , 需要用户自己搭建小程序后台服务器,在后台服务器中进行解析手机号码返回到小程序中,就可以看到信息了
    4 getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
        1 是要方法类似获取用户手机号码
        2 可直接获取,不存在加密
    5 launchApp 在小程序中打开App，可以通过app-parameter属性设定向App传的参数
        1 需要先在App中,通过APP的某个链接打开小程序
        2 在小程序中再通过这个功能重新打开App
    6 openSetting 打开授权设置页
        1 授权页面中只会出现曾经点过的权限
    7 feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容
        1 只能够通过真机调试打开

2. button测试 : open-type中的contact(联系客服)功能

 a . 讲小程序的appid改为自己的appid
          查看appid : 开发 → 开发设置 → 开发者ID
 b . 登录微信小程序官方,添加客服
          功能 → 客服
 c . 两个微信号进行测试

二. icon 小程序中的字体图标

1. type 图标类型
   success | success_no_circle | info | warn | waiting | cancel | download | search | clear
2. size 大小
3. color 颜色

<icon type="success|success_no_circle|info|warn|waiting|cancel|download|search|clear" size="23" color=""></icon>

三. radio 单选框

1. radio标签必须要和父元素radio-group配合使用
2. value 选中的单选框的值
3. 需要给radio-group绑定handleChange事件
4. 需要在页面中显示选中的值

wxml文件

 <radio-group bindchange="handleChange">
     <radio color="red" value="male">男</radio>
     <radio color="red" value="female">女</radio> 
 </radio-group>
 <view >您选中的是:{{gender}}</view>

js文件

 data: {
    gender: '',//单选框选中值
  },
  //单选框
  handleChange(e) {
    console.log(e);
    //获取单选框中的值
    let gender = e.detail.value;
    //把值赋值给data中的数据
    this.setData({
      gender 
    });
  },

四. checkbox 复选框

wxml文件

<view>
    <checkbox-group bindchange="handleItemChange">
        <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
    </checkbox-group>
    <view >
        选中的水果是:{{checkList}}
    </view>
</view>

js文件

 data: {
    //复选框list
    list: [
      { id: 0, name: "苹果", value: "apple" },
      { id: 1, name: "葡萄", value: "grape" },
      { id: 2, name: "香蕉", value: "banana" },
    ],
    checkList:[],//被选中的水果list
  },
  //复选框
  handleItemChange(e){
    console.log(e);
    //获取被选中的复选框的值
    const checkList = e.detail.value;
    //进行赋值
    this.setData({
      checkList 
    })
  },