微信小程序Webview最佳实践

我的博客

这个代码的排版，太影响阅读了推荐大家去我的博客里面去看。

缘由

因为公司项目是链接银行业务的这种需求，所以存在一些监管方面的问题，然后就有了小程序里面嵌套h5的这种解决方式。

开始

那些什么官方配置的什么，就不在这里说了。 跟着文档走，细心的慢慢配置的就好。

思考一下，其实跳webview 全是一个页面只不过是不同的参数拼接成不同的url。在这个前提下呢，就可以开始封装方法辣～

实现

/** * 方法名：跳转到H5 * 参数： *    servid : 服务Id 跳转到H5对应的url *    flag: 是否选择银行卡 (默认是) *    param：跳转到H5携带的参数  *    finger: 是否验证手势密码 *    redirectTp 跳转类型: (默认0 nato 1 redirectto) */function toH5(servid, flag = true, param = {}, finger = true, redirectTp = 0) {    console.log(param)    if (isNull(param))        param = {};    let h5url = getRouteH5(servid);    let userInfo = getDataBase("userInfo");    param.custInfo = getDataBase("custInfo");    param.userInfo = {        nickName: userInfo.nickName,        avatarUrl: userInfo.avatarUrl,        model: getDataBase("deviceInfo").model    };    param.header = app.globalData.header;    if (!app.globalData.first2H5) {        param.first2H5 = "1";    }    webView(h5url.url, param, redirectTp, finger);}

/** *  方法名： *    webView: 跳转到H5界面 *  参数： *    path:  访问界面的路径 *    param: 页面附带参数 *    type: 0 默认 2 外部地址 1 redirectTo跳转 *    finger  是否验证指纹 *  返回： */function webView(path, param, type = 0, finger = true) {    let defu = app.config.h5url;    let url = defu + "/" + path;    if (type === 2)        url = path;    let to = '/pages/common/webview/webview?url=' + encodeURIComponent(url);    if (!isNull(param)) {        param = param;        to = to + "&param=" + encodeURIComponent(JSON.stringify(param));    }    if (type === 0 || type === 2) {        wx.navigateTo({            url: to,        })    } else if (type === 1) {        wx.redirectTo({            url: to,        })    }}
复制代码

在这里定义了两个方法，一些url上面不明文传输之类的处理。 

小程序里面的代码结束了，然后我们在H5里面开始接受从小程序传过的来参数。

因为h5是用vue来实现的，所以我们要在router beforeEach 里面进行判断。
 
  if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {    // 说明是从小程序webview过来的    if (from.name === null && !Util.isNull(to.query.param)) {      console.log(to.query.param)      let param = JSON.parse(to.query.param);      to.query.param = param;      if (parseInt(param.first2H5) === 1 || Util.isNull(window.localStorage.getItem("loginCustInfo"))) {        window.localStorage.setItem("header", JSON.stringify(param.header)); // 设备指纹        window.localStorage.setItem("loginCustInfo", JSON.stringify(param.custInfo));        window.localStorage.setItem("loginNickInfo", JSON.stringify(param.userInfo));      }    }  }
复制代码

结语

加班加了好久，最近也没怎么写，表达的不好，请大家多多原谅。