uniapp 微信小程序webview 踩坑

uniapp


微信小程序的存在许多功能上的限制和约束,有些情况不得不去使用webview进行开发实现需求,比如

原生无法满足(例如某团队维护SDK 只提供了WEB端jsSDK,且不维护小程序SDK)
H5可以同时适用多端(适用范围更广)
H5可以弥补小程序部分欠缺
微信生态有部分限制(包大小,设计规范等)

由于最近做的需求小程序不支持播放带有透明通道的视频,所以转到了webview

这里总结下完整的开发流程和现有的各种解决方案


: 开发阶段需要将不校验合法域名勾选上


webview样式

当小程序嵌入webview之后,会自动铺满一整个页面,设置宽高无效,并覆盖其他组件

并且会带有原生的导航栏,这个导航栏是无法消除的,即使在小程序端和webview端设置navigationStyle: custom都无效

uniapp 微信小程序webview 踩坑_第1张图片

导航栏的标题会先加载小程序端的pages.json中对应组件的navigationBarTitleText,如果没有则读globalStyle中的值

然后标题会刷新为webview端的对应组件的navigationBarTitleText,如果没有则读globalStyle中的值

如果webview端都没有navigationBarTitleText,则只会显示小程序端的值,不会刷新

如果都没有,则显示空白,可以改变其背景颜色,仅支持十六进制颜色码



微信小程序和webview通信

  • 小程序可以通过url拼接参数的方式向webview端传参

  • webview端向小程序传参现有只能通过wx.miniProgram.postMessage进行传参,但是这个api非常有局限性
    只有在特定时机(小程序后退、组件销毁、分享)触发组件的 message 事件,所以基本没用

  • 只能通过webSocket进行长连接发送接收消息,但是会增加服务器压力

小程序向web-view传参非常轻松,反过来则非常折磨

web-view 网页与小程序之间不支持除 JSSDK 提供的api之外的通信

如果调用JSSDK的api并不能解决问题,并且不想使用websocket,最好使用小程序单一实现

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



JSSDK

想要在webview端调用小程序的接口,都需要jssdk 官方文档

绑定域名

如果想要在webview中使用jssdk,那么需要设置JS接口安全域名

由于我们使用的是webview(视为公众号),并不是小程序(小程序只是一个承载webview的壳子)

因此是在公众号设置的功能设置中填写JS接口安全域名,webview所在的域名设置进去后才允许鉴权

注意: 设置JS接口安全域名需要公网ICP备案了的服务器,也就是说本地的环境没办法使用,必须在线的服务器环境

uniapp 微信小程序webview 踩坑_第2张图片
如果webview部署所在的路径为www.abc.xx/page,那么设置域名也应该为www.abc.xx/page(没有测试过,最好直接www.abc.xx能直接访问webview为佳)

业务域名js接口安全域名网页授权域名可以一起设置为相同的,都为webview部署所在的域名即可

设置的时候需要保存一个配置文件到对应的目录,下载下来放进去即可,如果设置失败大概率是设置了代理跳转了没有读到文件

nginx的设置参考 nginx配置


引入JS文件

然后就是在webview中引入jssdk的js文件

然而如果通过

你可能感兴趣的:(else,uni-app,webview,微信小程序)