微信小程序爬坑记之页面分享onShareAppMessage

前言

项目中会有这样的场景，分享小程序邀请新用户，得一些优惠的活动，实际上微信官方是不支持商家有这种诱导用户分享的行为，所以分享api的回调给取消了，我们无从知道用户是否分享成功，所以如果仅仅是分享出去不需用户登录就可以得一些优惠，这是无解的，除非商家原意这样，这篇记录一下邀请新用户的方法。

我们知道小程序点击右上角的三个点有个转发入口，对商家来讲，这样一个不显眼的分享入口是不够的，所以很多程序在页面中也有比较显眼的分享按钮，以达到推广的目的，现在来看如何实现。

页面内发起转发

先看一下官方文档 -> 点我跳转

做法就是在页面中定义一个button按钮，并设置open-type=”share” 的属性，这样在点击后触发 Page.onShareAppMessage 事件就可以实现转发功能。

onShareAppMessage

在页面js文件中的 onShareAppMessage 事件，只有定义了才会触发转发的功能，如果没有定义或者设置隐藏(可以通过调用 wx.hideShareMenu(); 来隐藏转发)，则该页面右上角是没有转发功能的。该事件中设置页面转发的参数，包括转发标题，转发的页面图，转发的页面路径。

实现

页面定义button按钮

1	<button class="share-box" open-type="share">

js中定义onShareAppMessage事件

onShareAppMessage() {
  return {
    title: '小伙伴们快来和我一起竞猜吧',
    imageUrl: '' // 分享封面图路径，不写默认为当前页面
    path: '/pages/live/detail' // 必须是以 '/' 开头的路径
  };
},

这样页面中的转发功能就简单实现了，但是这样做和右上角的分享好像并没有什么区别，也不是我们要实现分享邀请新人得优惠的功能，下面先分析一下流程。

分析

首先明确我们的需求，分享邀请新人，则发出邀请的人会得到优惠(这里暂定优惠为10个金币吧)，那么如何标记新用户是通过谁的分享点进来的是个首要解决的问题，其次就是新用户点击邀请人的链接，怎么在其登陆注册的时候告诉后端，这个人是哪个邀请人邀请的，并给邀请人账户加10个金币。

我们可以把这个标记定为分享人得 id 即用户的id，在用户分享的时候把自己的id拼接在分享的页面路径中，在登陆检查session之前，获取分享人id(通过 options.id 拿到并保存到缓存) 如果是新用户会跳转登录页这时在登陆把缓存里的分享人id取出，如果有则调用登陆接口时一并传给后端。

实现

分享页面的js

onShareAppMessage() {
  return {
    title: '小伙伴们快来和我一起竞猜吧',
    imageUrl: ''
    path: `/pages/live/detail?inviterId=${id}`
  };
},

inviterId 表示邀请人的id 也就是当前用户的id，可以让后端人员在登陆的时候反。点分享链接进来的用户是会立刻走首页先检查session，如果该用户登录过且session没有失效或者有游客模式的话则直接进入分享页面，在首页checkSession之前通过 options.inviterId 获取inviterId，并保存至缓存，如果没有session或者失效，则让用户去登陆。这样我们在登录页的onload生命周期中，通过 options.inviterId 获取，在登陆时传给后端。

登陆页面

首页

如果分享的是详情页

详情页的分享，是需要把当前页面的id在路径传参时一并传出，格式：path: /pages/live/detail?id=${detailId}&inviterId=${id}&share=true

这里detail后边的id就是当前详情页的id，后边拼接的inviterId是用户id，最后的share参数，表示分享页面。
因为如果分享的是详情页面的话，该页面是需要有个返回到首页的按钮的，否则用户点击分享进来后，无法退出该页面，这里的 share 参数就是用来标记当前页面是分享页，在页面中可以根据share的true or false来判断是否展示返回首页按钮。

如果有游客模式

项目中遇到这样的问题，由于后端接口规范走的是RESTful，app端和小程序这边共用的一套api。APP端有游客模式，导致小程序这边所有接口，不用session可以直接访问，所以如果要实现以上的功能需要在所有的分享页面都检查session，但是这样又不太好，最后的做法是，分享页面都检查是否有用户的信息(登陆的时候让后端反用户信息)。如果是新用户则在登陆的时候是没有信息的，这样就区分了是否为新用户，也不用频繁的checkSession。不知道还有没有其他的好办法，如果有，希望小伙伴们可以告知。

总结

分享这块说简单也简单，有些东西还是有点绕，分享邀请新用户这个场景还是很常见的，电商类的小程序肯定会有，这里简单的记录下。