最近公司有了新的需求,就是把之前用react+antd-mobile开发的H5加上支付功能且支付只能用小程序支付。
本来我想着挺简单的，直接把url嵌入到web-view中就可以了，然后再加上支付就可以了。
话不多说直接开干~~
写着写着发现了好多问题：
- 1.因为只有一个
web-view，所以如果需要分享点击分享卡进入指定页面就比较难了。
我的做法是在onLoad里通过options的参数来判断,如果url没有参数就给web-view的src赋值首页，如果有的话就赋值该链接(该链接就是分享出去的详情页)，但是这里还有一个问题，这样分享出去的详情页是无法返回首页的，这就需要在src里再拼接一个参数来区分是分享出去的还是通过列表进来的，再去你H5的代码的生命周期里判断展示返回按钮还是home首页按钮
注：在onShareAppMessage回调中可以拿到web-view中url - 2.自定义navbar的话,
web-view也是无法实现的 (官方回答：navigationStyle: custom对 web-view 组件无效) - 3.小程序内的下拉橡皮筋效果，如果你有一个
position:fixed;的东西就很难受了。
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android
然后需要去找到你需要滚动的DOM解除阻止下拉滑动
document.body.removeEventListener('touchmove', function (e) {
e.preventDefault();
}, {passive: false});
- 4.如果你的url的参数中含有一些字符(暂时我还没确定是哪个字符)，提示：含有无法正确解析的连接格式需转码。
encodeURIComponent(`${你的参数}`)
