首页 > 技术文章 > uniapp微信小程序登录,获取手机号,支付,分享,消息订阅功能

LindaBlog 2022-01-19 15:56 原文

uniapp微信小程序登录,获取手机号,支付,分享,消息订阅功能

 

二. 获取手机号
在获取完openid的前提下使用 getPhoneNumber获取到加密的手机号,传给后端解密即可。
// html
    <button v-if="theStep == 2" class="bottom" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号授权登录</button>

// js 
// 获取手机号
        getPhoneNumber(e) {
            const _that = this;
            if (e.detail.errMsg == 'getPhoneNumber:ok') {
                //  允许授权,获取手机号
                // 传给后端解密,包括基本信息传给后端保存()
                this.$u
                    .post('/decodeUserInfo', {
                        encrypted: e.detail.encryptedData,
                        iv: e.detail.iv,
                        openid: _that.openId,
                        avatarUrl: _that.wxPublicInfo.avatarUrl, //头像
                        city: _that.wxPublicInfo.city, //城市
                        country: _that.wxPublicInfo.country, //国家
                        nickName: _that.wxPublicInfo.nickName, //昵称
                        province: _that.wxPublicInfo.province //
                    })
                    .then(res => {
                        if (res.code == 200) {
                            var phone = res.obj; //解析好的手机号
                            // 登录- 获取token
                            this.$u
                                .post('/memberLogin', {
                                    account: phone,
                                    password: '123456'
                                })
                                .then(memberLoginRes => {
                                    console.log(memberLoginRes);
                                    if (memberLoginRes.code == 200 && memberLoginRes.obj) {
                                        uni.setStorageSync('pk_token', memberLoginRes.obj.tokenHead + ' ' + memberLoginRes.obj.token);
                                        // 获取基本信息
                                        this.$u.get('/info').then(suc => {
                                            if (suc.code == 200) {
                                                uni.setStorageSync('userInfo', suc.obj); //用户基本信息
                                                uni.setStorageSync('openId', _that.openId); //保存openid
                                                uni.setStorageSync('firstAuthorization', true); //登录状态
                                                // 不是游客-删除
                                                uni.removeStorageSync('touristWxPublicInfo');
                                                getApp().globalData.userInfo = suc.obj;
                                                // console.log(getApp().globalData)
                                                uni.redirectTo({
                                                    url: '/pagesHome/home/home'
                                                });
                                            }
                                        });
                                    } else if (memberLoginRes.code == 500) {
                                        // 未注册会员
                                        uni.showModal({
                                            title: '温馨提示',
                                            content: '您还不是名子瑜伽会员,可以选择游客模式访问',
                                            success: function(res) {
                                                if (res.confirm) {
                                                    uni.redirectTo({
                                                        url: '/pages/login/login'
                                                    });
                                                } else if (res.cancel) {
                                                    console.log('用户点击取消');
                                                }
                                            }
                                        });
                                    }
                                });
                        } else {
                            // 解析手机号错误
                            uni.showToast({
                                title: '手机号错误',
                                icon: 'none'
                            });
                        }
                    });
            } else {
                //拒绝授权后弹出一些提示
                uni.showToast({
                    title: '已拒绝手机号授权登录',
                    icon: 'none'
                });
                setTimeout(function() {
                    uni.redirectTo({
                        url: '/pages/login/login'
                    });
                }, 1000);
            }
        },

三. 微信支付
前端将订单信息(openid,商品信息,付款人等)传给后,后端返回拉起支付所需要的参数,前端拉起支付,前端根据支付状态做对应的操作,返回支付状态给后端
var payData=JSON.parse(res.obj.signPackage);//拉起支付所需字段
                            var orderNumber=res.obj.merchantOrderSn;//订单号
                            uni.requestPayment({
                                provider: 'wxpay',
                                _debug:1,
                                timeStamp: payData.timeStamp,
                                nonceStr: payData.nonceStr,
                                package: payData.package,
                                signType: payData.signType,
                                paySign: payData.paySign,
                                success: function (resPay) {
                                    console.log('success:' + JSON.stringify(resPay));
                                    // var resPay=JSON.parse(resPay).errMsg;
                                    _that.$u.post('/payState',{
                                        orderNumber:orderNumber,//订单号
                                        payState:1,//订单支付状态:1为支付成功,0为预支付,2为支付失败
                                    }).then(resPayState=>{
                                        if(resPayState.code==200){
                                            uni.showToast({
                                                title:'支付成功!',
                                            })
                                            setTimeout(function(){
                                                uni.redirectTo({
                                                    url:'/pages/exchangeRecord/exchangeRecord'
                                                });
                                            },1000)
                                        }
                                        
                                    })
                                    
                                },
                                fail: function (err) {
                                     console.log('fail:' + JSON.stringify(err));
                                    uni.showToast({
                                        title:'支付失败!',
                                        icon:'none'
                                    })
                                    setTimeout(function(){
                                        uni.redirectTo({
                                           url:'/pages/exchangeRecord/exchangeRecord'
                                        });
                                    },1000)
                                    
                                    
                                   
                                }
                            });

 

四. 分享
使用onShareAppMessage() 和onShareTimeline() 就可以分享,这两个函数和onLoad()同级
页面中自定义按钮分享需要加 open-type=“share”
//html 
<button open-type="share">分享</button>

// js
    onLoad(option) {},
    // 分享给朋友
    onShareAppMessage(res) {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '标题',
            path: 'pages/exchangeShop/exchangeShop',
            imageUrl: '/static/common/mzlogo.png'
        };
    },
    // 分享到朋友圈
    onShareTimeline() {
        if (res.from === 'button') {
            // 来自页面内分享按钮
            console.log(res.target);
        }
        return {
            title: '标题',
            path: 'pages/exchangeShop/exchangeShop',
            imageUrl: '/static/common/mzlogo.png'
        };
    },

// css  清除 button 默认样式,
button::after {
    border: none;
    background-color: none;
}

 

五. 消息订阅
微信小程序的消息订阅需要先在小程序后台添加消息模板
订阅一次只能发送一次消息
// 弹出消息订阅
        newsSubscription() {
            // 获取用户的当前设置,判断是否点击了“总是保持以上,不在询问”
            uni.getSetting({
                withSubscriptions: true, //是否获取用户订阅消息的订阅状态,默认false不返回
                success(res) {
                    if (res.authSetting['scope.subscribeMessage']) {
                        uni.openSetting({
                            // 打开设置页
                            success(resSet) {
                                console.log(resSet.authSetting);
                            }
                        });
                    } else {
                        // 用户没有点击“总是保持以上,不再询问”则每次都会调起订阅消息
                        uni.requestSubscribeMessage({
                            tmplIds: ['模板id'], //
                            success(res) {
                                console.log(res);
                                if (res['字段'] == 'accept') {
                                    // 字段就是tmplIds模板id
                                    // ....
                                }
                            }
                        });
                    }
                }
            });
        },

 

推荐阅读