微信分享朋友圈单页面设置

需求:用户在朋友圈打开分享的小程序页面，并不会真正打开小程序，而是进入一个“小程序单页模式”的页面,需要自定义单页面样式

第一步:先读官方文档 

分享到朋友圈 | 微信开放文档

由官方文档可知,当进入单页面会返回一个场景值1154,判断如果是1154就展示自定义内容

第二步:在app.vue里面获取到场景值,展示自定义内容

 app.vue文件

<script>
	export default {
		//全局变量机制,全端通用
		globalData: {
			showOverlay: false
		},
		//应用程序第一次启动时触发
		onLaunch: function(e) {
			const {
				scene
			} = e;
			if (scene === 1154) {
				this.globalData.showOverlay = true;
			}
		},
	}
</script>

 第三步:在分享页面展示(此处封装了一个自定义内容的组件)

第四步:自定义组件里面的关键内容

 关键代码就是需要点击内容,进行跳转页面(其实刚开始的需求是点击自定义内容直接跳转小程序,但是并没有实现,不确定是否可以实现)目前实现的是如下图展示:

第一步:

第二步: 

第五步:关于踩坑

此处需要注意,写完记得运行到真机上调试,模拟器上面 永远会 toast 提示“请前往小程序使用完整服务”

第六步:自定义写死内容

样式正常写,在页面加一句代码@touchmove.stop.prevent="hideOverlay"不做任何操作

总结 

关于微信单页面,也有去问过广大网友,基本上的回答都是让写一个单独的h5页面再使用嵌入进去,由h5单页面进行跳转到微信小程序,嗯.....没试过,有点复杂,时间紧任务重,广大网友回答链接放出来了,如果有兴趣可研究一下

uniapp 朋友圈分享单页面自定义操作_小程序-CSDN问答