引入uni.js 实现uni-app与H5通讯 / H5的横屏展示（uni-app通过＜web-view＞标签嵌入H5项目）

uniapp官网关于web-view通讯的方案：web-view | uni-app官网

 

实现uni-app与h5的通讯需要先下载uni.js：https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js 

 

注：以下代码是H5的代码（基于vue实现的h5），注释部分是原生的写法

<template>
  <div class="container">
    <el-button type="success" icon="el-icon-refresh" id="postMessage" @click="handlePostMessage">横屏</el-button>
    <el-button type="success" icon="el-icon-refresh" @click="landPostMessage">竖屏</el-button>
  </div>
</template>

<script>
// import uni from '../uni.js'
const uni = require('../uni')
export default {
  data(){
    return {
      bool:false
    }
  },
  mounted() {
    // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
    // let bool = this.bool;
    // document.addEventListener('UniAppJSBridgeReady', function () {
    //   console.log('addevent');
    //   uni.postMessage({
    //     data: {
    //       action: true
    //     }
    //   });
    // })

    // document.addEventListener('UniAppJSBridgeReady', function () {
    //   document.getElementById('postMessage').addEventListener('click', function () {
    //     uni.postMessage({
    //       data: {
    //         action: 'message111'
    //       }
    //     });
    //   });
    // });
    // const postMessageButton = document.getElementById('postMessage');
    // if (postMessageButton) {
    //   postMessageButton.addEventListener('click', this.handlePostMessage);
    // }
  },
  methods: {
    // 传递true
    handlePostMessage() {
      uni.postMessage({
        data: {
          action: true
        }
      });
    },
    // 传递false
    landPostMessage(){
      uni.postMessage({
        data: {
          action: false
        }
      });
    }
  }
}

</script>

以下代码是uni-app代码：

<script>

	const handleMessage = (evt:any) => {
		// console.log('接收到的消息：' + JSON.parse(JSON.stringify(evt.detail.data))[0].action);
		if(JSON.parse(JSON.stringify(evt.detail.data))[0].action){
			plus.screen.lockOrientation('landscape-primary')
		}else{
			plus.screen.lockOrientation('portrait-primary')
		}
	}
</script>

<template>
	<view class="plt-container">
		明天就放假啦！
		<web-view src="http://192.168.1.125:8080/" @message="handleMessage"/>
	</view>
</template>

以上代码经过多次实际总结验证，有问题可以评论留言。