小程序分享出来的页面头部带返回按钮

方法1:

使用微信小程序提供的方法,在app.json中添加

"window": {
    "navigationStyle": "custom"
  }

来自定义头部。添加完这么属性后,所有页面的头部都会消失不见。这时可以写一个头部组件,定位在页面最顶部,然后在需要头部的页面引入组件。这样分享出来的页面头部就可以想加什么就加什么了。

优点:高自由度,随心所欲的编辑头部。

缺点:因为是作用于所有页面,所以需要为需要头部页面重新写头部样式。还可能会存在input键盘将整个页面顶起来、web-view页面没有头部等等样式问题。需要针对不同情况,不同处理

方法2:

修改页面分享的路径,将路径改为你头部返回按钮要返回的路径并在路径后拼上标识(需要用这个标识跳转到分享页面)

当前页面:pages/share/share
分享出来的页面头部返回的路径:pages/index/index

onShareAppMessage(res) {
	if (res.from === 'button') {
		// 来自页面内转发按钮
		console.log(res.target)
	}
	return {
		title: '自定义转发标题',
		path: '/pages/index/index?come=share'//分享出的链接跳转的路径
	}
}

然后在/pages/index/index页面的onload里:

onLoad: function (options) {
	if(options.come && options.come == 'share'){
		wx.navigateTo({
			url: 'pages/share/share',
		})
	}
})

这样就可以实现分享出来的页面先跳转到/pages/index/index,再跳转到/pages/share/share。从而实现/pages/share/share页面头部带返回按钮了。

优点:实现简单,针对需要的页面单独处理即可。

缺点:点击分享进入时会有一个跳转动画。头部返回按钮样式为小程序原生的,不可自定义。

猜你喜欢

转载自blog.csdn.net/weixin_43631810/article/details/85280750