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

id="article_content" class="article_content clearfix"> id="content_views" class="markdown_views prism-atom-one-dark">

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 。

属性说明

属性名

类型

说明

平台差异说明

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时，会在特定时机（后退、组件销毁、分享）触发并收到消息。

H5 暂不支持（可以直接使用window.postMessage）

@onPostMessage

EventHandler

网页向应用实时postMessage

App-nvue

@load

EventHandler

网页加载成功时候触发此事件。

微信小程序、支付宝小程序、抖音小程序、QQ小程序

@error

EventHandler

网页加载失败的时候触发此事件。

微信小程序、支付宝小程序、抖音小程序、QQ小程序

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


 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
  • 1

注意：

  • 小程序仅支持加载网络网页，不支持本地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}}

              
            

          
        
      
    

  


  
  
  
  
  
  
  
  
  
  
  



 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
调用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'
      });
    }
  }
})
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">

页面预览效果：

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

小程序端代码参考



 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box"> data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/m0_51274464/article/details/144423077","extend1":"pc","ab":"new"}">>
注：本文转载自blog.csdn.net的m0_51274464的文章"https://blog.csdn.net/m0_51274464/article/details/144423077"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！