微信小程序与h5页面无刷新通信

前段时间在产品等人的怂恿下，接手了公司一个使众人闻风丧胆的陈年老h5项目。打开项目细细的看，细细的品，果然惊喜不断，处处都是祖传宝藏(ps：我现在退出还来得及吗)。这让我想起了前段时间比较火的一首歌，歌名**《寻宝藏》**，歌词：

这世界总有人在忙忙碌碌寻宝藏 这世界总有人在忙忙碌碌寻宝藏 这世界总有人在忙忙碌碌寻宝藏

是的，没错！各种祖辈留下来的宝藏，琳琅满目，应有尽有。

于是开始了忙忙碌碌的寻宝藏之旅，旅途的风景十分优美，让我有感而发地想说几句优美的中国话，不知不觉废话又多了，下次注意点。

下面来讲下众多宝藏中的一个吧。场景：h5的购物车选择地址页面，跳转小程序原生，回来刷新页面数据。实现的方式有很多种，我来讲下我觉得好的一种实现方式吧。

hash带参，页面不刷新
原理：h5携带当前地址跳转小程序页面，在做出一些更新操作后，把相关参数拼接在h5地址后面，监听hash变化，触发相关更新。
实现：
小程序webview里面添加onShow钩子，便于路由返回时触发

onShow() {
    const { backUrl, backCompleteUrl } = hybridBridge;
    console.log('需要刷新的url', backCompleteUrl); // https://baidu.com#token=xxx&refresh=xxx
    if (!backUrl) return;
    this.setData({
        src: backCompleteUrl
    });
    hybridBridge.$setBridgeParams();
}

h5：我这边做了一点架构，通过window.$getPageData()可以拿到当前页面初始渲染的请求，所以可以统一封装在全局，写在当前页面的同学记得在销毁的时候移除监听事件。基本逻辑就是当hash产生变化时，解析当前url上所携带的参数，如果命中refresh字段，则重新发起页面请求，如命中token，则刷新用户信息。

/**
 * 接受小程序刷新信号
 */
export const getSyncWxState = (router: Router, app: App, store: BaseStore) => {
    // 非服务端渲染/原生环境
    if (typeof window === undefined || isNative()) return;
    // 注入微信js-sdk
    initWxEnv();
    window.addEventListener(
        'hashchange',
	() => {
	    const { hash } = window.location;
            // 分离出url上携带的信息
	    const { refresh, token, vid, channel, platform } = getUrlQuery(
	        hash.replace(/^#/, '')
	    );
	    // 存储从小程序带过来的信息
	    setCookies({ token, vid, channel, platform });
            // 无refresh则不触发刷新
	    if (!Number(refresh)) return;
            // 回退webview的历史栈
	    router.back();
            // 封装的弹窗组件
	    app.config.globalProperties.$popup.loading({
		title: '状态同步中',
		callback: () => {
		    if (token) {
		        // 更新用户信息
			store.user.userInfo.loadData();
		    }
		    return window.$getPageData();
		},
	     });
         },
         false
     );
};

这种方式不会刷新页面，也没有太大的副作用，不过也只能用于一些简单的交互使用，毕竟url带参，不能像原生webview那样，为所欲为，小程序终究只是小程序。

通篇下来没几个字，废话倒是很多，讲到这里差不多就结束了，常年失踪人士，又水了一篇博客，心里得到了些许的安慰。
demo项目
插件库
另外加一句，樊振东牛逼！！！马龙牛逼！！！孙颖莎牛逼，把小日。。。子干翻了。