混合模式开发之原生App webview与H5交互

快速实现 混合模式开发之原生App webview与H5交互， 详情请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12550

效果图如下：

 

代码如下：

# 原生app webview与H5交互实现

#### HTML代码部分

```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代码 （引入组件 填充数据）

```javascript

<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

```CSS

<style>

.content {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.text-area {

display: flex;

justify-content: center;

height: 44px;

margin-top: 20px;

line-height: 44px;

font-size: 28rpx;

width: 280px;

}

</style>

```