Uni-app中web-view与h5页面跳转传参

前言：由于要做一个3d模型定制页面，threejs页面只支持h5，所以出现题中的要求。先后试了websocket通信，后舍弃改用uni.webview传参

• 上一下websocket的代码，做个记录（uniapp通过web-view引入h5页面，在引入时创建并接收数据，在h5页面发送数据）

// 建立websocket,实现webview和h5及时通信;页面关闭时,关闭socket
initSocket(){
    // 创建
    const wsUrl = HostBase.replace('http','ws') + 'webSocket/receive/' + state.token
    uni.connectSocket({
      url: wsUrl
    })
    // 建立连接的回调
    uni.onSocketOpen(res=>{
      // 每9秒发送一次ping,避免socket断开
      this.pingTimer =  setInterval(()=>{
        uni.sendSocketMessage({"data": 'ping'});
      },9000)
    })
    // 失败的回调
    uni.onSocketError(e=> {
        // this.$toast('websocket打开失败:'+JSON.stringify(e));
        this.pingTimer && clearInterval(this.pingTimer);
        uni.showModal({
            title: '提示',
            content: 'websocket打开失败'+JSON.stringify(e),
            cancelText:'返回',
            confirmText:'重试',
            success:res=> {
                if (res.confirm) {
                    this.initSocket()
                } else if (res.cancel) {
                    uni.navigateBack()
                }
            }
        })
    })
    // 收到消息的回调（页面跳转）
    uni.onSocketMessage(res=>{
      console.log('收到消息 === ' , res.data);  
        // TODO
     
    })
    console.log('wsUrl == ' + wsUrl);
}

...
...
...
onUnload() {
    // 页面关闭时,关闭socket
    uni.closeSocket();
    this.pingTimer && clearInterval(this.pingTimer);
}

在h5端的代码

// 发送websocket数据
sendSocketMsg(msg){
    if(!msg) return;
    // 打开websocket
    APP.loading();//打开进度条
    var wsUrl = APP.HostBase.replace('http','ws') + 'webSocket/send/' + APP.getToken()
    var ws = new WebSocket(wsUrl); // TODO
    ws.onopen = function(){
        ws.send(JSON.stringify({"token":APP.getToken(), "data": msg}));
        setTimeout(function(){ // 延时300ms关闭socket,确保消息已发出
            APP.closeLayer()//关闭进度条
            ws.close()
        },300)
    }
    ws.onerror = function(e){
        APP.toast('提交失败:'+JSON.stringify(e))
        APP.closeLayer()
    }
    console.log('wsUrl == ' + wsUrl);
}

• 修改后，uniapp判断环境，非h5的环境使用web-view加载h5页面（模型页），h5环境直接跳转h5页面（模型页）。做条件编译时因为我发现在h5环境中，页面无法跳出web-view（在chrome中正常，但是在微商城中出不来），上代码
  uni端

h5页面

//需要的js
  


...

mounted() {
    this.$nextTick(() => {
      // 初始化uni.webview
      document.addEventListener("UniAppJSBridgeReady", function() {
        console.log("初始化uniapp的API成功");
      });
    });
},
methods:{
    //提交
    toBuy(){
        uni.navigateTo({
            url: ...
        }); 
        window.location.href = ...
    }
}
....

好啦，撒花花～～