小程序 是否授权、支付、开屏页跳转到tabbar、跳转携带参数、

2022-01-07  本文已影响0人  shine001

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
                })
            }
        })
    }
  },
上一篇下一篇

猜你喜欢

热点阅读