web-view
是一個 web 瀏覽器組件坞笙,可以用來承載網(wǎng)頁的容器踏拜,會自動鋪滿整個頁面
-
src
webview 指向網(wǎng)頁的鏈接(小程序僅支持加載網(wǎng)絡網(wǎng)頁) - 小程序端
web-view
組件一定有原生導航欄寇荧,下面一定是全屏的web-view
組件,所以不支持其他組件
<template>
<view>
<web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
</view>
</template>
web-view
加載的網(wǎng)頁中支持調用部分 uni 接口:
方法名 | 說明 | 平臺差異說明 |
---|---|---|
uni.navigateTo | ||
uni.redirectTo | ||
uni.reLaunch | ||
uni.switchTab | ||
uni.navigateBack | ||
uni.postMessage | 向應用發(fā)送消息 | 字節(jié)跳動小程序不支持执隧、H5 暫不支持(可以直接使用 window.postMessage |
uni.getEnv | 獲取當前環(huán)境 | 字節(jié)跳動小程序不支持 |
-
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() {
// 待觸發(fā) `UniAppJSBridgeReady` 事件后,即可調用 uni 的 API镀琉。
// 不觸發(fā)就用@click
document.addEventListener('UniAppJSBridgeReady', function() {
// 獲取當前環(huán)境
uniWebView.getEnv(function(res) {
if (res.miniprogram) {
// 微信小程序環(huán)境峦嗤,給登錄設置點擊監(jiān)聽(會同時響應@click)
document.querySelector(".login").addEventListener('click', function() {
uniWebView.switchTab({
url: '/pages/tabBar/API/API'
});
})
}
});
});
}
}
</script>
<style>
</style>