Uni-app使用的坑之webview

在webview中条件编译环境问题

在开发时发现webview使用uni的跳转方式只能在H5中进行跳转，此时会发现条件编译的环境会是H5，性能会下降，页面不流畅，等于整个app都是一个H5

解决方案：引入官方webview新的js Sdk最新sdk地址，引入import "@/static/map-js/uni.webview.js";

跳转时使用uni.webView即可，跳转到app端，这个方案uniapp的官方文档没有说明

webview高度问题

<web-view> 组件默认铺满全屏并且层级高于前端组件。App端想调节大小或在其上覆盖内容需使用plus规范。

这里有一个注意点：只有app可以设置webview的宽高，其他的端是无解的

解决方案：通过uni.createSelectorQuery().select获取整个节点的信息（这样就可以减去状态栏和底部如果有操作条的高度（大部分为苹果手机）），利用节点信息减去其他内容的高度，得到webview的高度，this.scope.scope.scope.getAppWebview()获取webview实例（只能app使用），再修改实例setStyle设置

webview通讯问题

webview->app: 根据官方文档，可通过@message获取webview发出的信息，但发现只会在特定时机（后退、组件销毁、分享）触发并收到消息。这样就不能实时获取，这个问题和问题一类似的方式解决：引入最新sdk地址即可

app -> webview: 这也是个坑，官方文档没有说明，可以通过evalJS执行webview中的函数，如webview为html则直接写全局方法，然后通过evalJS触发即可，vue的项目则需要绑定在window上：

调用方式：mapModule.wv为webview实例

webview和app共享数据问题

当我们开发业务时会将部分数据存在本地，如登录的token等，此时app和webview的本地是不共享的，也就是说使用uni.setStorageSync('token', res.data.token);这个token只会在一端生效，所以登录就存在问题，则会有app登录后webview又要求登录的情况

解决方案：使用plus.storage.setItem("token", res.data.token);此方案只能app端使用，plus是App 端内置 HTML5+ (opens new window)引擎，让 js 可以直接调用丰富的原生能力。plus.storage.setItem则会在webview和app中都可以获取，形成一个公共的本地存储**