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

1、button外观样式

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

---

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

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

contact

contact的实现流程

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

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

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

share

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

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

getPhoneNumber  

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

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

getUserInfo

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

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

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

launchApp

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

openSetting

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

 feedback

---

3、icon图标

---

4、radio单选框

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

    男
     女


您选中的是：{{gender}}

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

---

5、checkbox复选框

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

    
        
          {{item.name}}
        
    

您选中的是：{{checkedList}}

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
    })
  }

})