2021-04-11

uniapp 微信小程序 web-view JSSDK 使用

我们先按照文档说明进行代码实现：

index.html 模板

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
        </script>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
        <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
    </body>
</html>

业务代码中进行调用

document.addEventListener('UniAppJSBridgeReady', function() {
    uni.postMessage({
        data: {
            action: 'message',
        },
    });
});

然后使用中我们收到一个报错了，害。

现在我们需要修改代码。。。

去除 uniapp 的 JS 引入。
修改业务代码调用

if(window.jWeixin === undefined) {
    document.addEventListener('WeixinJSBridgeReady', function() {
        window.jWeixin.miniProgram.postMessage({
            data: {
                action: 'message',
            },
        });
    });
} else {
    window.jWeixin.miniProgram.postMessage({
        data: {
            action: 'message',
        },
    });
}

uniapp 微信小程序 web-view JSSDK 使用

分类