详解小程序中h5页面onShow实现及跨页面通信方案

wx.miniProgram.reLaunch({
 url: '/pages/webview/bridge?url=项目首页地址'
})

<web-view wx:if="{{url}}" src="{{url}}" binderror="onError" bindload="onLoaded" bindmessage="onPostMessage"></web-view>

// 链接处理工具方法
import util from '@/lib/util';
// 全局数据存储操作类
import routeParams from '@/lib/routeParams';
const urlReg = /^(https?\:\/\/[^?#]+)(\?[^#]*)?(#[^\?&]+)?(.+)?$/;
let messageData = {};

export default class extends wepy.page {
 data = {
  // 页面展示次数
  pageShowCount: 0,
  // 页面url中query部分的参数对象
  mQuery: {},
  ...
 }
 
 onShow(){
  ++this.pageShowCount;
  // 获取其他页面经过操作后，需要传递给h5的参数
  let data = routeParams.getBackFromData() || {};
  // webview页面状态更新
  if(this.pageShowCount > 1 && this.mQuery.__isonshowpro && this.mQuery.__isonshowpro === '1' || data.refresh){
   // 获取需要传递给h5页面的参数
   let refreshParam = data.refreshParam;
   ...
   // 如果连接中带有需要处理onShow逻辑的参数（通过url的hash和h5交互，而不是刷页面）
   if (this.pageShowCount > 1 && this.mQuery.__isonshowpro === '1') {
    let [whole, mainUrl, queryStr, hashStr, hashQueryStr] = urlReg.exec(this.url);
    // 在url的hash中加入新的参数
    hashStr = (hashStr || '#').substring(1);
    if (refreshParam) {
     delete refreshParam.refresh;
    }
    const messageData = this.getNavigateMessageData();
    // 将需要更新的参数传给页面hash
    hashStr = util.addQuery(hashStr, Object.assign({
     // onshow标志位
     __isonshow: 1,
     // wa主动触发hashchange标志位
     // 其实目前通过__isonshow就可以判断是wa主动触发hashchange
     // 设置该字段是为了明确功能，且以后扩展用
     __wachangehash: 1,
     // 时间戳刷新
     __hashtimestamp: Date.now()
    }, messageData, refreshParam));
    this.url = mainUrl + queryStr + '#' + hashStr;
    console.log('【webview-hashchange-url】', this.url);
    // 这里要加个延迟，否则在webview返回到webview时，无法触发hashchange，应该是小程序bug
    setTimeout(()=> {
     this.$apply();
    }, 50);
   // 通过修改query参数，刷新webview
   } else {
    ...
   }
   ...
  }
 }
 
 /**
  * 获取需要发送的消息数据
  */
 getNavigateMessageData(){
  let rst = {};
  for(let i in messageData){
   /* message结构:
    message: {
     key: 'xx',    // 消息名称
     content: 'xx',  // 消息内容
     trigger: {    // 触发条件
      type: '',    // 触发类型 
                - immediately 在下一次onshow或者打开页面中立刻触发，
                - url 在找到指定h5链接时触发
      content: ''   // 条件内容
                - type=immediately 时为空
                - type=url 时候为h5链接地址
     }
    }
   */
   const message = messageData[i];
   const trigger = message.trigger || {};
   // 立刻发送、路径触发
   if(trigger.type === 'immediately' || trigger.type === 'url' && this.url.indexOf(trigger.content) > -1){
    // 将key和content集合到一个对象中，便于hash直接设置
    rst[message.key] = message.content;
    // 消息通知后，从缓存中删除
    delete messageData[message.key];
   }
  }
  console.log('【webview-get-message】', rst);
  console.log('【webview-message-cache】', messageData);
  return rst;
 }
 
 /**
  * 存储消息数据
  */
 storeNavigateMessageData(message){
  if(message && message.key){
   console.log('【webview-store-message】', message)
   // 通过key设置每一条消息名称
   messageData[message.key] = message;
   console.log('【webview-message-cache】', messageData);
  }
 }
 
 methods = {
  // 接收发送过来的消息
  onPostMessage(e){
   if(!e.detail.data)return;
   const detailData = e.detail.data;
   // 获取消息数据
   let messageData = getValueFromMixedArray(detailData, 'messageData', true);
   if (messageData) {
    // 存储
    this.storeNavigateMessageData(messageData);
   }
   ...
  }
 }
 
 ...
}

import { isZZWA, onShow } from '@/lib/sdk'
import URL from '@/lib/url'

...
created () {
if (isZZWA()) {
 onShow(() => {
 // 地址信息
  const addressInfo = URL.getHashParam('zzwaAddress')
   console.log('addressInfo:', decodeURIComponent(addressInfo))
   ...
   // 分类信息
   const selecteCateInfo = URL.getHashParam('selecteCateInfo')
   console.log('selecteCateInfo:', selecteCateInfo)
   ...
 } else {
  ...
 }
}
...

import { isZZWA, serviceDone } from '@/lib/sdk'
// 类型选择点击
typeChooseClick (param, type) {
 ...
 if (isZZWA()) {
  // 需要返回的数据
  const data = {
   key: 'selecteCateInfo',
   content: JSON.stringify({...})
  }
  // 通过postMessage发送给小程序，-1表示返回上一页面
  serviceDone(data, -1)
 } else {
  ...
 } 
}

import util from './util';

class WASDK {
 /**
  * Create a instance.
  * @ignore
  */
 constructor(){
  // hashchang事件处理
  if('onhashchange' in window && window.addEventListener && !WASDK.hashInfo.isInit){
   // 更新标志位
   WASDK.hashInfo.isInit = true;
   // 绑定hashchange
   window.addEventListener('hashchange', ()=>{
    // 如果小程序webview修改的hash，才进行处理
    if (util.getHash(window.location.href, '__wachangehash') === '1') {
     // 这块有个坑：
     // ios小程序webview在修改完url的hash之后，页面hashchange和更新都可以正常触发
     // 但是：h5调用部分小程序能力会失败(如：ios在设置完hash后，调用wx.uploadImg会失败，需要重新设置wx.config)
     // 因为ios小程序的逻辑是，url只要发生变化，wx.config中的appId就找不到了
     // 所以需要重新进行wx.config配置
     // 这一步是获取之前设置wx.config的参数（需要从服务端拿，因为之前已经获取过了，这里从缓存直接取）
     const jsticket = window.native && window.native.adapter && window.native.adapter.jsticket || null;
     const ua = navigator.userAgent;
     // 非安卓系统要重新设置wx.config
     if (jsticket && !(ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1)) {
      window.wx.config({
       debug: false,
       appId: jsticket.appId,
       timestamp: jsticket.timestamp,
       nonceStr: jsticket.noncestr,
       signature: jsticket.signature,
       jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ',
        'onMenuShareQZone', 'onMenuShareWeibo', 'scanQRCode', 'chooseImage', 'uploadImage', 'previewImage', 'getLocation', 'openLocation']
      })
     }
     // 触发缓存数组的回调
     WASDK.hashInfo.callbackArr.forEach(callback=>{
      callback();
     })
     // 执行返回操作（这一步是重点！！）
     // 因为webview设置完hash参数后，会使webview历史栈+1
     // 而实际并不需要这次多余的历史记录，所以需要执行返回操作把它去掉
     // 即便是返回操作，也仅仅是hash层面的变更，所以不会触发页面刷新
     // 用setTimeout表示在下一次事件循环进行返回操作。如果后面有对dom操作可以在当前次事件循环完成
     setTimeout(()=>{
      window.history.go(-1);
     }, 0);
    }
   }, false)
  }
 }

 /**
  * hash相关信息
  */
 static hashInfo = {
  // 是否已经初始化
  isInit: false,
  // hash回调香瓜数组
  callbackArr: []
 }
 
 /**
  * 页面再次展示时钩子方法
  * @param {Function} callback - 必填, callback回调方法, 回传参数为hash部分问号后面的参数解析对象
  */
 @execLog
 onShow(callback){
  if (typeof callback === 'function') {
   // 对回调方法进行onshow逻辑包装，并推入缓存数组
   WASDK.hashInfo.callbackArr.push(function(){
    // 检查是否是指定参数发生变化
    if(util.getHash(window.location.href, '__isonshow') === '1'){
     // 触发onShow回调
     callback();
    }
   })
  } else {
   util.console.error(`参数错误，调用onShow请传入正确callback回调`);
  }
 }
 
 /**
  * 业务处理完成并发送消息
  * @param {Object}      obj - 必填项，消息对象
  * @param {String}      obj.key - 必填项，消息名称
  * @param {String}      obj.content - 可选项，消息内容，默认空串，如果是内容对象，请转换成字符串
  * @param {String|Number}  condition - 可选项，默认仅进行postMessage
  *               String - 可以传指定url的路径，当小程序webview打开指定的url或者onshow时，会触发该消息
  *                    也可传小程序path，这个为以后预留
  *               Number - 返回到指定的测试，类似history.go(-1)，如： -1，-2
  */
 @execLog
 serviceDone(obj, condition){
  if(obj && obj.key){
   // 消息体
   const message = {
    // 消息名称
    key: obj.key,
    // 消息体
    content: obj.content || '',
    // 触发条件
    trigger: {
     // 类型 'immediately'在下一次onshow中立刻触发， 'url'，在找到指定h5链接时触发，'path'在打开指定小程序路径时触发
     type: 'immediately',
     // 条件内容，immediately是为空，url是为h5链接地址，path是为小程序路径
     content: ''
    }
   };
   // 解析触发条件
   condition = condition || 0;
   // 如果是路径
   if(typeof condition === 'string' && (condition.indexOf('http') > -1 || condition.indexOf('pages/') > -1)){
    // 设置消息触发条件
    message.trigger = {
     type: condition.indexOf('http') > -1 ? 'url' : 'path',
     content: condition
    }
   }
   // 发送消息
   wx.miniProgram.postMessage({
    data: {
     messageData: message
    }
   });
   // 如果不是url或者path触发，则对conditon是否需要返回进行判断
   if(message.trigger.type === 'immediately'){
    // 查看是否需要返回指定的层级，兼容传入'-1'字符串这种类型的场景
    try{
     condition = parseInt(condition, 10);
    }catch(e){}
    // 保证返回级数的正确性
    if(condition && typeof condition === 'number' && !isNaN(condition)){
     this.handler.navigateBack({delta: Math.abs(condition)});
    }
   }
  }else{
   util.console.error(`参数错误，调用serviceDone方法，传入的对象中不包含key值`);
  }
 }
 
 ...
}

window.native = new Native();

export default native;