评论

小程序开发小技巧--webview

记录下webview 开发调试相关问题,包括常见的小tip,社区相关问题以及本地调试等基本操作。欢迎一起讨论,互相帮助。

小程序开发小技巧 --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相关问题欢迎大家一起讨论👏👏👏

最后一次编辑于  10-21  
点赞 3
收藏
评论