微信小程序webview和小程序通訊實際操作指南

更新時間：2024年07月06日 14:15:30 作者：大德大威顧神

微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進行開發(fā)實現需求,這篇文章主要給大家介紹了關于微信小程序webview和小程序通訊實際操作的相關資料,需要的朋友可以參考下

1.背景介紹

1.1需要在小程序嵌入vr頁面，同時在vr頁面添加操作按鈕與小程序進行通信交互

1.2 開發(fā)工具：uniapp開發(fā)小程序

1.3原型圖

功能：.點擊體驗官帶看跳轉小程序的體驗官帶看頁面

功能：點擊立即咨詢喚起小程序彈窗打電話

2.組件及api介紹

uniapp官網：web-view | uni-app官網 (dcloud.net.cn)

web-view

web-view 是一個 web 瀏覽器組件，可以用來承載網頁的容器，會自動鋪滿整個頁面（nvue 使用需要手動指定寬高）。

各小程序平臺，web-view 加載的 url 需要在后臺配置域名白名單，包括內部再次 iframe 內嵌的其他 url 。

屬性說明

屬性名	類型	說明	平臺差異說明
src	String	webview 指向網頁的鏈接
allow	String	用于為 iframe 指定其特征策略	H5
sandbox	String	該屬性對呈現在 iframe 框架中的內容啟用一些額外的限制條件。	H5
fullscreen	Boolean	是否鋪滿整個頁面，默認值：`true`。	H5 (HBuilder X 3.5.4+)
webview-styles	Object	webview 的樣式	App-vue
update-title	Boolean	是否自動更新當前頁面標題。默認值：`true`	App-vue (HBuilder X 3.3.8+)
@message	EventHandler	網頁向應用 `postMessage` 時，會在特定時機（后退、組件銷毀、分享）觸發(fā)并收到消息。	H5 暫不支持（可以直接使用 window.postMessage）
@onPostMessage	EventHandler	網頁向應用實時 `postMessage`	App-nvue
@load	EventHandler	網頁加載成功時候觸發(fā)此事件。	微信小程序、支付寶小程序、抖音小程序、QQ小程序
@error	EventHandler	網頁加載失敗的時候觸發(fā)此事件。	微信小程序、支付寶小程序、抖音小程序、QQ小程序

在小程序端，用法和iframe類似，直接在src賦值在線地址

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

注意：

小程序僅支持加載網絡網頁，不支持本地html
小程序端 web-view 組件一定有原生導航欄，下面一定是全屏的 web-view 組件，navigationStyle: custom 對 web-view 組件無效。
小程序平臺， src 指向的鏈接需登錄小程序管理后臺配置域名白名單。
小程序平臺，個人類型與海外類型的小程序使用 web-view 組件，提交審核時注意微信等平臺是否允許使用
小程序的web-view使用的是小程序自帶的瀏覽器內核，不同廠商不一樣，詳見
各小程序平臺，web-view 加載的 url 需要在后臺配置域名白名單，包括內部再次 iframe 內嵌的其他 url 。

<web-view> 加載的網頁中支持調用部分 uni 接口：

方法名	說明	平臺差異說明
uni.navigateTo	navigateTo
uni.redirectTo	redirectTo
uni.reLaunch	reLaunch
uni.switchTab	switchTab
uni.navigateBack	navigateBack
uni.postMessage	向應用發(fā)送消息	抖音小程序不支持、H5 暫不支持（可以直接使用 window.postMessage）
uni.getEnv	獲取當前環(huán)境	抖音小程序與飛書小程序不支持

uni.postMessage(OBJECT)

網頁向應用發(fā)送消息，在 <web-view> 的 message 事件回調 event.detail.data 中接收消息。

Tips

傳遞的消息信息，必須寫在 data 對象中。
event.detail.data 中的數據，以數組的形式接收每次 post 的消息。（注：支付寶小程序除外，支付寶小程序中以對象形式接受）

uni.getEnv(CALLBACK)

callback 返回的對象

屬性	類型	說明
plus	Boolean	App
nvue	Boolean	App-nvue, uni.webview.1.5.4.js+ 支持
miniprogram	Boolean	微信小程序
smartprogram	Boolean	百度小程序
miniprogram	Boolean	支付寶小程序

3.實際操作

下面直接來看示例

<!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>測試</title>
  <!-- 引入ui庫vant的樣式 -->
  <link rel="stylesheet" href="./vant.css" rel="external nofollow" >
  <!-- 引入自定義的全局樣式 -->
  <link rel="stylesheet" href="./global.css" rel="external nofollow" >
  <!-- 引入頁面樣式文件 -->
  <link rel="stylesheet" href="./index.css" rel="external nofollow" >

</head>

<body>
  <div id="app">
    <div class="flex-1">
      <!-- 嵌入iframe展示vr頁面 -->
      <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">體驗館帶看</van-button>
        <van-button type="info" @click="handleRoom">看房型</van-button>
        <van-button type="info" @click="handleAsk">立即咨詢</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">房型預覽</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庫 -->
  <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>
  <!-- 頁面的js文件 -->
  <script type="text/javascript" src="./index.js"></script>
</body>

</html>

因為使用的vantUi庫，所以下載了vant.min.js，想用vue開發(fā)所以下載了vue.min.js，這2個不重要
需要引入微信小程序 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，可以下載到本地

調用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('當前環(huán)境：' + JSON.stringify(res));
      });
    })
  },
  methods: {
    // url參數轉對象
    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;
    },

    // 點擊體驗官帶看
    handleLook () {
      // 跳轉到小程序的某個頁面
      uni.navigateTo({
        url: '/pages/vr/look'
      });
    },
    // 點擊看房型
    handleRoom () {
      console.log(this.urlParams)
      this.showRoomPopup = true;
    },
    goRoom (url) {
      // 跳轉到小程序的某個頁面
      uni.navigateTo({
        url: `/pages/vr/room?url=${url}`
      });
    },
    // 點擊咨詢
    handleAsk () {
      // 發(fā)送消息給小程序
      uni.postMessage({
        data: {
          action: '咨詢'
        }
      });
      // 因為網頁向應用 postMessage 時，會在特定時機（后退、組件銷毀、分享）觸發(fā)并收到消息。 所以用uni.redirectTo觸發(fā)小程序的重新加載實時接收消息
      uni.redirectTo({
        url: '/pages/vr/vr'
      });
    }
  }
})

頁面預覽效果：

小提示：如何在開發(fā)者工具查看webiew頁面的信息

小程序端代碼參考

<template>
  <web-view :src="vrUrl" @message="onMessage"></web-view>
</template>

<script>
import { callPhone } from '@/utils';
export default {
  data() {
    return {
      vrUrl:
        // 這里要換成你的在線網頁地址，我這里寫的是本地的
        `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傳來的消息
    onMessage(e) {
      const { data } = e.detail;
      console.log(
        data,
        'web-view傳來的信息,在小程序后退、組件銷毀、分享會觸發(fā)'
      );
      console.log(data.at(-1));
      if (data?.at(-1)?.action === '咨詢') {
        callPhone('18205236589');
      }
    },
  },
};
</script>