前言：由于要做一个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端
<template>
<view>
<!-- #ifndef H5 -->
<web-view :src="dzUrl"></web-view>
<!-- #endif -->
</view>
</template>
<script>
import {HostMall,HostBase} from '@/api/api.js'
export default {
data() {
return {
dzUrl: ''
}
},
methods:{
// 建立websocket,实现webview和h5及时通信
initSocket(){
let state = this.$store.state
if(!state.isLogin){
this.$href('/pages/user/login/login-tel',{app:{isClose:true}});
return;
}
// #ifdef H5
window.location.href = this.dzUrl
// #endif
}
},
onLoad(option) {
let state = this.$store.state;
this.dzUrl = HostMall + ...
this.initSocket();
}
}
</script>
h5页面
//需要的js
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK，必须引用。 -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
...
mounted() {
this.$nextTick(() => {
// 初始化uni.webview
document.addEventListener("UniAppJSBridgeReady", function() {
console.log("初始化uniapp的API成功");
});
});
},
methods:{
//提交
toBuy(){
uni.navigateTo({
url: ...
});
window.location.href = ...
}
}
....
好啦，撒花花～～
