uniapp 微信小程序webview 踩坑

uniapp

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

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

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

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

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

webview样式

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

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

导航栏的标题会先加载小程序端的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备案了的服务器，也就是说本地的环境没办法使用，必须在线的服务器环境

如果webview部署所在的路径为www.abc.xx/page，那么设置域名也应该为www.abc.xx/page

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

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

nginx的设置参考 nginx配置

引入JS文件

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

然而如果通过