uniapp通过webview引入H5页面,H5页面交互配置

189 阅读1分钟

web端 index.html 引入

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

uni.postMessage(OBJECT)
网页向应用发送消息,在 <web-view> 的 @message @onPostMessage 事件回调 event.detail.data 中接收消息。

当首屏页面初始化用到plus时,需要添加
   onPlusReady (callback, context = this) {
            if (window.plus) {
                callback.call(context);
            } else {
                document.addEventListener('plusready', callback.bind(context));
            }
        }

<web-view> 的 @message @onPostMessage 事件 
 uni.navigateBack();
        uni.postMessage({
          data: {
            action: "postMessage"
          }
        });
可以充分利用该特性,当本地无法渲染时,可以使用纯html来渲染组件。

注意:如入口页面不是主页面,而是子页面则必须在在主页面中添加 
 onPlusReady(() => {
 	...   
    plus.key.addEventListener("backbutton", function() {
        uni.navigateBack();
      });
})
或者跳转页面用replace跳转