微信小步伐webview和小步伐通讯

梦见你的名字  金牌会员 | 2024-6-27 00:42:15 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 971|帖子 971|积分 2913

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
1.背景先容

1.1需要在小步伐嵌入vr页面，同时在vr页面添加操作按钮与小步伐举行通信交互
1.2 开发工具：uniapp开发小步伐
1.3原型图
        功能：.点击体验官带看跳转小步伐的体验官带看页面

         功能：点击立刻咨询唤起小步伐弹窗打电话


2.组件及api先容

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

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。
   各小步伐平台，web-view 加载的 url 需要在后台设置域名白名单，包括内部再次 iframe 内嵌的其他 url 。
  属性阐明
属性名类型阐明平台差别阐明srcStringwebview 指向网页的链接allowString用于为 iframe 指定其特征计谋H5sandboxString该属性对出如今 iframe 框架中的内容启用一些额外的限定条件。H5fullscreenBoolean是否铺满整个页面，默认值：true。H5 (HBuilder X 3.5.4+)webview-stylesObjectwebview 的样式App-vueupdate-titleBoolean是否自动更新当前页面标题。默认值：trueApp-vue (HBuilder X 3.3.8+)@messageEventHandler网页向应用 postMessage 时，会在特定时机（退却、组件销毁、分享）触发并收到消息。H5 暂不支持（可以直接使用 window.postMessage）@onPostMessageEventHandler网页向应用实时 postMessageApp-nvue@loadEventHandler网页加载成功时候触发此变乱。微信小步伐、支付宝小步伐、抖音小步伐、QQ小步伐@errorEventHandler网页加载失败的时候触发此变乱。微信小步伐、支付宝小步伐、抖音小步伐、QQ小步伐 在小步伐端，用法和iframe雷同，直接在src赋值在线地点
  1. <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.navigateTonavigateTouni.redirectToredirectTouni.reLaunchreLaunchuni.switchTabswitchTabuni.navigateBacknavigateBackuni.postMessage向应用发送消息抖音小步伐不支持、H5 暂不支持（可以直接使用 window.postMessage）uni.getEnv获取当前情况抖音小步伐与飞书小步伐不支持
uni.postMessage(OBJECT)

网页向应用发送消息，在 <web-view> 的 message 变乱回调 event.detail.data 中接收消息。
Tips


  • 传递的消息信息，必须写在 data 对象中。
  • event.detail.data 中的数据，以数组的形式接收每次 post 的消息。（注：支付宝小步伐除外，支付宝小步伐中以对象形式接受）
#uni.getEnv(CALLBACK)

callback 返回的对象
属性类型阐明plusBooleanAppnvueBooleanApp-nvue, uni.webview.1.5.4.js+ 支持miniprogramBoolean微信小步伐smartprogramBoolean百度小步伐miniprogramBoolean支付宝小步伐
3.现实操作

下面直接来看示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>测试</title>
  9.   <!-- 引入ui库vant的样式 -->
  10.   <link rel="stylesheet" href="./vant.css">
  11.   <!-- 引入自定义的全局样式 -->
  12.   <link rel="stylesheet" href="./global.css">
  13.   <!-- 引入页面样式文件 -->
  14.   <link rel="stylesheet" href="./index.css">
  16. </head>
  18. <body>
  19.   <div id="app">
  20.     <div class="flex-1">
  21.       <!-- 嵌入iframe展示vr页面 -->
  22.       <iframe class="iframe" src="https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx" allowfullscreen="true"
  23.         frameborder="0"></iframe>
  24.     </div>
  25.     <main>
  26.       <!-- 底部操作按钮 -->
  27.       <div class="ptb-10 flex-vcenter flex-between">
  28.         <van-button type="info" @click="handleLook">体验馆带看</van-button>
  29.         <van-button type="info" @click="handleRoom">看房型</van-button>
  30.         <van-button type="info" @click="handleAsk">立即咨询</van-button>
  31.       </div>
  32.       <!-- 看房型的弹窗 -->
  33.       <van-popup v-model="showRoomPopup" round position="bottom" :overlay="false"
  34.         :style="{ minHeight: '10%',padding: '15px 10px 10px',background: 'rgba(0,0,0,.7)' }">
  35.         <div class="co-white pb-15" style="position: relative;">
  36.           <p class="text-center">房型预览</p>
  37.           <div @click="showRoomPopup = false" class="arrow-down-wrap flex-vcenter">
  38.             <span class="fs-12 mr-5">收起</span>
  39.             <van-icon name="arrow-down" />
  40.           </div>
  41.         </div>
  42.         <van-grid class="rooms-wrap" :column-num="3">
  43.           <van-grid-item v-for="(item,index) in urlParams.rooms" :key="index">
  45.             <div class="co-white rooms-item" @click="goRoom(item.url)">
  46.               <p class="rooms-content">{{item.name}}</p>
  47.               <van-image width="100%" height="100%" fit="cover" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
  48.             </div>
  49.           </van-grid-item>
  50.         </van-grid>
  51.       </van-popup>
  52.     </main>
  53.   </div>
  55.   <!-- 需要引入的文件 -->
  56.   <!-- vue -->
  57.   <script type="text/javascript" src="./vue.min.js"></script>
  58.   <!-- vant ui库 -->
  59.   <script type="text/javascript" src="./vant.min.js"></script>
  60.   <!--  微信小程序 JS-SDK  -->
  61.   <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  62.   <!-- 与uniapp建立连接 -->
  63.   <script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
  64.   <!-- 页面的js文件 -->
  65.   <script type="text/javascript" src="./index.js"></script>
  66. </body>
  68. </html>
复制代码


  • 因为使用的vantUi库，所以下载了vant.min.js，想用vue开发所以下载了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与小步伐通信

  1. new Vue({
  2.   el: '#app',
  3.   components: {
  4.   },
  5.   data () {
  6.     return {
  7.       urlParams: {
  8.         rooms: []
  9.       },
  10.       showRoomPopup: false
  11.     }
  12.   },
  13.   computed: {
  14.   },
  15.   created () {
  16.   },
  17.   watch: {
  18.   },
  19.   mounted () {
  20.     const { params } = this.urlToObj(location.href)
  21.     if (params) {
  22.       this.urlParams = JSON.parse(decodeURI(params))
  23.     }
  24.     document.addEventListener('UniAppJSBridgeReady', () => {
  25.       uni.getEnv((res) => {
  26.         console.log('当前环境：' + JSON.stringify(res));
  27.       });
  28.     })
  29.   },
  30.   methods: {
  31.     // url参数转对象
  32.     urlToObj (url) {
  33.       let obj = {};
  34.       if (url.indexOf('?') >= 0) {
  35.         let str = url.slice(url.indexOf('?') + 1);
  36.         let arr = str.split('&');
  37.         console.log(str, arr)
  39.         for (let j = arr.length, i = 0; i < j; i++) {
  40.           let arr_temp = arr[i].split('=');
  41.           obj[arr_temp[0]] = arr_temp[1];
  42.         }
  43.       }
  44.       return obj;
  45.     },
  47.     // 点击体验官带看
  48.     handleLook () {
  49.       // 跳转到小程序的某个页面
  50.       uni.navigateTo({
  51.         url: '/pages/vr/look'
  52.       });
  53.     },
  54.     // 点击看房型
  55.     handleRoom () {
  56.       console.log(this.urlParams)
  57.       this.showRoomPopup = true;
  58.     },
  59.     goRoom (url) {
  60.       // 跳转到小程序的某个页面
  61.       uni.navigateTo({
  62.         url: `/pages/vr/room?url=${url}`
  63.       });
  64.     },
  65.     // 点击咨询
  66.     handleAsk () {
  67.       // 发送消息给小程序
  68.       uni.postMessage({
  69.         data: {
  70.           action: '咨询'
  71.         }
  72.       });
  73.       // 因为网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 所以用uni.redirectTo触发小程序的重新加载实时接收消息
  74.       uni.redirectTo({
  75.         url: '/pages/vr/vr'
  76.       });
  77.     }
  78.   }
  79. })
复制代码

页面预览效果：


小提示：如何在开发者工具查看webiew页面的信息



小步伐端代码参考

  1. <template>
  2.   <web-view :src="vrUrl" @message="onMessage"></web-view>
  3. </template>
  5. <script>
  6. import { callPhone } from '@/utils';
  7. export default {
  8.   data() {
  9.     return {
  10.       vrUrl:
  11.         // 这里要换成你的在线网页地址，我这里写的是本地的
  12.         `http://127.0.0.1:5500/vr-demo/index.html?params=` +
  13.         encodeURI(
  14.           JSON.stringify({
  15.             rooms: [
  16.               {
  17.                 name: '房间1',
  18.                 url: 'https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx',
  19.               },
  20.               {
  21.                 name: '房间2',
  22.                 url: 'https://www.realsee.com/website/customer/dataSpace/vr/kPJJK5rx',
  23.               },
  24.             ],
  25.           })
  26.         ),
  27.     };
  28.   },
  29.   onLoad(props) {
  30.     console.log(props);
  31.   },
  32.   methods: {
  33.     // 接收webview传来的消息
  34.     onMessage(e) {
  35.       const { data } = e.detail;
  36.       console.log(
  37.         data,
  38.         'web-view传来的信息,在小程序后退、组件销毁、分享会触发'
  39.       );
  40.       console.log(data.at(-1));
  41.       if (data?.at(-1)?.action === '咨询') {
  42.         callPhone('18205236589');
  43.       }
  44.     },
  45.   },
  46. };
  47. </script>
复制代码



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

梦见你的名字

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表