詳解小程序中h5頁(yè)面onShow實(shí)現(xiàn)及跨頁(yè)面通信方案

wx.miniProgram.reLaunch({
 url: '/pages/webview/bridge?url=項(xiàng)目首頁(yè)地址'
})

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

// 鏈接處理工具方法
import util from '@/lib/util';
// 全局?jǐn)?shù)據(jù)存儲(chǔ)操作類
import routeParams from '@/lib/routeParams';
const urlReg = /^(https?\:\/\/[^?#]+)(\?[^#]*)?(#[^\?&]+)?(.+)?$/;
let messageData = {};

export default class extends wepy.page {
 data = {
  // 頁(yè)面展示次數(shù)
  pageShowCount: 0,
  // 頁(yè)面url中query部分的參數(shù)對(duì)象
  mQuery: {},
  ...
 }
 
 onShow(){
  ++this.pageShowCount;
  // 獲取其他頁(yè)面經(jīng)過(guò)操作后，需要傳遞給h6的參數(shù)
  let data = routeParams.getBackFromData() || {};
  // webview頁(yè)面狀態(tài)更新
  if(this.pageShowCount > 1 && this.mQuery.__isonshowpro && this.mQuery.__isonshowpro === '1' || data.refresh){
   // 獲取需要傳遞給h6頁(yè)面的參數(shù)
   let refreshParam = data.refreshParam;
   ...
   // 如果連接中帶有需要處理onShow邏輯的參數(shù)（通過(guò)url的hash和h6交互，而不是刷頁(yè)面）
   if (this.pageShowCount > 1 && this.mQuery.__isonshowpro === '1') {
    let [whole, mainUrl, queryStr, hashStr, hashQueryStr] = urlReg.exec(this.url);
    // 在url的hash中加入新的參數(shù)
    hashStr = (hashStr || '#').substring(1);
    if (refreshParam) {
     delete refreshParam.refresh;
    }
    const messageData = this.getNavigateMessageData();
    // 將需要更新的參數(shù)傳給頁(yè)面hash
    hashStr = util.addQuery(hashStr, Object.assign({
     // onshow標(biāo)志位
     __isonshow: 1,
     // wa主動(dòng)觸發(fā)hashchange標(biāo)志位
     // 其實(shí)目前通過(guò)__isonshow就可以判斷是wa主動(dòng)觸發(fā)hashchange
     // 設(shè)置該字段是為了明確功能，且以后擴(kuò)展用
     __wachangehash: 1,
     // 時(shí)間戳刷新
     __hashtimestamp: Date.now()
    }, messageData, refreshParam));
    this.url = mainUrl + queryStr + '#' + hashStr;
    console.log('【webview-hashchange-url】', this.url);
    // 這里要加個(gè)延遲，否則在webview返回到webview時(shí)，無(wú)法觸發(fā)hashchange，應(yīng)該是小程序bug
    setTimeout(()=> {
     this.$apply();
    }, 50);
   // 通過(guò)修改query參數(shù)，刷新webview
   } else {
    ...
   }
   ...
  }
 }
 
 /**
  * 獲取需要發(fā)送的消息數(shù)據(jù)
  */
 getNavigateMessageData(){
  let rst = {};
  for(let i in messageData){
   /* message結(jié)構(gòu):
    message: {
     key: 'xx',    // 消息名稱
     content: 'xx',  // 消息內(nèi)容
     trigger: {    // 觸發(fā)條件
      type: '',    // 觸發(fā)類型 
                - immediately 在下一次onshow或者打開(kāi)頁(yè)面中立刻觸發(fā)，
                - url 在找到指定h6鏈接時(shí)觸發(fā)
      content: ''   // 條件內(nèi)容
                - type=immediately 時(shí)為空
                - type=url 時(shí)候?yàn)閔6鏈接地址
     }
    }
   */
   const message = messageData[i];
   const trigger = message.trigger || {};
   // 立刻發(fā)送、路徑觸發(fā)
   if(trigger.type === 'immediately' || trigger.type === 'url' && this.url.indexOf(trigger.content) > -1){
    // 將key和content集合到一個(gè)對(duì)象中，便于hash直接設(shè)置
    rst[message.key] = message.content;
    // 消息通知后，從緩存中刪除
    delete messageData[message.key];
   }
  }
  console.log('【webview-get-message】', rst);
  console.log('【webview-message-cache】', messageData);
  return rst;
 }
 
 /**
  * 存儲(chǔ)消息數(shù)據(jù)
  */
 storeNavigateMessageData(message){
  if(message && message.key){
   console.log('【webview-store-message】', message)
   // 通過(guò)key設(shè)置每一條消息名稱
   messageData[message.key] = message;
   console.log('【webview-message-cache】', messageData);
  }
 }
 
 methods = {
  // 接收發(fā)送過(guò)來(lái)的消息
  onPostMessage(e){
   if(!e.detail.data)return;
   const detailData = e.detail.data;
   // 獲取消息數(shù)據(jù)
   let messageData = getValueFromMixedArray(detailData, 'messageData', true);
   if (messageData) {
    // 存儲(chǔ)
    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'
// 類型選擇點(diǎn)擊
typeChooseClick (param, type) {
 ...
 if (isZZWA()) {
  // 需要返回的數(shù)據(jù)
  const data = {
   key: 'selecteCateInfo',
   content: JSON.stringify({...})
  }
  // 通過(guò)postMessage發(fā)送給小程序，-1表示返回上一頁(yè)面
  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){
   // 更新標(biāo)志位
   WASDK.hashInfo.isInit = true;
   // 綁定hashchange
   window.addEventListener('hashchange', ()=>{
    // 如果小程序webview修改的hash，才進(jìn)行處理
    if (util.getHash(window.location.href, '__wachangehash') === '1') {
     // 這塊有個(gè)坑：
     // ios小程序webview在修改完url的hash之后，頁(yè)面hashchange和更新都可以正常觸發(fā)
     // 但是：h6調(diào)用部分小程序能力會(huì)失敗(如：ios在設(shè)置完hash后，調(diào)用wx.uploadImg會(huì)失敗，需要重新設(shè)置wx.config)
     // 因?yàn)閕os小程序的邏輯是，url只要發(fā)生變化，wx.config中的appId就找不到了
     // 所以需要重新進(jìn)行wx.config配置
     // 這一步是獲取之前設(shè)置wx.config的參數(shù)（需要從服務(wù)端拿，因?yàn)橹耙呀?jīng)獲取過(guò)了，這里從緩存直接?。?     const jsticket = window.native && window.native.adapter && window.native.adapter.jsticket || null;
     const ua = navigator.userAgent;
     // 非安卓系統(tǒng)要重新設(shè)置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']
      })
     }
     // 觸發(fā)緩存數(shù)組的回調(diào)
     WASDK.hashInfo.callbackArr.forEach(callback=>{
      callback();
     })
     // 執(zhí)行返回操作（這一步是重點(diǎn)！?。?     // 因?yàn)閣ebview設(shè)置完hash參數(shù)后，會(huì)使webview歷史棧+1
     // 而實(shí)際并不需要這次多余的歷史記錄，所以需要執(zhí)行返回操作把它去掉
     // 即便是返回操作，也僅僅是hash層面的變更，所以不會(huì)觸發(fā)頁(yè)面刷新
     // 用setTimeout表示在下一次事件循環(huán)進(jìn)行返回操作。如果后面有對(duì)dom操作可以在當(dāng)前次事件循環(huán)完成
     setTimeout(()=>{
      window.history.go(-1);
     }, 0);
    }
   }, false)
  }
 }

 /**
  * hash相關(guān)信息
  */
 static hashInfo = {
  // 是否已經(jīng)初始化
  isInit: false,
  // hash回調(diào)香瓜數(shù)組
  callbackArr: []
 }
 
 /**
  * 頁(yè)面再次展示時(shí)鉤子方法
  * @param {Function} callback - 必填, callback回調(diào)方法, 回傳參數(shù)為hash部分問(wèn)號(hào)后面的參數(shù)解析對(duì)象
  */
 @execLog
 onShow(callback){
  if (typeof callback === 'function') {
   // 對(duì)回調(diào)方法進(jìn)行onshow邏輯包裝，并推入緩存數(shù)組
   WASDK.hashInfo.callbackArr.push(function(){
    // 檢查是否是指定參數(shù)發(fā)生變化
    if(util.getHash(window.location.href, '__isonshow') === '1'){
     // 觸發(fā)onShow回調(diào)
     callback();
    }
   })
  } else {
   util.console.error(`參數(shù)錯(cuò)誤，調(diào)用onShow請(qǐng)傳入正確callback回調(diào)`);
  }
 }
 
 /**
  * 業(yè)務(wù)處理完成并發(fā)送消息
  * @param {Object}      obj - 必填項(xiàng)，消息對(duì)象
  * @param {String}      obj.key - 必填項(xiàng)，消息名稱
  * @param {String}      obj.content - 可選項(xiàng)，消息內(nèi)容，默認(rèn)空串，如果是內(nèi)容對(duì)象，請(qǐng)轉(zhuǎn)換成字符串
  * @param {String|Number}  condition - 可選項(xiàng)，默認(rèn)僅進(jìn)行postMessage
  *               String - 可以傳指定url的路徑，當(dāng)小程序webview打開(kāi)指定的url或者onshow時(shí)，會(huì)觸發(fā)該消息
  *                    也可傳小程序path，這個(gè)為以后預(yù)留
  *               Number - 返回到指定的測(cè)試，類似history.go(-1)，如： -1，-2
  */
 @execLog
 serviceDone(obj, condition){
  if(obj && obj.key){
   // 消息體
   const message = {
    // 消息名稱
    key: obj.key,
    // 消息體
    content: obj.content || '',
    // 觸發(fā)條件
    trigger: {
     // 類型 'immediately'在下一次onshow中立刻觸發(fā)， 'url'，在找到指定h6鏈接時(shí)觸發(fā)，'path'在打開(kāi)指定小程序路徑時(shí)觸發(fā)
     type: 'immediately',
     // 條件內(nèi)容，immediately是為空，url是為h6鏈接地址，path是為小程序路徑
     content: ''
    }
   };
   // 解析觸發(fā)條件
   condition = condition || 0;
   // 如果是路徑
   if(typeof condition === 'string' && (condition.indexOf('http') > -1 || condition.indexOf('pages/') > -1)){
    // 設(shè)置消息觸發(fā)條件
    message.trigger = {
     type: condition.indexOf('http') > -1 ? 'url' : 'path',
     content: condition
    }
   }
   // 發(fā)送消息
   wx.miniProgram.postMessage({
    data: {
     messageData: message
    }
   });
   // 如果不是url或者path觸發(fā)，則對(duì)conditon是否需要返回進(jìn)行判斷
   if(message.trigger.type === 'immediately'){
    // 查看是否需要返回指定的層級(jí)，兼容傳入'-1'字符串這種類型的場(chǎng)景
    try{
     condition = parseInt(condition, 10);
    }catch(e){}
    // 保證返回級(jí)數(shù)的正確性
    if(condition && typeof condition === 'number' && !isNaN(condition)){
     this.handler.navigateBack({delta: Math.abs(condition)});
    }
   }
  }else{
   util.console.error(`參數(shù)錯(cuò)誤，調(diào)用serviceDone方法，傳入的對(duì)象中不包含key值`);
  }
 }
 
 ...
}

window.native = new Native();

export default native;