微信小程序webview和小程序通讯

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 。

属性说明

在小程序端，用法和iframe类似，直接在src赋值在线地址

注意：

• 小程序仅支持加载网络网页，不支持本地html
• 小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。
• 小程序平台， src 指向的链接需登录小程序管理后台配置域名白名单。
• 小程序平台，个人类型与海外类型的小程序使用 web-view 组件，提交审核时注意微信等平台是否允许使用
• 小程序的web-view使用的是小程序自带的浏览器内核，不同厂商不一样，详见
• 各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

   加载的网页中支持调用部分 uni 接口：

  方法名	说明	平台差异说明
  uni.navigateTo	navigateTo
  uni.redirectTo	redirectTo
  uni.reLaunch	reLaunch
  uni.switchTab	switchTab
  uni.navigateBack	navigateBack
  uni.postMessage	向应用发送消息	抖音小程序不支持、H5 暂不支持（可以直接使用 window.postMessage）
  uni.getEnv	获取当前环境	抖音小程序与飞书小程序不支持

  uni.postMessage(OBJECT)

  网页向应用发送消息，在  的 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.实际操作

    下面直接来看示例

    
    
      
      
      
      测试
      
      
      
      
      
      
    
    
      
        
          
          
        
        
          
          
            体验馆带看
            看房型
            立即咨询
          
          
          
            
              
    房型预览
              
                收起
                
              
            
            
              
                
                  
    {{item.name}}
                  
                
              
            
          
        
      
      
      
      
      
      
      
      
      
      
      
      
    
    

    • 因为使用的vantUi库，所以下载了vant.min.js，想用vue开发所以下载了vue.min.js，这2个不重要
    • 需要引入微信小程序 JS-SDK
    • 与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('当前环境：' + 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  
       
      页面预览效果：
       
       
       
      小提示：如何在开发者工具查看webiew页面的信息
       
       
       
      小程序端代码参考
       
        
      
      
      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传来的信息,在小程序后退、组件销毁、分享会触发'
            );
            console.log(data.at(-1));
            if (data?.at(-1)?.action === '咨询') {
              callPhone('18205236589');
            }
          },
        },
      };