uni-app开发微信小程序 web-view通讯

最近开发了一个微信小程序嵌套vue页面

vue页面 有时候会使用到微信小程序的api 但是有的api他h5是不支持的

 官方文档中提供的两种方法

@message 内嵌的h5页面不支持 Window的postMessage 在h5端使用没啥问题，这该死的uni-app页面不管怎么弄都会报那个window的错  还是我太菜了。。。。

 就算是h5端调用uni的postMessage，这东西在h5不支持！不支持！！！！

 既然他可以调用uni-app的webview的一些方法，我们就利用这个来投机取巧。

在页面入口文件 引入线上地址

我这里就直接使用引用微信的api方法 因为开发的是微信小程序

直接在pulic的index.html文件引入地址

<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

我这里是使用的copy下来的线下地址

在任何打印console.log(wx)都会出现下面内容 我们就使用下面红线圈的方法

会看到有wx.miniProgram.postMessage这个方法，

虽然wx.miniProgram.postMessage会在微信开发工具控制台显示传递的数据

但是我是怎么找我的@message的触动事件中打印东西死活没有，说是需要在uni-app页面特定分

享或者回退才有，啊这也太麻烦了，

 于是，就想了一个歪风邪道的方法，谨慎使用

可以使用路由跳转携带一些参数，然后调用uni的api

就比如我在h5的页面有一个按钮需要跳转其他小程序

查询了一下uni的api uni.navigateToMiniProgram(OBJECT)

这个uni.navigateToMiniProgram(OBJECT) 的方法h5端就不支持

获取scheme码也只能在h5端打开，不能在web-view嵌套页面过后 通过这个地址再打开其他的小程序

所以歪门邪道方法如下 这只是一个测试页面

 代码如下

<template>
  <div class="ceshi-index">
    <van-button type="primary" block @click="goEle">打开饿了么</van-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 是否处在微信环境中
      isWeiXin: false
    };
  },
  mounted() {
    console.log(wx);

    let ua = window.navigator.userAgent.toLowerCase();

    this.isWeiXin = ua.match(/MicroMessenger/i) == "micromessenger";
  },
  methods: {
    goEle() {
      if (!this.isWeiXin) return console.log("当前环境不支持");
      wx.miniProgram.getEnv(res => {
        if (res.miniprogram) {
          wx.miniProgram.navigateTo({
            url: "/pages/ceshi/index?event=去往饿了么"
          });
        } else {
          //在微信里
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.ceshi-index {
  width: 100%;
  height: 100%;
  justify-content: center;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}
</style>

uni-app项目中搞个中间页面 作为中转站

为什么这么搞，因为调用uni的api中对象基本都有complete函数

就是接口调用结束的回调函数（调用成功、失败都会执行）就是直接使用这个回调 回退到我们的

操作页面，咱们就投机取巧，调用一些api方法过后调用complete回调函数 直接回退页面，返回至

我们的操作页面

uni.navigateBack({
       delta: number
 })

这就是我想的歪风邪道方法，钻空子。

uni-app建立中间页面操作 

<template>
	<view class="">
		<!-- 我是中间网页 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad(option) {
			this.loadEvent(option);
		},
		methods: {
            //处理多个页面传来事件处理
			loadEvent(option) {
				option = option || {};
				let h5Event = option.event || "";
				switch (h5Event) {
					case "去往饿了么":
                        this.goEle()
						break;
				}
			},
			goEle(){
                //至于为什么不直接调用uni.navigateToMiniProgram(OBJECT)

                //这玩意他必须要页面上有点击按钮才能调用此方法
				uni.showModal({
					title: '温馨提示',
					content: '即将离开某某小程序',
					showCancel: true, //是否显示取消按钮
					cancelText: "取消", //默认是“取消”
					cancelColor: '#000000', //取消文字的颜色
					confirmText: "确定", //默认是“确定”
					confirmColor: '#3cc51f', //确定文字的颜色
					success: function(res) {
						if (res.cancel) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							uni.navigateToMiniProgram({
								// appid  写你要跳转的小程序的 appid
								appId: '',
								// appId: 'wx83ead482e5f13976',
								// 路径写  src下的路径,假如你跳转的是pages下的页面,就可以写pages/index
								path: '',
				
								extraData: {
									'type': 'out'
								},
								envVersion: 'release', //跳转的版本：develop（开发版），trial（体验版），release（正式版）
								success(res) {
									// 打开成功
									// uni.showToast({
									// 	title: '跳转成功'
									// })
								},
								fail(err) {
									// console.log(err)
									// 打开失败/取消
									uni.showToast({
										title: '跳转不成功'
									})
								},
								//接口调用结束的回调函数（调用成功、失败都会执行）
								complete(){
									uni.navigateBack({
										delta: 2
									});
								}
							})
						}
					},
					fail: function(res) {
						uni.navigateBack({
							delta: 1
						});
					},
					//接口调用结束的回调函数（调用成功、失败都会执行）
					complete: function(res) {
						
					},
				})
				
			}
		},


	}
</script>


<style>
</style>

效果如下