快速实现前端Vue混合模式之原生App webview与H5交互， 详情请访问uni-app插件市场地址：ext.dcloud.net.cn/plugin?id=1…
效果图如下：
代码如下：
原生app webview与H5交互实现
HTML代码部分
<template>
<view class="content">
<view class="text-area" @click="appToH5()">
原生app调用H5方法(原生给H5传值)
</view>
<view class="text-area" @click="h5ToApp()">
H5调用原生App方法 （H5给原生传值）
</view>
</view>
</template>
JS代码 （引入组件 填充数据）
<script>
// #ifdef H5
import Vue from 'vue'
import Bridge from '../../components/bridge.js';
Vue.prototype.$bridge = Bridge;
// #endif
export default {
data() {
return {
title: 'Hello',
myObjData: {}
}
},
onLoad() {
this.appToH5();
},
methods: {
appToH5(){
// app向H5传值， h5获取app传值信息（如登录用户信息）
// #ifdef H5
this.$bridge.registerHandler('dataToJs', (data, responseCallback) => {
if (typeof data === 'string') {
this.myObjData = JSON.parse(data);
} else {
this.myObjData = data;
}
// 回调函数
responseCallback(data);
// oc调用js
});
// #endif
},
h5ToApp(){
// h5调用原生登录方法, 需要在原生注册实现gologin方法
this.$bridge.callHandler('goLogin', '', res => {
if(typeof (res) == 'string'){
uni.showModal({
title:'返回字符串数据',
content: JSON.stringify(res)
})
}
else{
uni.showModal({
title:'返回字典串数据',
content:JSON.stringify(res)
})
}
});
}
}
}
</script>
CSS
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text-area {
display: flex;
justify-content: center;
background-color: aquamarine;
height: 44px;
margin-top: 20px;
line-height: 44px;
font-size: 28rpx;
width: 280px;
}
</style>
原文链接：https://juejin.cn/post/7249740342751707197 作者：前端组件开发
