uniapp之h5公众号分享和授权

太过爱你忘了你带给我的痛 2022-11-22 00:29 693阅读 0赞

### 一，微信分享 ###

1，安装jweixin-module

npm i jweixin-module

![20201103143840780.png][]

2，在需要分享的页面引入

3，设置分享内容（或者点击触发分享）

distributrShare() {
        this.$http({
            apiName: "wxJsdkConfig",
            type: "POST",
            data: {
                url: encodeURIComponent(window.location.href),
                //后台通过域名进行授权
            }
        }).then(res = >{
            var _self = this jweixin.config({
                debug: true,
                // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.data.appId,
                // 必填，公众号的唯一标识
                timestamp: res.data.timestamp,
                // 必填，生成签名的时间戳
                nonceStr: res.data.nonceStr,
                // 必填，生成签名的随机串
                signature: res.data.signature,
                // 必填，签名
                jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData', ] // 必填，需要使用的JS接口列表
            })
    
            jweixin.ready(function(res) {
                //分享给朋友
                jweixin.updateAppMessageShareData({
                    title: _self.title,
                    desc: "快来嗨购吧！",
                    link: window.location.href + "&inviteCode=" + _self.userInfo.inviteCode,
                    imgUrl: _self.picUrl,
                    trigger: function trigger(res) {
                        // alert(res);
                    },
                    success: function success(res) {
    
                        // alert('已分享');
                    },
                    cancel: function cancel(res) {
                        // alert('已取消');
                    },
                    fail: function fail(res) {
                        // alert(2, JSON.stringify(res));
                    }
                });
            }) jweixin.error(err = >{
                // console.log("jsapi错误：",err)
            })
        }).
        catch(err = >{
            // console.log(3,err)
        })
    
    },

注意几点：

**a:公众号的分享只能通过右上角h5的分享触发，默认分享当前页面，分享只是配置分享内容 **

**b:当前分享页面的链接必须在后台配置JS接口安全域名和网页授权域名，**

**c:传到后台的链接需要****encodeURIComponent转码，不能包括端口号，**

**d:安卓上可以，IOS上报fail link must be in js secure domain list参考：[解决微信H5网页分享报错：fail link must be in js secure domain list][H5_fail link must be in js secure domain list]**

**e:invalid signature参考[关于微信公众号开发config:invalid signature错误的解决方法][config_invalid signature]**

### 二，授权登录 ###

页面：

...async onShow() {
        // #ifdef H5 
        if (utils.isWxBrowser()) {
            if (window.location.href.includes('code=')) {
                await utils.wxJsdkAuthorize('', true)
            }
        }
        // #endif
    },
    ...
    
    methods: {
        async oAuth(e) {
            // #ifdef H5
            if (utils.isWxBrowser()) {
                uni.showLoading({
                    title: "授权中...",
                    mask: true
                }) await this.wxJsdkLogin();
                uni.hideLoading()
            }
            // #endif
            // #ifdef APP-PLUS
            var type = e.currentTarget.dataset.logintype uni.login({
                provider: type,
                success: (res) = >{
                    uni.getUserInfo({
                        provider: type,
                        success: (info) = >{
                            uni.setStorageSync('appInfo', info.userInfo) console.log(info.userInfo) this.$http({
                                apiName: 'appWxLogin',
                                type: 'POST',
                                data: {
                                    appOpenId: info.userInfo.openId,
                                    headUrl: info.userInfo.avatarUrl,
                                    wuserName: info.userInfo.nickName
                                }
                            }).then(res = >{
                                console.log(res) uni.showToast({
                                    title: '登录成功',
                                    mask: false,
                                    duration: 1500
                                });
                                utils.setSesion(res.data) utils.getUserInfo() utils.afterLoginJump()
    
                            }).
                            catch(err = >{
                                console.log(err) if (err.code == 500070) {
                                    uni.redirectTo({
                                        url: './bindMobile'
                                    })
                                } else {
                                    uni.redirectTo({
                                        url: '../set/loginPwd'
                                    })
                                }
    
                            })
                        }
                    })
                }
            })
            // #endif
        }
    
    }

utils.js

//判断是否是微信浏览器
    isWxBrowser() {
        if (window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
            return true
        } else {
            return false
        }
    },
    //jdk配置
    async configWeiXin(callback) {
        //获取公众号配置
        let resConfig = await http({
            apiName: "wxJsdkConfig",
            type: "POST",
            data: {
                url: encodeURIComponent(window.location.href),
                //后台通过域名进行授权
            }
        }) if (resConfig) {
            let apiList = [ // 可能需要用到的能力
            'onMenuShareAppMessage', 'onMenuShareTimeline', 'hideOptionMenu', 'showOptionMenu', 'chooseWXPay'];
            let info = {
                // debug: true, // 调试，发布的时候改为false
                appId: resConfig.data.appId,
                nonceStr: resConfig.data.nonceStr,
                timestamp: resConfig.data.timestamp,
                signature: resConfig.data.signature,
                jsApiList: apiList
            };
            jweixin.config(info);
            jweixin.error(err = >{
                console.log('config fail:', err);
            });
            jweixin.ready(res = >{
                console.log(3, res) if (callback) callback(jweixin, resConfig.data.appId); // 配置成功回调
                // uni.setStorageSync('msg',JSON.stringify(res.data))
    
                // uni.setStorageSync('msg',JSON.parse(res.message.replace(/"/,/'/)))
    
            });
        }
    },
    //公众号授权
    async wxJsdkAuthorize(_appid, isLogin = false) {
        let link = window.location.href;
        // let link=window.location.origin+'/pages/public/middlePage'
        let _code = ''
        if (link.includes("code=")) {
            _code = link.split("code=")[1].split('&')[0]
        }
        // 如果拿到_code，调用授权接口，没有拿到就跳转微信授权链接获取
        if (_code) {
            if (isLogin) {
                await http({
                    apiName: "wxWebLogin",
                    type: 'POST',
                    data: {
                        code: _code
                    }
                }).then(res = >{
    
                    uni.showToast({
                        title: '登录成功',
                        mask: false,
                        duration: 1500
                    });
                    this.setSesion(res.data) this.getUserInfo() this.afterLoginJump()
                }).
                catch(err = >{
                    uni.setStorageSync('msg', err.data) console.log(uni.getStorageInfoSync('msg').openId) if (err.code == 500070) {
                        uni.redirectTo({
                            url: '/pages/public/bindMobile'
                        })
                    } else {
                        uni.redirectTo({
                            url: '/pages/set/loginPwd'
                        })
                    }
                })
            } else {
                await http({
                    apiName: "wxJsdkLogin",
                    data: {
                        code: _code
                    }
                }).then(res = >{
    
    })
                //code传到后台关联账户
                uni.setStorageSync("wxJsdkLogin", true)
            }
    
        } else {
            let appid = _appid;
            let uri = encodeURIComponent(link);
            let authURL = `https: //open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
            window.location.href = authURL;
    
        }
    },
    jsApiCall(data, callback_succ_func, callback_error_func) {
        //使用原生的，避免初始化appid问题  
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            appId: data['appId'],
            timeStamp: data['timeStamp'],
            nonceStr: data['nonceStr'],
            // 支付签名随机串，不长于 32 位  
            package: data['package'],
            // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）  
            signType: data['signType'],
            // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
            paySign: data['paySign'],
            // 支付签名  
        },
        function(res) {
            var msg = res.err_msg ? res.err_msg: res.errMsg;
            //WeixinJSBridge.log(msg);  
            switch (msg) {
            case 'get_brand_wcpay_request:ok':
                //支付成功时  
                if (callback_succ_func) {
                    callback_succ_func(res);
                }
                break;
            default:
                //支付失败时  
                WeixinJSBridge.log('支付失败!' + msg + ',请返回重试.');
                if (callback_error_func) {
                    callback_error_func({
                        msg: msg
                    });
                }
                break;
            }
        })
    },
    //WeixinJSBridge判断
    wxJsPay(data, callback_succ_func, callback_error_func) {
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);
                document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
            }
        } else {
            this.jsApiCall(data, callback_succ_func, callback_error_func);
        }
    },

[20201103143840780.png]: /images/20221120/02051e4454e94fe392bbe5596b7463f6.png
[H5_fail link must be in js secure domain list]: https://blog.csdn.net/qq_23375733/article/details/100778788
[config_invalid signature]: https://blog.csdn.net/u011105380/article/details/85996861