项目需求是在uniapp小程序项目中嵌套H5页面，H5返回小程序需要传值给小程序进行通信。
好,百度一查确实可以实现 用的uniapp提供的web-view（https://uniapp.dcloud.io/component/web-view.html#web-view经验证实，做功能之前先看官网， 能少走很多弯路 ）就可以与外部链接通信。
那如何实现呢？
1.在uniapp小程序项目创建web-view页面
项目代码
<!-- 外链,webview -->
<template>
<view><web-view :src="webviewPath" @message="message"></web-view></view>
</template>
<script>
export default {
data() {
return {
webviewPath: '',
hackReset:false
};
},
mounted(){
},
onLoad() {
// console.log("来到自定义页面")
console.log(this.$Route.query.webviewPath,"地址")
this.webviewPath = this.$Route.query.webviewPath;
},
methods:{
message(event) {
console.log('接收从小程序传过来的id',event.detail.data)
}
}
};
</script>
<style></style>
2.创建一个html项目写H5页面
H5首页代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<!-- <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.flex-div{
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<body>
<div id="app" class="good-wrap" style="max-width: 100%;">
<div class="top-img" style="width: 100%;">
<img src="img/top.png" style="width: 100%;" >
</div>
<!-- 限量优惠 -->
<img src="img/img1.png" style="width: 100%;">
<!-- 优惠券领取 -->
<div class="mk1-1 flex-div" >
<img class="mk1img" :data-id="item.id" @click="goCoupon(item.id)" v-for="(item,index) in goodsdata.xlyh" :src="item.imgUrl" style="width: 100%;">
</div>
<div class="mk1-2 flex-div" >
<img class="mk1img" :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.xlyh" :src="item.imgUrl" style="width: 100%;">
</div>
<!-- 年份茅台 -->
<img src="img/img5.png" style="width: 100%;">
<div class="mk2 flex-div">
<img :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.nfmt" :src="item.imgUrl" style="width: 50%;">
</div>
<!-- 颜色茅台 -->
<img src="img/img12.png" style="width: 100%;">
<div class="mk3 flex-div">
<img :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.ysmt" :src="item.imgUrl" style="width: 50%;">
</div>
<!-- 整箱囤购 -->
<img src="img/img18.png" style="width: 100%;">
<div class="mk4-1 flex-div">
<img :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.zxtg1" :src="item.imgUrl" style="width: 100%;">
</div>
<div class="mk4-2 flex-div">
<img :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.zxtg2" :src="item.imgUrl" style="width: 50%;">
</div>
<!-- 精品陈亮 -->
<img src="img/img26.png" style="width: 100%;">
<div class="mk5-1 flex-div">
<img :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.jpcl1" :src="item.imgUrl" style="width: 50%;">
</div>
<div class="mk5-2 flex-div">
<img :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.jpcl2" :src="item.imgUrl" style="width: 100%;">
</div>
<div class="mk5-3 flex-div">
<img :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.jpcl3" :src="item.imgUrl" style="width: 50%;">
</div>
<!-- 更多推荐 -->
<img src="img/img36.png" style="width: 100%;">
<div class="mk6-1 flex-div">
<img :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.gdtj1" :src="item.imgUrl" style="width: 50%;">
</div>
<div class="mk6-2 flex-div">
<img :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.gdtj2" :src="item.imgUrl" style="width: 100%;">
</div>
<div class="mk6-3 flex-div">
<img :data-id="item.id" @click="goX(item.id)" v-for="(item,index) in goodsdata.gdtj3" :src="item.imgUrl" style="width: 50%;">
</div>
<img src="img/img48.png" style="width: 100%;">
</div>
<!-- 微信 JS-SDK -->
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript" src="data1.json"></script>
<script type="text/javascript">
console.log(goodsdata,"shuju")
var app = new Vue({
el: '#app',
data: {
// wxdata: "abc",
goodsdata:[]
},
mounted() {
console.log("goodsdata",goodsdata)
this.goodsdata=goodsdata;
this.$nextTick(() => {
document.addEventListener('UniAppJSBridgeReady', function() {
uni.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
});
})
},
created() {
// this.wxdata = this.getQueryString('wxdata') || 'abc'
// console.log(this.wxdata)
},
methods: {
// 跳转商品详情页面
goX(id) {
console.log(id,"传给小程序的id")
uni.navigateTo({
url: '/pages/goods/detail?id='+id
});
},
// 跳转领取优惠卷页面
goCoupon(id){
uni.navigateTo({
url: '/pages/app/coupon/detail?id='+id
});
}
/* 接收小程序传参的方法 */
getQueryString: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
}
})
</script>
</body>
</html>
几个关键点
1.引入JS-SDK uniSDK 必须引入，顺序不能错
2.调用uniapp api之前 先加载一段代码
3.跳转传值
小程序在onload(options)里接收
这里其实官网推荐@message传值 但是
@message: 网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。 H5 暂不支持（可以直接使用）
我做的时候用的uni.naviageTo跳转会小程序 小程序端并不会立即打印 而是在跳转一个页面才打印，所以我才用了路由传参 。（其实把naviageTo变成redirectTo或者switchTab 也可以在web-view拿到传值，这也是后来才知晓的 ）
