最近开发了一个微信小程序嵌套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>效果如下文章来源：https://www.toymoban.com/news/detail-827538.html
文章来源地址https://www.toymoban.com/news/detail-827538.html
到了这里，关于uni-app开发微信小程序 web-view通讯的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
