H5项目嵌入微信小程序的坑

最近公司有了新的需求,就是把之前用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(`${你的参数}`)