uni-app 包装H5项目集成微信登录支付和分享

引用UNI-APP的JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
} else if (/quickapp/i.test(userAgent)) {


// quickapp
document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {


document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

登录，接收回调参数

userInof 是登录后json序列化编码后的字符串

1
http://m.zhcn.qfdenge.com/uc/login?userInfo=${userInfo}

支付

使用uni.requestPayment，参考 https://uniapp.dcloud.io/api/plugins/payment?id=requestpayment

其中的orderInfo的格式如下

1
2
3
4
5
6
7
8
9
{
"appid": "wx0411fa6a39d61297”, 
"noncestr": "5JigiIJicbq8hQI2”, 
"package": "Sign=WXPay”, 
"partnerid": "1230636401”, 
"prepayid": "wx21204902147233e222e12d451613768000”, 
"timestamp": 1571662142, 
"sign": “0E5C9B9B1C8D7497A234CCC3C721AB1F"
}

HTML页面需要传递过来的是

1
2
3
4
5
6
7
8
9
10
{
"appId": "wxf09c6920dc0f2230",
"partnerId": "1429576202",
"prepayId": "wx111943147461245fa3922a787fc7260000",
"packageValue": "Sign=WXPay",
"noncestr": "c71PJL2Q9AbuPd7gskqWORr3FoNYDSRA",
"timestamp": "1599824594",
"sign": "86F8C4EC4E8662CBD2DB3C0EC5D82557",
"orderNo": "21812009111551972"
}
1
2
3
4
5
6
7
8
9
10
11
12
if (!/toutiaomicroapp/i.test(userAgent)) {
    var orderInfo = encodeURIComponent(JSON.stringify(result.data));
    uni.navigateTo({
        url: "/pages/pay/pay?orderInfo="+orderInfo
    })
    //弹出待查询界面
    $.pay("", {
        buttonHandler: function (layer) {
            submitCheckOrder(orderId, layer);
        }
    });
}

分享

添加按钮点击事件，向uni传递消息数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if (!/toutiaomicroapp/i.test(userAgent)) {


    document.addEventListener('UniAppJSBridgeReady', function() {
        document.getElementById("btn_share").addEventListener('click', function(evt) {
            var shareUrl = shareData.url;
            if (-1 == shareUrl.indexOf('back=share')){
                shareUrl += (-1 == shareUrl.indexOf('?') ? '?' : '&') + 'back=share';
            }
            uni.postMessage({
                data: {
                    title: shareData.title,
                    desc: shareData.desc,
                    link: shareUrl,
                    imgUrl: shareData.icon,


                }
            })
        })
    })
}

如此,就完成了UNI-APP集成微信登录\支付\分享的功能

推荐文章