微信小程序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.postMessage(OBJECT)

网页向应用发送消息，在  的 message 事件回调 event.detail.data 中接收消息。

Tips

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

#uni.getEnv(CALLBACK)

callback 返回的对象

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 < 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 () {
      // 发送消息给小程序
      uni.postMessage({
        data: {
          action: '咨询'
        }
      });
      // 因为网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 所以用uni.redirectTo触发小程序的重新加载实时接收消息
      uni.redirectTo({
        url: '/pages/vr/vr'
      });
    }
  }
})

页面预览效果：

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

小程序端代码参考