需求:用户在朋友圈打开分享的小程序页面,并不会真正打开小程序,而是进入一个“小程序单页模式”的页面,需要自定义单页面样式
第一步:先读官方文档
分享到朋友圈 | 微信开放文档
由官方文档可知,当进入单页面会返回一个场景值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问答