uniapp封装的网站网页调用uniapp原生页方法

原创已于 2022-05-09 17:20:59 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webview #javascript #前端

于 2022-05-09 17:05:57 首次发布

uniapp 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在uniapp封装的Webview中调用uniapp原生页面，以实现微信登录和微信支付功能，详细阐述了具体实现步骤。

uniapp封装了一个网站，现在想实现app进行微信登录和微信支付的功能，必须调用uniapp原生页，实现方法如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>


</head>
<body>
    <div class="btn-list">
        <button class="btn" type="button" data-action="navigateTo">跳转</button>


    </div>
 

    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>

    <script>

        document.addEventListener('UniAppJSBridgeReady', function () {
            document.querySelector('.btn-list').addEventListener('click', function (evt) {
                var target = evt.target;
                if (target.tagName === 'BUTTON') {
                    var action = target.getAttribute('data-action');
                    if (action === 'navigateTo') {
                        uni.navigateTo({
                            url: '/pages/qqlogin/qqlogin'
                        });
                    }
                }
            });
        });
    </script>
</body>
</html>