亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序webview和小程序通訊實(shí)際操作指南

 更新時(shí)間:2024年07月06日 14:15:30   作者:大德大威顧神  
微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進(jìn)行開(kāi)發(fā)實(shí)現(xiàn)需求,這篇文章主要給大家介紹了關(guān)于微信小程序webview和小程序通訊實(shí)際操作的相關(guān)資料,需要的朋友可以參考下

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ō)明
srcStringwebview 指向網(wǎng)頁(yè)的鏈接
allowString用于為 iframe 指定其特征策略H5
sandboxString該屬性對(duì)呈現(xiàn)在 iframe 框架中的內(nèi)容啟用一些額外的限制條件。H5
fullscreenBoolean是否鋪滿整個(gè)頁(yè)面,默認(rèn)值:true。H5 (HBuilder X 3.5.4+)
webview-stylesObjectwebview 的樣式App-vue
update-titleBoolean是否自動(dòng)更新當(dāng)前頁(yè)面標(biāo)題。默認(rèn)值:trueApp-vue (HBuilder X 3.3.8+)
@messageEventHandler網(wǎng)頁(yè)向應(yīng)用 postMessage 時(shí),會(huì)在特定時(shí)機(jī)(后退、組件銷(xiāo)毀、分享)觸發(fā)并收到消息。H5 暫不支持(可以直接使用 window.postMessage
@onPostMessageEventHandler網(wǎng)頁(yè)向應(yīng)用實(shí)時(shí) postMessageApp-nvue
@loadEventHandler網(wǎng)頁(yè)加載成功時(shí)候觸發(fā)此事件。微信小程序、支付寶小程序、抖音小程序、QQ小程序
@errorEventHandler網(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.navigateTonavigateTo
uni.redirectToredirectTo
uni.reLaunchreLaunch
uni.switchTabswitchTab
uni.navigateBacknavigateBack
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ō)明
plusBooleanApp
nvueBooleanApp-nvue, uni.webview.1.5.4.js+ 支持
miniprogramBoolean微信小程序
smartprogramBoolean百度小程序
miniprogramBoolean支付寶小程序

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智能獲取瀏覽器版本UA信息的方法

    js智能獲取瀏覽器版本UA信息的方法

    下面小編就為大家?guī)?lái)一篇js智能獲取瀏覽器版本UA信息的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-08-08
  • layui table單元格事件修改值的方法

    layui table單元格事件修改值的方法

    今天小編就為大家分享一篇layui table單元格事件修改值的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-09-09
  • JS中onpropertychange和onchange事件區(qū)別小結(jié)

    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-07
  • JS前端千萬(wàn)級(jí)彈幕數(shù)據(jù)循環(huán)優(yōu)化示例

    JS前端千萬(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的方法示例

    使用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 API
    2024-09-09
  • js canvas實(shí)現(xiàn)擦除效果示例代碼

    js 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-04
  • JS?中Proxy代理和?Reflect反射方法示例詳解

    JS?中Proxy代理和?Reflect反射方法示例詳解

    這篇文章主要為大家介紹了JS?中Proxy代理和?Reflect反射方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • JavaScript中Map和Set數(shù)據(jù)結(jié)構(gòu)使用方法詳解

    JavaScript中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-03
  • JSP防止網(wǎng)頁(yè)刷新重復(fù)提交數(shù)據(jù)的幾種方法

    JSP防止網(wǎng)頁(yè)刷新重復(fù)提交數(shù)據(jù)的幾種方法

    這篇文章主要介紹了JSP防止網(wǎng)頁(yè)刷新重復(fù)提交數(shù)據(jù)的幾種方法,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-11-11
  • DropDownList控件綁定數(shù)據(jù)源的三種方法

    DropDownList控件綁定數(shù)據(jù)源的三種方法

    本文給大家分享web 中 DropDownList綁定數(shù)據(jù)源的幾種方式以及DropdownList控件動(dòng)態(tài)綁定數(shù)據(jù)源的兩種方法,下面通過(guò)本文給大家詳細(xì)介紹,感興趣的朋友一起看看
    2016-12-12

最新評(píng)論