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

1、button外观样式

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


2、button的开放能力(open-type)
  • contact :直接打开客服对话功能,需要在微信小程序的后台配置

contact的实现流程

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

微信小程序基础开发(五)----button以及选框_第1张图片
3.然后就能实现客服对话功能和意见反馈功能

  • share:转发当前的小程序到微信好友中,不能分享到朋友圈
  • getPhoneNumber:获取当前用户的手机号码信息,结合一个事件来使用
1、绑定一个事件 bindgetphonenumber
2、在事件的回调函数中 通过参数来获取信息
3、获取到的信息已经经过加密 需要用户自己搭建后台服务器进行解析
4、如果不是企业的小程序账号,没有权限获取用户的手机号码
  
Page({
    getPhoneNumber(e){
      console.log(e);
    }  
})

微信小程序基础开发(五)----button以及选框_第2张图片

  • getUserInfo:获取当前用户的个人信息,不存在加密字段,和获取手机号类似
Page({
    getUserInfo(e){
      console.log(e)
    }
})

微信小程序基础开发(五)----button以及选框_第3张图片
在detail的userInfo下,会显示很多用户信息

  • launchApp:在小程序中直接打开APP
  • openSetting:打开小程序内置的授权页面,授权页面只会出现曾经点击过的权限

微信小程序基础开发(五)----button以及选框_第4张图片

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

3、icon图标

微信小程序基础开发(五)----button以及选框_第5张图片


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

    
     


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

微信小程序基础开发(五)----button以及选框_第6张图片


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

})

微信小程序基础开发(五)----button以及选框_第7张图片

你可能感兴趣的:(javascript,前端,css)