微信小程序Webview最佳实践。

缘由

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

开始

那些什么官方配置的什么,就不在这里说了。 跟着文档走,细心的慢慢配置的就好。思考一下,其实跳webview 全是一个页面只不过是不同的参数拼接成不同的url。在这个前提下呢,就可以开始封装方法辣~

实现

先直接上代码了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/**
* 方法名:
* 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,
})
}
}

/**
* 方法名:跳转到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);
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
因为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));
}
}
}

结语

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

本文标题:微信小程序Webview最佳实践。

文章作者:Jonathon

发布时间:2018年08月20日 - 20:08

最后更新:2018年08月20日 - 20:08

原始链接:https://www.jonathon.cn/webview.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

苟富贵,勿相忘!