五、uni-app的web-view组件用法

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面

• src webview 指向网页的链接(小程序仅支持加载网络网页)
• 小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的web-view组件，所以不支持其他组件

<template>
    <view>
        <web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
    </view>
</template>

web-view 加载的网页中支持调用部分 uni 接口：

• uni.webview.js 最新版地址：https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js
  需将uni.webview.js uni对象替换成一个别的对象

下载UNI-SDK: https://pan.baidu.com/s/1NyfYwZvmIaADV_jxkwPGzQ 提取码: t5h9
(里面引入了微信小程序的JS_SDK，可以使用uni对象操作如上uni接口)

• 微信小程序JS-SDK https://res.wx.qq.com/open/js/jweixin-1.4.0.js
  引入会报TypeError: Cannot read properties of undefined (reading 'title')
  把jweixin-1.4.0.js里的this替换成window即可

下载JS-SDK: https://pan.baidu.com/s/1aSSpbLGwAXNQFRX47BV6Pg 提取码: nmpv

Html页面

<template>
    <view>
        <view class="login" @click="clickLogin">跳转uni-plus登录页面{{des}}</view>
    </view>
</template>

<script>
    // // 引入 uni 的 SDK(修改版 支持微信小程序的js-sdk)
    import uniWebView from '@/common/uni.webview.js';
    export default {
        data() {
            return {
                des: ""
            }
        },
        methods: {
            clickLogin() {
                this.des = "（响应@Click的登录）"
            }
        },
        onLoad() {
            // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
            // 不触发就用@click
            document.addEventListener('UniAppJSBridgeReady', function() {
                // 获取当前环境
                uniWebView.getEnv(function(res) {
                    if (res.miniprogram) {
                        // 微信小程序环境，给登录设置点击监听（会同时响应@click）
                        document.querySelector(".login").addEventListener('click', function() {
                            uniWebView.switchTab({
                                url: '/pages/tabBar/API/API'
                            });
                        })
                    }
                });
            });
        }
    }
</script>

<style>

</style>