Uniapp实现与外部HTML页⾯通信                                Uniapp  实现与外部 HTML 页⾯通信
在 uniapp 中 经常会 内嵌 html, 并且 有时候会还有  相互通信 的需求 ：
这⾥ 总结了 两种形式
1. APP  中  nvue 使⽤ web-view  实现html 通信；
2. H5    中  vue  使⽤ iframe      实现html 通信；
这⾥结合了两种；
从 HTML 调⽤ uniapp 接⼝
<script type="text/javascript" src="js.cdn.aliyun.dcloud/dev/uni-app/uni.webview.1.5.2.js"></script> <script type="text/javascript">
//js SDK  加载成功
document.addEventListener('UniAppJSBridgeReady', function() {
// 监听按钮事件
let data_shiming = {
action: '1'
}
// .nvue 可以接收的事件
uni.postMessage({
data: data_shiming
});
// .vue 可以接收的事件
window.parent.postMessage(data_shiming, '*')
});
})
//接收来⾃ .vue  的数据和参数间接调⽤函数
window.addEventListener('message', function(event) {
// igin --发送者的源
// event.source --发送者的window对象
网页app// event.data --数据
if (event.data) {
//此处执⾏事件
if (event.data.action == 66) {
console.log("event.data.time:", event.data.time)
setBirDayInit(event.data.time)
setBirDay(true)
}
}
})
// .nvue 直接调⽤函数
function setBirDay(data) {
}
// .nvue 直接调⽤函数
function setBirDayInit(day) {
}
</script>
从 uniapp 调⽤ html  ⽹页；
这⾥要分为两种情况；
⼀种是从  .nvue  调⽤ html
<web-view class="web-view" :src="url" ref="webview" @onPostMessage="handlePostMessage" @receivedtitle="onReceivedTitle">  </web-view>
</view>
</template>
<script>
export default {
methods: {
handlePostMessage: function(data) {
// 获取⽹页的参数
console.log("得到参数", data.detail);
},
onPageFinish: function(e) {
this.$refs.webview.evalJs("⽅法名('" + 参数 + "')");
this.$refs.webview.evalJs("⽅法名('参数')");
},
}
}
</script>
<style  scoped>
.web-view {
flex: 1;
flex-direction: column;
background-color: #f5f5f5;
}
.sendMessage {
width: 750rpx;
position: fixed;
bottom: 0rpx;
}
</style>
⼀种是从  .vue  调⽤ html
<iframe id="iframe" class="viewiframe" :src="url" ref="iframe" @onload="onLoad"></iframe> </view>
</template>
<script>
export default {
mounted() {
// 接受⼦页⾯发来的信息
window.addEventListener("message", this.ReceiveMessage);
//console.log("------>",this.url)
},
methods: {
onLoad() {
console.log("---------------->onLoad")
},
ReceiveMessage(event) {
if (event.data && event.data.data && event.data.data.arg) {
console.log("iframe 参数 event.data:", event.data.data.arg)
}
},
SendMessage() {
let str = toolTimer.formatTime(new Date(), "yyyy-MM-dd")
let data = {
action: 66,
time: str
}
}
}
}
</script>
<style lang="scss" scoped>
.bir-webviwe {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
.viewiframe {
width: 100%;
height: 100%;
background: #FFFFFF
}
}
</style>
⼊⼝需要是按 环境加载不同的界⾯：这⾥进⾏区分 对不同的运⾏环境 跳转不同的界⾯
/
/该功能只能真机使⽤仅限于 App  .nvue
// #ifdef APP-PLUS
uni.navigateTo({
url: '/pages/home/subnvue/noobGuide'
})
// #endif
// #ifdef H5                  .vue
uni.navigateTo({
url: '/pages/home/noobGuide'
url: '/pages/home/noobGuide'
})
/
/ #endif
对应的配置⽂件：
{
"path": "pages/home/noobGuide",
"style": { "navigationBarTitleText": "新⼿指南", "backgroundColor": "#ebebeb;", "backgroundColorBottom": "#ebebeb;", "backgroundColorTop": "#ebebeb;",
"app-plus": {
"bounce": "none",
"titleNView": {
"titleColor": "#fff",
"buttons": [{
"float": "left",
"text": "返回",
"fontSize": "17px",
"width": "auto"
}]
}
}
}
}
{
"path": "pages/home/subnvue/noobGuide", "style": {
"navigationBarTitleText": "新⼿指南",
"backgroundColor": "#ebebeb;",
"backgroundColorBottom": "#ebebeb;",
"backgroundColorTop": "#ebebeb;",
"disableScroll": true,
"app-plus": {
"bounce": "none",
"titleNView": {
"titleColor": "#fff",
"buttons": [{
"float": "left",
"text": "返回",
"fontSize": "17px",
"width": "auto"
}]
}
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。