The project requirement is to nest the H5 page in the uniapp applet project, and the H5 return applet needs to pass values to the applet for communication.
Well, Baidu’s search can indeed realize the web-view provided by uniapp ( https://uniapp.dcloud.io/component/web-view.html#web-view Experience has proved that you can check the official website before doing the function, and you can save less Take a lot of detours) to communicate with external links.
How to achieve it?
1. Create a web-view page in the uniapp applet project
project code
<!-- 外链,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. Create an html project to write H5 pages
H5 home page code
<!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>
a few key points
1. Import JS-SDK uniSDK must be imported, the order can not be wrong
2. Load a piece of code before calling the uniapp api
3. Jump pass value
The applet receives in onload(options)
In fact, the official website here recommends @message pass value, but
@message: When the webpage postsMessage to the application, it will trigger and receive the message at a specific time (back, component destruction, sharing). H5 is not supported yet (can be used directly)
When I was doing it, I used uni.naviageTo to jump to the small program. The small program does not print immediately, but prints after jumping to a page, so I used routing parameters. (In fact, turning naviageTo into redirectTo or switchTab can also get the value in web-view, which I learned later)