详解小程序中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;