微信小程序webview和小程序通訊實(shí)際操作指南
1.背景介紹
1.1需要在小程序嵌入vr頁(yè)面,同時(shí)在vr頁(yè)面添加操作按鈕與小程序進(jìn)行通信交互
1.2 開(kāi)發(fā)工具:uniapp開(kāi)發(fā)小程序
1.3原型圖
功能:.點(diǎn)擊體驗(yàn)官帶看跳轉(zhuǎn)小程序的體驗(yàn)官帶看頁(yè)面
功能:點(diǎn)擊立即咨詢(xún)喚起小程序彈窗打電話
2.組件及api介紹
uniapp官網(wǎng):web-view | uni-app官網(wǎng) (dcloud.net.cn)
web-view
web-view
是一個(gè) web 瀏覽器組件,可以用來(lái)承載網(wǎng)頁(yè)的容器,會(huì)自動(dòng)鋪滿整個(gè)頁(yè)面(nvue 使用需要手動(dòng)指定寬高)。
各小程序平臺(tái),web-view 加載的 url 需要在后臺(tái)配置域名白名單,包括內(nèi)部再次 iframe 內(nèi)嵌的其他 url 。
屬性說(shuō)明
屬性名 | 類(lèi)型 | 說(shuō)明 | 平臺(tái)差異說(shuō)明 |
---|---|---|---|
src | String | webview 指向網(wǎng)頁(yè)的鏈接 | |
allow | String | 用于為 iframe 指定其特征策略 | H5 |
sandbox | String | 該屬性對(duì)呈現(xiàn)在 iframe 框架中的內(nèi)容啟用一些額外的限制條件。 | H5 |
fullscreen | Boolean | 是否鋪滿整個(gè)頁(yè)面,默認(rèn)值:true 。 | H5 (HBuilder X 3.5.4+) |
webview-styles | Object | webview 的樣式 | App-vue |
update-title | Boolean | 是否自動(dòng)更新當(dāng)前頁(yè)面標(biāo)題。默認(rèn)值:true | App-vue (HBuilder X 3.3.8+) |
@message | EventHandler | 網(wǎng)頁(yè)向應(yīng)用 postMessage 時(shí),會(huì)在特定時(shí)機(jī)(后退、組件銷(xiāo)毀、分享)觸發(fā)并收到消息。 | H5 暫不支持(可以直接使用 window.postMessage) |
@onPostMessage | EventHandler | 網(wǎng)頁(yè)向應(yīng)用實(shí)時(shí) postMessage | App-nvue |
@load | EventHandler | 網(wǎng)頁(yè)加載成功時(shí)候觸發(fā)此事件。 | 微信小程序、支付寶小程序、抖音小程序、QQ小程序 |
@error | EventHandler | 網(wǎng)頁(yè)加載失敗的時(shí)候觸發(fā)此事件。 | 微信小程序、支付寶小程序、抖音小程序、QQ小程序 |
在小程序端,用法和iframe類(lèi)似,直接在src賦值在線地址
<web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
注意:
- 小程序僅支持加載網(wǎng)絡(luò)網(wǎng)頁(yè),不支持本地html
- 小程序端 web-view 組件一定有原生導(dǎo)航欄,下面一定是全屏的 web-view 組件,navigationStyle: custom 對(duì) web-view 組件無(wú)效。
- 小程序平臺(tái),
src
指向的鏈接需登錄小程序管理后臺(tái)配置域名白名單。 - 小程序平臺(tái),個(gè)人類(lèi)型與海外類(lèi)型的小程序使用
web-view
組件,提交審核時(shí)注意微信等平臺(tái)是否允許使用 - 小程序的web-view使用的是小程序自帶的瀏覽器內(nèi)核,不同廠商不一樣,詳見(jiàn)
- 各小程序平臺(tái),web-view 加載的 url 需要在后臺(tái)配置域名白名單,包括內(nèi)部再次 iframe 內(nèi)嵌的其他 url 。
<web-view>
加載的網(wǎng)頁(yè)中支持調(diào)用部分 uni 接口:
方法名 | 說(shuō)明 | 平臺(tái)差異說(shuō)明 |
---|---|---|
uni.navigateTo | navigateTo | |
uni.redirectTo | redirectTo | |
uni.reLaunch | reLaunch | |
uni.switchTab | switchTab | |
uni.navigateBack | navigateBack | |
uni.postMessage | 向應(yīng)用發(fā)送消息 | 抖音小程序不支持、H5 暫不支持(可以直接使用 window.postMessage) |
uni.getEnv | 獲取當(dāng)前環(huán)境 | 抖音小程序與飛書(shū)小程序不支持 |
uni.postMessage(OBJECT)
網(wǎng)頁(yè)向應(yīng)用發(fā)送消息,在 <web-view>
的 message
事件回調(diào) event.detail.data
中接收消息。
Tips
- 傳遞的消息信息,必須寫(xiě)在 data 對(duì)象中。
event.detail.data
中的數(shù)據(jù),以數(shù)組的形式接收每次 post 的消息。(注:支付寶小程序除外,支付寶小程序中以對(duì)象形式接受)
uni.getEnv(CALLBACK)
callback 返回的對(duì)象
屬性 | 類(lèi)型 | 說(shuō)明 |
---|---|---|
plus | Boolean | App |
nvue | Boolean | App-nvue, uni.webview.1.5.4.js+ 支持 |
miniprogram | Boolean | 微信小程序 |
smartprogram | Boolean | 百度小程序 |
miniprogram | Boolean | 支付寶小程序 |
3.實(shí)際操作
下面直接來(lái)看示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>測(cè)試</title> <!-- 引入ui庫(kù)vant的樣式 --> <link rel="stylesheet" href="./vant.css" rel="external nofollow" > <!-- 引入自定義的全局樣式 --> <link rel="stylesheet" href="./global.css" rel="external nofollow" > <!-- 引入頁(yè)面樣式文件 --> <link rel="stylesheet" href="./index.css" rel="external nofollow" > </head> <body> <div id="app"> <div class="flex-1"> <!-- 嵌入iframe展示vr頁(yè)面 --> <iframe class="iframe" src="https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx" allowfullscreen="true" frameborder="0"></iframe> </div> <main> <!-- 底部操作按鈕 --> <div class="ptb-10 flex-vcenter flex-between"> <van-button type="info" @click="handleLook">體驗(yàn)館帶看</van-button> <van-button type="info" @click="handleRoom">看房型</van-button> <van-button type="info" @click="handleAsk">立即咨詢(xún)</van-button> </div> <!-- 看房型的彈窗 --> <van-popup v-model="showRoomPopup" round position="bottom" :overlay="false" :style="{ minHeight: '10%',padding: '15px 10px 10px',background: 'rgba(0,0,0,.7)' }"> <div class="co-white pb-15" style="position: relative;"> <p class="text-center">房型預(yù)覽</p> <div @click="showRoomPopup = false" class="arrow-down-wrap flex-vcenter"> <span class="fs-12 mr-5">收起</span> <van-icon name="arrow-down" /> </div> </div> <van-grid class="rooms-wrap" :column-num="3"> <van-grid-item v-for="(item,index) in urlParams.rooms" :key="index"> <div class="co-white rooms-item" @click="goRoom(item.url)"> <p class="rooms-content">{{item.name}}</p> <van-image width="100%" height="100%" fit="cover" src="https://img01.yzcdn.cn/vant/cat.jpeg" /> </div> </van-grid-item> </van-grid> </van-popup> </main> </div> <!-- 需要引入的文件 --> <!-- vue --> <script type="text/javascript" src="./vue.min.js"></script> <!-- vant ui庫(kù) --> <script type="text/javascript" src="./vant.min.js"></script> <!-- 微信小程序 JS-SDK --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <!-- 與uniapp建立連接 --> <script type="text/javascript" src="./uni.webview.1.5.5.js"></script> <!-- 頁(yè)面的js文件 --> <script type="text/javascript" src="./index.js"></script> </body> </html>
- 因?yàn)槭褂玫膙antUi庫(kù),所以下載了vant.min.js,想用vue開(kāi)發(fā)所以下載了vue.min.js,這2個(gè)不重要
- 需要引入微信小程序 JS-SDK <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
- 與uniapp建立連接,引入hellouniapp.dcloud.net.cn/hybrid/html/uni.webview.1.5.5.js,可以下載到本地
調(diào)用api與小程序通信
new Vue({ el: '#app', components: { }, data () { return { urlParams: { rooms: [] }, showRoomPopup: false } }, computed: { }, created () { }, watch: { }, mounted () { const { params } = this.urlToObj(location.href) if (params) { this.urlParams = JSON.parse(decodeURI(params)) } document.addEventListener('UniAppJSBridgeReady', () => { uni.getEnv((res) => { console.log('當(dāng)前環(huán)境:' + JSON.stringify(res)); }); }) }, methods: { // url參數(shù)轉(zhuǎn)對(duì)象 urlToObj (url) { let obj = {}; if (url.indexOf('?') >= 0) { let str = url.slice(url.indexOf('?') + 1); let arr = str.split('&'); console.log(str, arr) for (let j = arr.length, i = 0; i < j; i++) { let arr_temp = arr[i].split('='); obj[arr_temp[0]] = arr_temp[1]; } } return obj; }, // 點(diǎn)擊體驗(yàn)官帶看 handleLook () { // 跳轉(zhuǎn)到小程序的某個(gè)頁(yè)面 uni.navigateTo({ url: '/pages/vr/look' }); }, // 點(diǎn)擊看房型 handleRoom () { console.log(this.urlParams) this.showRoomPopup = true; }, goRoom (url) { // 跳轉(zhuǎn)到小程序的某個(gè)頁(yè)面 uni.navigateTo({ url: `/pages/vr/room?url=${url}` }); }, // 點(diǎn)擊咨詢(xún) handleAsk () { // 發(fā)送消息給小程序 uni.postMessage({ data: { action: '咨詢(xún)' } }); // 因?yàn)榫W(wǎng)頁(yè)向應(yīng)用 postMessage 時(shí),會(huì)在特定時(shí)機(jī)(后退、組件銷(xiāo)毀、分享)觸發(fā)并收到消息。 所以用uni.redirectTo觸發(fā)小程序的重新加載實(shí)時(shí)接收消息 uni.redirectTo({ url: '/pages/vr/vr' }); } } })
頁(yè)面預(yù)覽效果:
小提示:如何在開(kāi)發(fā)者工具查看webiew頁(yè)面的信息
小程序端代碼參考
<template> <web-view :src="vrUrl" @message="onMessage"></web-view> </template> <script> import { callPhone } from '@/utils'; export default { data() { return { vrUrl: // 這里要換成你的在線網(wǎng)頁(yè)地址,我這里寫(xiě)的是本地的 `http://127.0.0.1:5500/vr-demo/index.html?params=` + encodeURI( JSON.stringify({ rooms: [ { name: '房間1', url: 'https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx', }, { name: '房間2', url: 'https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx', }, ], }) ), }; }, onLoad(props) { console.log(props); }, methods: { // 接收webview傳來(lái)的消息 onMessage(e) { const { data } = e.detail; console.log( data, 'web-view傳來(lái)的信息,在小程序后退、組件銷(xiāo)毀、分享會(huì)觸發(fā)' ); console.log(data.at(-1)); if (data?.at(-1)?.action === '咨詢(xún)') { callPhone('18205236589'); } }, }, }; </script>
總結(jié)
到此這篇關(guān)于微信小程序webview和小程序通訊的文章就介紹到這了,更多相關(guān)微信小程序webview和小程序通訊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS中onpropertychange和onchange事件區(qū)別小結(jié)
當(dāng)一個(gè)HTML元素的屬性用js改變的時(shí)候,都能通過(guò)onpropertychange來(lái)捕獲。例如一個(gè)文本text對(duì)象的value屬性被頁(yè)面的腳本修改的時(shí)候,onchange無(wú)法捕獲到,而onpropertychange卻能夠捕獲。2010-07-07JS前端千萬(wàn)級(jí)彈幕數(shù)據(jù)循環(huán)優(yōu)化示例
這篇文章主要為大家介紹了JS前端一千萬(wàn)條彈幕數(shù)據(jù)循環(huán)優(yōu)化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07使用JavaScript操作Visual Viewport的方法示例
在現(xiàn)代前端開(kāi)發(fā)中,視口(viewport)是一個(gè)非常重要的概念,它決定了用戶在瀏覽網(wǎng)頁(yè)時(shí)所看到的內(nèi)容,JavaScript 提供了一個(gè)強(qiáng)大的接口 —— Visual Viewport API,讓開(kāi)發(fā)者可以更靈活地控制和獲取視口的信息,本文將詳細(xì)介紹如何使用 Visual Viewport API2024-09-09js canvas實(shí)現(xiàn)擦除效果示例代碼
擦除效果在我們?nèi)粘i_(kāi)發(fā)中也是時(shí)有見(jiàn)到的,通過(guò)擦除效果大大加強(qiáng)了與用戶的交互性,所以下面這篇文章主要給大家介紹了利用js和canvas實(shí)現(xiàn)擦除效果的相關(guān)資料,文中給出了詳細(xì)的介紹和示例代碼,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-04-04JavaScript中Map和Set數(shù)據(jù)結(jié)構(gòu)使用方法詳解
這篇文章主要介紹了JavaScript中Map和Set數(shù)據(jù)結(jié)構(gòu)使用方法的相關(guān)資料,Map是一種鍵值對(duì)集合,支持任意類(lèi)型的鍵和值,保留插入順序,并提供多種遍歷和操作方法,Set是一種唯一值集合,通過(guò)哈希算法保證唯一性,提供添加、刪除、檢查元素的方法,需要的朋友可以參考下2025-03-03JSP防止網(wǎng)頁(yè)刷新重復(fù)提交數(shù)據(jù)的幾種方法
這篇文章主要介紹了JSP防止網(wǎng)頁(yè)刷新重復(fù)提交數(shù)據(jù)的幾種方法,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11DropDownList控件綁定數(shù)據(jù)源的三種方法
本文給大家分享web 中 DropDownList綁定數(shù)據(jù)源的幾種方式以及DropdownList控件動(dòng)態(tài)綁定數(shù)據(jù)源的兩種方法,下面通過(guò)本文給大家詳細(xì)介紹,感興趣的朋友一起看看2016-12-12