Using H5 Hash for Data Exchange Between Mini Programs and H5 Pages

Introduction: In Mini Program pages, returning to H5 cannot carry data, and the only official interaction is postMessage which has timing constraints.

Problem: Need a way to exchange data between Mini Program and H5 to meet complex product requirements without losing Mini Program advantages.

Solution: Use the hash part of the H5 URL to signal data changes without refreshing the page. Changing the hash adds a new entry to the history stack, allowing window.history.go(-1) to return to the previous URL without reload.

Implementation details: When navigating from H5 to Mini Program, append the current H5 URL (encoded) as a query parameter to the Mini Program's webview src. When navigating back, use wx.navigateTo with the encoded H5 address.

Code example for H5 → Mini Program navigation:

wx.navigateTo({ url: 'webview路径' + `?src=${encodeURIComponent(h5地址)}` })

Code example for Mini Program → H5 navigation:

window.wx.miniProgram.navigateTo({ url: '小程序页面地址...' + `&backUrl=${encodeURIComponent(location.href)}` })

Mini Program page code handles receiving the encoded data, decoding it, storing it, and onShow appends it to the H5 URL hash, then clears the stored data.

Page({
  data:{src:'',canHtml:wx.canIUse && wx.canIUse('web-view')},
  onLoad(options){
    let src=decodeURIComponent(options.src||'').replace(/(^\s*)|(\s*$)/g,'');
    this.baseUrl=src;
    this.setData({src});
  },
  setH5Data(res){
    this.miniappData=encodeURIComponent(JSON.stringify({data:res.data,v:Date.now()}));
    this.backUrl=res.backUrl?decodeURIComponent(res.backUrl):this.baseUrl;
  },
  onShow(){
    if(this.miniappData){
      let src=this.backUrl+(this.backUrl.indexOf('?')>-1?'&':'?')+`_miniappData=${this.miniappData}`;
      this.miniappData=null;
      this.setData({src});
    }
  }
})

When returning from Mini Program to H5, the previous H5 page can retrieve the data via a watcher on the hash query parameter.

watch: {
  "$route.query._miniappData": {
    handler(val){
      if(val && this.$route.path===this.routePath){
        window.history.go(-1);
        let data=JSON.parse(decodeURIComponent(val)).data||'';
        // business logic
      }
    },
    deep:true
  }
}

Tips: Ensure the webview src changes by using a different hash each time (e.g., add a timestamp), and remember to call setH5Data before navigating back.

Conclusion: This hash‑based method enables seamless data exchange between H5 and Mini Programs without page reloads, improving iteration speed and supporting complex product flows.