想要实现效果:
(1)既不铺满我需要跳转公众号的页面
(2)又实现小程序跳转公众号文章
(3)又需要跳转的公众号文章有返回原有小程序的效果
具体实现:
1.第一步,先去“微信公众号平台”,登陆后,在 设置=》关联设置。去添加需要关联的公众号
2.百度搜索 “微信开放文档”,找到显示页面的控件web-view
(注意:个人类型的小程序不支持),web-view放在某个页面会整个平铺这个页面
3.想要不铺满效果以及跳转公众号文章、跳转的公众号文章有返回按钮:
需要添加一个跳转公众号的页面,然后在该页面中再创建一个子页面,用来存放web-view组件(因为他会平铺整个页面,所以要单独放一个页面)。存放web-view组件的页面中获取公众号文章的地址(地址:直接拿取公众号文章网页地址)。最后把地址返给父页面,这样就实现了。
跳转web-view页面得页面
url:指你存放得公众号信息得数据
存放web-view得页面
<style scoped lang="scss">
</style>
<template>
<view class="article-pages" :style="{ 'padding-bottom': vuex_isIphoneBig ? '166rpx' : '98rpx' }">
<article-detail :url="url"></article-detail>
</view>
</template>
<script>
import articleDetail from "@/walletPage/articleDetail.vue";
export default {
data() {
return {
url:''
};
},
onLoad(opts) {
console.log("opts:",opts);
this.url=opts.url;
},
methods: {
//返回上一页
gotoBack() {
this.$u.route({
type: "back",
});
},
},
components: {
articleDetail
},
}
</script>
子页面
<template>
<view class="article-details">
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
name: "articleDetail",
props: {
url:{
type: String,
default: "",
}
},
data() {
return {
};
},
mounted() {
console.log("url:",this.url);
},
methods: {
}
}
</script>