app嵌套h5,性能提升,举例:app端点击文章列表,跳转到h5的文章详情,首先h5需要app传文章id
h5前期工作
- vue-cli搭建环境,配置路由,跑起来之后
- 做相应的页面
- 对相应的页面进行处理
对应的详情页面
<template>
<div class="container">
<div class="hello" v-html="content"></div>
<div class="bottom">
<img src="../assets/images/zan.png" class="support" alt="" />
<span class="support-num">赞 {{ favourCount }}</span>
</div>
</div>
这里渲染之前要调取接口,拿到相应的文章id,这就需要获取地址栏中的地址及参数,首先进行判断,是否有相应的id
// 获取文章详情接口
getArticleDetail: function () {
let urlParams = window.location.href; //获取url中"?"符后的字串
let index = urlParams.indexOf("?");
this.urlRemain = urlParams.substring(index + 1, urlParams.length);
let urllist = this.urlRemain.split("&")[0];
let articleId = urllist.split("=")[1];
if (articleId) {
Axios.get(`${defaultUrl}/article/detail`, {
params: {
articleId: articleId,
},
}).then((result) => {
this.articleData = result.data.data;
this.content = result.data.data.content;
this.author = result.data.data.author;
this.favourCount = result.data.data.favourCount;
});
}else{
console.log("没有对应的id")
}
},
工作做完就需要把做好的页面地址给到app端
首先有相应的服务器,h5:npm run build之后部署到服务器,获取到相应的地址,把地址给到app端,app端讲相应的id拼接到地址栏上就可以了,h5已经对相应的地址进行过处理,就不需要在进行对地址判断了