如何简单地实现小程序分享页拥有返回首页按钮

最近对小程序有一定的了解,也对小程序赞赏有加,体验很好,但是分享小程序的单个页面容易有一个问题,回到首页的交互复杂,不存在后退按钮,先来看看有实现这个流程的小程序如何做这个事情--快住--全广州最走心的免费帮找租房小团队(感谢帮我找到合适的住所)

先看效果

仔细看的话会发现一般情况下,小程序的分享页没有跳转的一个流程,而快住这里却有一个先进入首页的流程,再跳转进入对应的分享页面,这样进入分享页之后左上角就会有回到主页的返回按钮,相比于让用户熟悉小程序的回首页交互,这样更为合理.

目前我发现市面上很多小程序都没有采用这样分享页面的做法,快住还是比较有想法的,贴个二维码,看官可以自行去体会.

如何实现

参照网上的资料以及官方的文档,我还是研究了不长不短的时间,这也是微信小程序的官方文档不全导致的(或者是我不够细心)

先看一下微信小程序中关于分享的api

微信官方api文档转发

我们可以通过重写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) {
        // 转发失败
      }
    }
  }

path为我们可以设置的任意页面,在此我们需要填入首页的地址,这样用户点击分享的卡片即进入首页.

实现首页跳转进入具体的详情页

这里涉及到两个问题,第一首页如何判断什么时候跳转,第二首页如何知晓该跳转到哪一个详情页.

这是微信官方文档没有告诉我们的事情,即页面传值.

页面传值

贴代码:

onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',   
      path: '/pages/xxxx/xxx?pageId=123',//这里在首页的地址后面添加我们需要传值的标识位pageId以及值123(pageId 这个名字你们可以自己随便乱取 如同一个变量名)
      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,
      })
    }
  }

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

作者：ChrisPz
链接：如何简单地实现小程序分享页拥有返回首页按钮-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Biegral Blog