プロジェクトの要件は、uniapp アプレット プロジェクトに H5 ページをネストすることであり、H5 リターン アプレットは、通信のためにアプレットに値を渡す必要があります。
まあ、Baidu の検索は実際に uniapp によって提供される Web ビューを実現できます ( https://uniapp.dcloud.io/component/web-view.html#web-view経験により、関数を実行する前に公式 Web サイトを確認できることが証明されています)。 . 外部リンクと通信するには、多くの迂回路を使用します。
それを達成する方法は？
1. uniapp アプレット プロジェクトで Web ビュー ページを作成します。
プロジェクトコード
<!-- 外链,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. H5 ページを作成するための html プロジェクトを作成する
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: Web ページがアプリケーションに Message をポストすると、特定の時間 (戻る、コンポーネントの破棄、共有) にメッセージをトリガーして受信します。H5はまだサポートされていません（直接使用できます）
その際、uni.naviageTo を使って小さなプログラムにジャンプしたのですが、小さなプログラムはすぐには印刷されず、ページにジャンプしてから印刷されるので、ルーティングパラメータを使用しました。(実際、naviageTo を redirectTo または switchTab に変更すると、後で学んだ web-view の値も取得できます)