简单制作小程序分享页返回首页按钮

小程序凭借其轻应用的核心理念提高了用户体验，许多使用者对小程序赞赏有加，但是分享小程序的单个页面容易有一个问题，回到首页的交互复杂，不存在后退按钮，如果能制作一个分享页返回首页按钮会增强对用户的粘性。

仔细看的话会发现一般情况下，小程序的分享页没有跳转的一个流程,而快住这里却有一个先进入首页的流程，再跳转进入对应的分享页面，这样进入分享页之后左上角就会有回到主页的返回按钮，相比于让用户熟悉小程序的回首页交互，这样更为合理。市面上很多小程序都没有采用这样分享页面的做法，部分小程序会在这方面下功夫，为了更好的留住客户。

在微信官方的分享API解释中，在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，用户点击转发按钮的时候会调用，此事件需要 return 一个 Object，用于自定义转发内容。

我们可以通过重写onShareAppMessage 函数来实现一些定制化,比如分享出去的卡片标题等等,其中最重要的就是我们可以定义用户点击卡片进入的页面路径。

onShareAppMessage:function (res) {

if (res.from === \'button\') {

// 来自页面内转发按钮

console.log(res.target)

}

return {

title: \'自定义转发标题\',  

path: \'/pages/xxxx/xxx\',//这里填写首页的地址,一般为/pages/xxxx/xxx

success: function(res) {

// 转发成功

},

fail: function(res) {

// 转发失败

}

}

}

一段代码实现了将值123带给了首页,同时首页需要通过这个值来判断进入首页的来源是否为用户点击了分享的卡片。

首页获取pageId的值。

在首页的js文件中,找到onLoad函数

onLoad:function (options) {

if (options. pageId) {

//这个pageId的值存在则证明首页的开启来源于用户点击来首页,同时可以通过获取到的pageId的值跳转导航到对应的详情页

wx.navigateTo({

url: \'../pageDetail/pageDetail?pageId=\'+ options.pageId,

})

}

}

网上还有别的做法,比如在详情页中添加一个回首页的按钮,个人认为这种跳转的方式一般,然而后退进入首页的交互很自然,唯一的弊端,会有一个从首页跳转到详情页的小瞬间,但是小程序的流行很多都依赖于分享卡片,用户点击了分享卡片瞅了一眼首页也未尝是一件坏事。

推荐阅读：微信小程序后台服务怎么搭建

           微信小程序测评