想要实现效果:
(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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐