小程序与 H5 的交互

前言

最近又在写小程序，不过是基于原生写的；里面有很多内容是嵌入的H5端的页面。所以，就产生了以下需求：

一、H5引入微信jdk

想要在H5端使用部分小程序的API，必须引入相关的jdk

// 在html根文件中
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

JS-JDK说明文档

• 然后页面中就可以使用部分微信api了，如：

// switchTab方式 - 跳转到tab页面
wx.miniProgram.switchTab({  
    url: '/pages/index/index'  
})

// navigateTo方式 - 跳转普通页面
wx.miniProgram.navigateTo({  
   	url: '/pagesB/coupon/transfer'  
})

• H5页面修改小程序页面顶部标题

// 小程序在嵌入h5端的页面是，可以将顶部title传到H5端显示；但有时候需要可以H5端去修改小程序页面的title

document.title = "修改后的标题"; // 小程序webview的title其实就是用的这个属性

• 两端通讯

// 也是引入相关的jdk后，通过wx.miniProgram.postMessage想小程序发送消息；
// 小程序则在 web-view组件上监听 bindmessage 事件

• 判断H5页面是否被小程序的 web-view 中使用，有如下三种方法：

1. window.__wxjs_environment === 'miniprogram'
2. wx.miniProgram.getEnv => // true
3. window.navigator.userAgent => // “Mozilla/…/arm64 miniProgram/wx14211cb2fd9f805123” 携带了 miniProgram 字样和小程序的 appid
   以上三种方法都有版本兼容问题，具体参考官方文档

• webview内判断小程序是否在前台

WeixinJSBridge.on('onPageStateChange', function(res) {
  console.log('res is active', res.active)
})

扩展：webview 层级问题

web-view 会自动铺满整个页面，并覆盖其他组件；uni-app 中是这么说的：如需要在vue页面中写代码为web-view组件覆盖内容，小程序端无解
但是，通过 cover-view 并且将 z-index 设置的很高，可以覆盖内容，但只在真机有效。并且只适合写简单内容，拖动时还会出现抖动问题，无解
tip：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent；如：<web-view :src="webUrl"></web-view> => this.webUrl = decodeURIComponent(options.url)

以上内容在 官网都可以找到哦
webview 官方文档

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！