小程序 Button

//index.wxml
<view>
<view>
<form catchsubmit="formSubmit" catchreset="formReset">
<view>
<view>switch</view>
<switch name="switch"/>
</view>
<view>
<view>radio</view>
<radio-group name="radio">
<label><radio value="radio1"/>选项一</label>
<label><radio value="radio2"/>选项二</label>
</radio-group>
</view>
<view>
<view>checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>选项一</label>
<label><checkbox value="checkbox2"/>选项二</label>
</checkbox-group>
</view>
<view>
<view>slider</view>
<slider value="50" name="slider" show-value ></slider>
</view>
<view>
<view>input</view>
<view>
<view>
<view >
<input name="input" placeholder="这是一个输入框" />
</view>
</view>
</view>
</view>
<view>
<button type="primary" formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
</view>
</view>

//index.js
Page({
onShareAppMessage() {
return {
title: 'form',
path: 'page/component/pages/form/form'
}
},
data: {
pickerHidden: true,
chosen: ''
},
pickerConfirm(e) {
this.setData({
pickerHidden: true
})
this.setData({
chosen: e.detail.value
})
},
pickerCancel() {
this.setData({
pickerHidden: true
})
},
pickerShow() {
this.setData({
pickerHidden: false
})
},
formSubmit(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset(e) {
console.log('form发生了reset事件，携带数据为：', e.detail.value)
this.setData({
chosen: ''
})
}
})

//index.wxml
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

//index.js
Page({
getPhoneNumber (e) {
console.log(e.detail.errMsg)
console.log(e.detail.iv)
console.log(e.detail.encryptedData)
}
})

// 必须是在用户已经授权的情况下调用
wx.getUserInfo({
success: function(res) {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
}
})

// 如果只是展示用户头像昵称，可以使用 <open-data /> 组件
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
//需要使用 button 来授权登录
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>

Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 查看是否授权
wx.getSetting({
success (res){
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
}
})
}
}
})
},
bindGetUserInfo (e) {
console.log(e.detail.userInfo)
}
})