wx.login()
微信登录的原理
调用 login()成功之后获取一个用户登录凭证 code,再发送 request 请求给第三方服务器解析获得会话密钥和 openid
获取用户的手机号码
要先调用login()成功之后返回一个code，需用 <button> 组件的点击来触发，个人开发者不能用，open-type 设置为 getPhoneNumber ，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据（e.detail.encryptedData，iv）， 然后在第三方服务端结合 session_key 以及 openid 进行解密获取手机号。(res.phone,countryCode,appid)
授权
部分接口需要权限，接口按使用范围分成多个 scope，9 个（用户信息，地理位置，通讯地址，发票抬头，获取发票，微信运动步数，录音功能，保存到相册，摄像头），
wx.authorize()在调用需授权 API 之前，提前向用户发起授权请求wx.authorize({scope: "scope.userInfo"})，不会弹出授权窗口，请使用 <button open-type="getUserInfo"/>
wx.getSetting()获取用户的当前设置
wx.openSetting()打开设置界面，引导用户开启授权
获取用户信息（昵称，头像，语言，城市，身份，国家）
获取用户信息之前需要用户授权
button 组件去触发 getUserInof 接口，bindgetuserinfo绑定
button的open-type 的合法值：
contact、share\getPhoneNumber\getUserInfo\launchApp\openSetting\feedback
3微信支付的原理
wx.requestPayment()
前台调用后台接口→后台调用微信统一下单接口，后台返回调用微信统一下单后返回的内容给前台→前台根据后台返回的内容调用微信浏览器内置JS弹出支付→支付后有两种处理 ①前台支付成功后的页面 ②微信回调url（一般处理业务逻辑）
购物车的业务逻辑
选商品 下单 生成订单号 提交服务器
// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
wx.getSetting({
success(res) {
if (!res.authSetting['scope.record']) {
wx.authorize({
scope: 'scope.record',
success () {
// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
wx.startRecord()
}
})
}
}
})
/* 支付 */
function paynow(param, callback) {
wx.requestPayment({
timeStamp: param.timeStamp,
nonceStr: param.nonceStr,
package: param.package,
signType: param.signType,
paySign: param.paySign,
success:function (res) {
// success
callback();
wx.navigateBack({
delta: 1,// 回退前 delta(默认为1) 页面
success:function (res1) {
wx.showToast({
title:'支付成功',
icon:'success',
duration: 2000
});
},
fail:function () {
// fail
},
complete:function () {
}
})
},
fail:function (res) {
// fail
},
complete:function () {
// complete
}
})
}
小程序开屏页是个图片 3秒后跳转到tabar页面
wxml
<view class="start">
<swiper-item>
<image src="./../../img/start.jpg" class="slide-image" bindload="bindload" />
</swiper-item>
</view>
js页面 开屏页跳转到tabbar不能用 wx.navigateTo 得用 wx.switchTab
bindload(e) {
setTimeout(this.goIndex, 3000)
},
goIndex() {
wx.switchTab({
url: '/pages/index/index'
});
},
json页面
设置title和顶部导航背景色
{
"navigationBarBackgroundColor": "#2dc8b7",
"navigationBarTitleText": "欢迎您的到来",
"disableScroll": true
}
跳转携带参数
wxml页面
<view class="item" bindtap="itemclick" data-specId="{{item.specId}}">
js页面
//跳转到goodsdetail
itemclick: function (e) {
var specId = e.currentTarget.dataset.specid;
wx.navigateTo({
url: '../goodsDetail/goodsDetail?specId=' + specId,
})
},
表单验证保存
//保存
addAddress:function(){
var that = this;
if(that.data.name.length == 0){
wx.showToast({
title: '收货人不能为空',
icon: 'loading',
mask: true
})
}else if(that.data.phoneNum.length == 0){
wx.showToast({
title: '手机号不能为空',
icon: 'loading',
mask: true
})
}else if(that.data.zipCode.length == 0){
wx.showToast({
title: '邮编不能为空',
icon: 'loading',
mask: true
})
}else if(that.data.pId.length == 0){
wx.showToast({
title: '请选所在省份',
icon: 'loading',
mask: true
})
}else if(that.data.cId.length == 0){
wx.showToast({
title: '请选择所在市',
icon: 'loading',
mask: true
})
}else if(that.data.dId.length == 0){
wx.showToast({
title: '请选择所在区县',
icon: 'loading',
mask: true
})
}else if(that.data.detailAddress.length == 0){
wx.showToast({
title: '详细地址不能为空为空',
icon: 'loading',
mask: true
})
}else{
request.req(uri_save_address, {
trueName: that.data.name,
mobPhone: that.data.phoneNum,
zipCode: that.data.zipCode,
provinceId: that.data.pId,
cityId: that.data.cId,
areaId: that.data.dId,
areaInfo:that.data.pName+','+ that.data.cName+','+ that.data.dName,
address: that.data.detailAddress,
}, (err, res) => {
var result = res.data;
if (result.result == 1) { //地址保存成功
wx.navigateBack({
delta: 1, // 回退前 delta(默认为1) 页面
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
} else {
wx.showToast({
title: '保存失败',
icon: 'loading',
duration: 1500
})
}
})
}
},
网友评论