小程序开发小技巧 --webview

记录下webview 开发调试相关问题，包括常见的小tip，社区相关问题以及本地调试等基本操作。前一段打算写总结，写着发现没有什么干货，今天看见社区朋友提问 webview调试 难道搞个测试还需要去办理后台配置业务不成吗？是的一开始我就是配业务域名，不停的往服务器传包。。。历历在目所以还是梳理记录一下，希望能对社区小伙伴开发有帮助。

常见的 Bug & Tip

常见的小问题

1. tip：个人类型的小程序暂不支持使用。

2. tip: navigationStyle: custom 对 web-view 组件无效,也就是自定义导航栏。

3. tip: src 指向，可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

4. tip: 不希望webview缓存，配置NG或者src后面加随机数。

5. tip：保持登陆状态传递cookie、token等，简单的可以拼接URL完成。

6. tip：webview无法进行分享或者支付，常规操作是触发状态后，传递相关信息跳转回小程序进行下一步分享或者支付。

7. tip：动态改变web-view的标题，直接document.title。

8. tip：需要刷新webview，简单暴力点windows.onload。复杂点操作history。

9. tip：监听web-view返回。一般场景：分享给朋友后，朋友打开进入webview活动页，如果是直接进入的wenview需要点击返回调转至首页。

10. tip：先调用wx.miniProgram.navigateBack在调用wx.miniProgram.postMessage。

11. tip：src中带有中文字符或者特殊字符的，在 iOS 中会有打开白屏的问题，需要转码，建议加一下 encodeURIComponent。

12. tip: 玄学问题，引入了weixin-js-sdk,但是怎么也找不到，我后面用npm安装后就ok了。

13. tip：网页内 iframe 的域名也需要配置到域名白名单。

14. tip：开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。

15. tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。

16. tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。

17. tip：在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。

18. tip: web-view 官方文档

webview 本地调试

难道搞个测试还需要去办理后台配置业务不成吗？配业务确实特别麻烦，为什么我最初一直自己往服务器传，，，纯属装X。。。其实本地起个web服务器美滋滋。

快速的起个本地web服务。

下面是常用的几种方法、具体用法操作可以百度。

1. http-server

2. 编辑器或者浏览器中的插件、例如vscode 中的 live Server。等等

3. 动手写一个。。

我自己用的是http-server和live Server，用了很久了，能满足需求，就没有关注其它的方法了。

vue开发单页面。

本地开发完成后在打包、进入dist文件、启动http-server、浏览器打开ok、把链接写死在webview的src，像这样

  let url = 'http://127.0.0.1:8080';

  // let url = options.url ? options.url : wx.getStorageSync('bargainURL')

正常的话我们可以先在chrome中调试，基本完成后在进行真机调试。在chrome中可能会涉及到跨域问题，可以开启一个chrome跨域浏览器进行调试，像这样

我是mac上这样，先创建/Users/jinxm/Documents/ChromeData 目录，然后命令行跑一下下面这个命令就OK了。window自行百度就好了。

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/jinxm/Documents/ChromeData

这个跨域用的的还蛮多的，于是我配了个输入法快捷输入，像这样👇，方便了很多。

真机测试

上面基本ok后，webview 路径写死，手机上看效果。这个时候会不停的改动，然后就会发现不停的npm run build 、 cd dist 、http-server 也变得很繁琐了，那就简单的配置下cli，像这样👇，修改完点一下server就ok了。

具体cil配置也就一段话搞定，像这样 ，修改package.json.

配置有点简单，这个cli主要是做单页面使用，可以忽略。使用vue-cli的自己添加个配置文件就好了

完结

简单的问题可以私信下。有关webview相关问题欢迎大家一起讨论👏👏👏