微信小程序webview與VUE-H5實(shí)時(shí)通訊踩坑無(wú)數(shù)實(shí)戰(zhàn)記錄(親測(cè)可實(shí)現(xiàn))
背景:微信小程序、vue3搭建開(kāi)發(fā)的H5頁(yè)面
在微信小程序開(kāi)發(fā)中,會(huì)遇到嵌套H5頁(yè)面,H5頁(yè)面需要向微信小程序發(fā)消息觸發(fā)微信小程序某個(gè)函數(shù)方法,微信開(kāi)發(fā)文檔上寫(xiě)的非常不清楚,導(dǎo)致踩了很多坑,該文章總結(jié)可直接使用方法
在開(kāi)發(fā)中 ,微信小程序內(nèi)嵌webview,H5想要與微信小程序發(fā)消息,必須要使用微信文檔中的wx.miniProgram的方法,但想要在H5中使用該方法,必須需要引入JSSDK.js文件,官方其實(shí)并沒(méi)有給出明確的引入方式,網(wǎng)上方法很多,踩坑無(wú)數(shù)啊
具體實(shí)現(xiàn)步驟
1、配置域名
首先想要實(shí)現(xiàn)通訊,我們webview中嵌套的H5必須要配置在微信公眾號(hào)開(kāi)發(fā)平臺(tái)的業(yè)務(wù)域名
登錄微信公眾平臺(tái)-在管理-開(kāi)發(fā)管理-開(kāi)發(fā)設(shè)置-業(yè)務(wù)域名中配置我們?cè)L問(wèn)的H5(該權(quán)限需要小程序管理員才能配置)
2、SDK文件引入
在vue項(xiàng)目也就是我們H5項(xiàng)目中引入JSSDK 1.3.2,(目前是這個(gè)版本,具體可查看web-view | 微信開(kāi)放文檔)
踩坑點(diǎn):有很多文章寫(xiě)的需要在根項(xiàng)目index.html文件中引入,類(lèi)似
但是不知道為什么,我在這引入無(wú)法實(shí)現(xiàn)通訊 ,有知道的大佬還請(qǐng)幫我解惑
后來(lái)改用在需要操作的H5頁(yè)面上引入(這是我們的H5頁(yè)面,之前看別的文檔一直以為引入是在微信小程序里面引入),這樣引入就能調(diào)用wx.miniProgram里面的方法
// 因?yàn)轫?xiàng)目用的是uniapp,所以有onLoad方法,vue可以用onMounted生命周期 // 需要引入的H5頁(yè)面內(nèi)引入JSSDK onLoad() { this.$nextTick(() => { const script = document.createElement('script'); script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'; script.onload = () => {}; document.head.appendChild(script); }) },
3、使用
H5實(shí)例:
<template> <button @click="backMini">按鈕</button> </template> <script> export default { onLoad() { uni.showLoading({ title: '加載中...' }) this.$nextTick(() => { const script = document.createElement('script'); script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'; script.onload = () => {}; document.head.appendChild(script); setTimeout(() => { uni.hideLoading() this.backMini(); }, 1000) }) }, methods: { backMini(){ wx.miniProgram.redirectTo({url: '/pagesB/apply-result/index?applyResult=1&isAuth=true'}) wx.miniProgram.postMessage({ data: 'back' }) }, } } </script> <style lang="scss" scoped> </style>
然后在我們的小程序webview.vue中可以這樣接收
<template> <web-view :src="webviewurl" :webview-styles="webviewStyles" @message="onWebViewMessage" ></web-view> </template> <script> export default { data() { return { webviewurl: '', webviewStyles: { progress: { color: 'transparent', marginTop: '-100px' } }, } }, onLoad() { let agreementUrl = this.$hxGetItem('webview'); this.webviewurl = agreementUrl; console.log(this.webviewurl) }, onBackPress(options) { let pages = getCurrentPages() let page = pages[pages.length - 1]; let currentPages = page.$getAppWebview() currentPages.close() return false }, methods: { // 接收H5向微信小程序發(fā)的消息 onWebViewMessage(e) { console.log('收到 WebVi', e.detail.data); }, } } </script> <style lang="scss" scoped> page{background-color: #F8F8F8;} .itemBox{ border-bottom: 2rpx solid #EEEEEE; } </style>
4、注意點(diǎn)
在微信開(kāi)發(fā)文檔中有寫(xiě)明,wx.miniProgram.postMessage只有在特定時(shí)機(jī)才會(huì)觸發(fā)message事件,什么意思呢,就是我在H5頁(yè)面點(diǎn)擊了操作按鈕,向小程序發(fā)送了消息,這時(shí)候小程序并不會(huì)實(shí)時(shí)收到我的消息,而是在我操作了webview或者上面協(xié)議幾種情況才會(huì)觸發(fā)小程序端的@message才會(huì)收到消息,這也是一個(gè)坑點(diǎn)!他們的交互并不是實(shí)時(shí)的,
所以在實(shí)際業(yè)務(wù)中,要根據(jù)文檔靈活變通,例如我這里的交互是在H5頁(yè)面點(diǎn)擊操作需要跳轉(zhuǎn)到小程序內(nèi)的某個(gè)頁(yè)面,我這里直接用的是wx.miniProgram.redirectTo ,這時(shí)候webview也銷(xiāo)毀了會(huì)觸發(fā)我的message,也能傳遞消息了
總結(jié)
到此這篇關(guān)于微信小程序webview與VUE-H5實(shí)時(shí)通訊的文章就介紹到這了,更多相關(guān)微信小程序webview與VUE-H5實(shí)時(shí)通訊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js獲取多個(gè)tagname的節(jié)點(diǎn)數(shù)組
寫(xiě)了個(gè)獲取多個(gè)tagname節(jié)點(diǎn)集合的小方法。類(lèi)似于jQuery的$(‘iput,select,textarea’,'#form’)的效果,返回是按節(jié)點(diǎn)在原有文檔流中的順序返回的2013-09-09微信小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)傳遞參數(shù)(實(shí)體,對(duì)象)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)傳遞參數(shù)(實(shí)體,對(duì)象),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08js實(shí)現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼
js實(shí)現(xiàn)addClass,removeClass,hasClass的函數(shù)代碼,需要的朋友可以參考下。2011-07-07前端文件上傳實(shí)現(xiàn)代碼示例(文件上傳,分片上傳,斷點(diǎn)續(xù)傳)
本文總結(jié)了普通文件上傳和分片上傳的方法,普通上傳通過(guò)FormData和axios實(shí)現(xiàn)文件發(fā)送,而分片上傳則將大文件切割并并行或串行上傳,最后合并分片,提高上傳效率和穩(wěn)定性,還介紹了斷點(diǎn)續(xù)傳和處理上傳過(guò)程中的異常情況,需要的朋友可以參考下2024-09-09