微信小程序基础开发(五)----button以及选框

1、button外观样式

button的基本样式没什么特殊的，直接查看文档即可

---

2、button的开放能力(open-type)

• contact ：直接打开客服对话功能，需要在微信小程序的后台配置

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

contact的实现流程

1. 将小程序的appid由测试号改成自己的id
2. 登录微信小程序官网，找到"客服"，添加客服微信

3.然后就能实现客服对话功能和意见反馈功能

• share：转发当前的小程序到微信好友中，不能分享到朋友圈

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

• getPhoneNumber：获取当前用户的手机号码信息，结合一个事件来使用

1、绑定一个事件bindgetphonenumber
2、在事件的回调函数中 通过参数来获取信息
3、获取到的信息已经经过加密 需要用户自己搭建后台服务器进行解析
4、如果不是企业的小程序账号，没有权限获取用户的手机号码

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>  

Page({
    getPhoneNumber(e){
      console.log(e);
    }  
})

• getUserInfo：获取当前用户的个人信息，不存在加密字段，和获取手机号类似

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>

Page({
    getUserInfo(e){
      console.log(e)
    }
})

在detail的userInfo下，会显示很多用户信息

• launchApp：在小程序中直接打开APP

<button open-type="launchApp">launchApp</button>

• openSetting：打开小程序内置的授权页面，授权页面只会出现曾经点击过的权限

<button open-type="openSetting">openSetting</button>

• feedback：打开小程序内置的意见反馈页面

 <button open-type="feedback">feedback</button>

---

3、icon图标

---

4、radio单选框

1、radio标签必须和父元素radio-group一起使用
2、value是选中的单选框的值
3、用bingchange给radio-group绑定事件
4、在页面中显示选中的值

<radio-group bindchange="handleChange">
    <radio value="male">男</radio>
     <radio value="female">女</radio>
</radio-group>

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

Page({
  data: {
     gender:""
  },
  handleChange(e){
    //1、获取单选框选中的值,male或者female
    let gender=e.detail.value;
    //2、把值赋给data中的数据
    this.setData({
      gender
    })
  }
  
})

---

5、checkbox复选框

复选框和单选框类似，只不过传值时是数组

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

Page({
  data: {
    list: [
      {
        id: 0,
        name: "苹果",
        value: "apple"
      },
      {
        id: 1,
        name: "橘子",
        value: "orange"
      },
      {
        id: 2,
        name: "香蕉",
        value: "banana"
      },
      {
        id: 3,
        name: "水",
        value: "water"
      }
    ],
    checkedList:[]
  },
  handleItemChange(e){
    //1、获取被选中的复选框的值
    const checkedList=e.detail.value;
    //2、进行赋值
    this.setData({
      checkedList
    })
  }

})