uniapp与h5互相通信之web-view

最新推荐文章于 2024-08-28 04:05:44 发布

isTrue.

最新推荐文章于 2024-08-28 04:05:44 发布

阅读量3.5k

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_48192398/article/details/123629493

版权

h5向uniapp传值

h5中定义按钮，如：

<div class="btn-list">
    <button class="btn" type="button" data-action="navigateTo">
        navigateTo
	</button>
	<button class="btn" type="button" data-action="redirectTo">
        redirectTo
	</button>
	<button class="btn" type="button" data-action="navigateBack">
        navigateBack
	</button>
	<button class="btn" type="button" data-action="reLaunch">
        reLaunch
	</button>
	<button class="btn btn-red" type="button" data-action="switchTab">
        switchTab
	</button>
	<button class="btn btn-yellow" type="button" data-action="postMessage">
        postMessage
	</button>
	<button class="btn btn-yellow" type="button" data-action="getEnv">
        getEnv
	</button>
</div>

然后引入uniapp的SDK

<script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/master/dist/uni.webview.1.5.2.js"></script>

在script中获取按钮进行数据传递

 <script type="text/javascript">
 	document.addEventListener('UniAppJSBridgeReady', function() {
H5中获取点击事件
	document.querySelector('.btn-list').addEventListener('click', 						function(evt) {
          var target = evt.target;
          if (target.tagName === 'BUTTON') {
            var action = target.getAttribute('data-action');
            switch (action) {
              case 'switchTab':
                // 触发uniapp跳转功能
                uni.navigateTo({
                	url:'/pages/message/addressList/index?isType=' + 'radio'
                })
                break;
              case 'navigateBack':
                // uniapp 返回上一页功能
                uni.navigateBack({
                  delta: 1
                });
                break;
              case 'postMessage':
                // 可h5向uniapp传递数据，在uniapp中利用@message中的方法接收
                uni.postMessage({
                  data: {
                    action: 'postMessage'
                  }
                });
                break;
              case 'getEnv':
                // 获取uniapp 当前运行环境  Boolean值
                //  plus->App
                //  miniprogram->微信小程序
                //  smartprogram->百度小程序
                //  miniprogram->支付宝小程序
                uni.getEnv(function(res) {
                  alert('当前环境：' + JSON.stringify(res));
                });
                break;
              default:
                uni[action]({
                  url: '/pages/component/button/button'
                });
                break;
                }
          	}
     	});
     });
</script>

uniapp中参数接收：

 <web-view :src="webUrl" :update-title="false" :webview-styles="webviewStyles" @message="handleMessage"></web-view>

添加@message=“handleMessage”

handleMessage(e) {
	// 传递数据在 e.detail.data
	let msgData = e.detail.data;
	// 以下可判断传来数据，并做处理
	switch(msgData[0].action){
        case "toAddress":
       	// ********
        break;
	}
},

uniapp向h5传值

uniapp中定义方法（使用此方法，可根据捕捉h5向uniapp传值；或进行url地址拦截等方式来触发sendMessageToH5的方法）

// 监听页面发送的消息
sendMessageToH5(evt) {
// h5需要的json形式如：[{"name": "Tom", "age": 18},{"name": "Jack", "age": 19}]
	let data = [{"name": "Tom", "age": 18},{"name": "Jack", "age": 19}
    var currentWebview = this.$scope.$getAppWebview();//获取当前web-view
    wv = currentWebview.children()[0];
   // params 传递的参数
    let params = JSON.stringify(data) 
   // wv.evalJS调用H5方法并传递数据
    wv.evalJS("getUniAppMessage("+params+")")  //getUniAppMessage h5中获取数据的方法
}