欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序webview與VUE-H5實(shí)時(shí)通訊踩坑無(wú)數(shù)實(shí)戰(zhàn)記錄(親測(cè)可實(shí)現(xiàn))

 更新時(shí)間:2025年08月23日 14:08:52   作者:OvO張張  
小程序支持webview以后,我們開(kāi)發(fā)的好多h5頁(yè)面,就可以直接在小程序里使用了,這篇文章主要介紹了微信小程序webview與VUE-H5實(shí)時(shí)通訊的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

背景:微信小程序、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)

web-view | 微信開(kāi)放文檔

在微信開(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)文章

最新評(píng)論