微信小程序分享

API官网:https://developers.weixin.qq.com/miniprogram/dev/api/share.html
分享回调事件文档:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#onshareappmessageobject

小程序分享

小程序的分享功能 onShareAppMessage(options)

转发给好友/群:

在小程序开发API中,发送给好友/群,可以有两种实现方式

触发分享

1.小程序右上角自带的分享功能:

如果在当前页面调用wx.hideShareMenu()方法,那么右上角的分享功能将被隐藏,调用wx.showShareMenu()方法,可以显示该功能。

2.自定义分享按钮:

<butto n open-type='share'>分享</button>

(注:必须是button组件,其他组件中设置 open-type="share" 无效)

注意:实际开发中会发现这个 button 自带有样式,当背景颜色设置为白色的时候还有一个黑色的边框,刚开始那个边框怎么都去不掉,后来给button加了一个样式属性 plain="true" 以后,再在样式文件中控制样式 button[plain]{ border:0 } ,就可以比较随便的自定义样式了,比如说将分享按钮做成一个图标等

以上两种方式均可实现分享功能

设置分享

如果开发人员在onShareAppMessage(options)不进行任何处理,那么微信将会有一个默认的数据转发出去,title为当前小程序名称,path为当前页面的路径,imageUrl为当前页面的截图。

触发分享事件后调用的函数:

onShareAppMessage(options)

  • title 标题
  • path 转发页面的绝对路径
  • imageUrl 自定义图片路径,本地或者网络图片都可以,不传默认截图
onShareAppMessage: function( options ){
  var that = this;
  // 设置菜单中的转发按钮触发转发事件时的转发内容
  var shareObj = {
    title: "转发的标题",        // 默认是小程序的名称(可以写slogan等)
    path: '/pages/share/share',        // 默认是当前页面,必须是以‘/’开头的完整路径
    imgUrl: '',     //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
    success: function(res){
      // 转发成功之后的回调
      if(res.errMsg == 'shareAppMessage:ok'){
      }
    },
    fail: function(){
      // 转发失败之后的回调
      if(res.errMsg == 'shareAppMessage:fail cancel'){
        // 用户取消转发
      }else if(res.errMsg == 'shareAppMessage:fail'){
        // 转发失败,其中 detail message 为详细失败信息
      }
    },
    complete: fucntion(){
      // 转发结束之后的回调(转发成不成功都会执行)
    }
  };
  // 来自页面内的按钮的转发
  if( options.from == 'button' ){
    var eData = options.target.dataset;
    console.log( eData.name );     // shareBtn
    // 此处可以修改 shareObj 中的内容
    shareObj.path = '/pages/btnname/btnname?btn_name='+eData.name;
  }
  // 返回shareObj
  return shareObj;
}

分享到朋友圈

微信小程序目前没有直接提供方法来将小程序分享至朋友圈,不过可以采用曲线救国的方式来达到目的。

曲线救国的方式分为两步:

1.通过浏览器将希望分享的东西分享至朋友圈:

微信小程序自身没有任何入口可以进入到微信的浏览器中,那么就更加不可能让用户进入到自身操作系统中的浏览器进行分享了。

那么能否有其他的途径可以达到此目的呢?

答案是客服消息。

微信小程序本身提供客服消息是用来更好的为客户服务的

小程序提供了入口,允许用户给客服发送消息,同时,也允许小程序的客服主动给用户发送消息,其中,可以发送图文链接

开发者可以在用户打开该聊天对话框时,主动给用户发送图文链接,用户点击该链接之后,将会跳转到微信的浏览器(H5)页面,该页面不同于小程序内打开的H5页面

开发者和用户对于这种样式的页面应该相当熟悉了,至此,从小程序进行分享至朋友圈的第一步完成了。

客服消息API文档:https://developers.weixin.qq.com/miniprogram/dev/api/custommsg/conversation.html

2.用户分享至朋友圈后,用户的好友通过该链接进入朋友圈

众所周知,微信目前还并未提供入口,将微信小程序直接在朋友圈进行展示,但是同样的,微信也没有禁止在朋友圈内展示小程序码,而我们通过小程序进行分享的是图文链接,那么图片自然就可以是需要分享的微信小程序码,至于文字,还可以作为运营人员的推广。

以上,就完成了从微信小程序分享至好友/好友群/朋友圈的路径。

注:小程序的二维码分两种,一种是常规的二维码,还有一种是小程序码,我们这里进行分享的是小程序码。

分享数据追踪

运营人员经常会期望知道哪些用户是自然量,哪些用户是推广量,不仅如此,他们常常期望给那些乐于分享的用户一些奖励。

那么,奖励的标准是什么?无外乎谁拉来的人多,谁就可以获得更多的奖励。开发人员需要满足运营的需求,所以需要记录每个用户通过分享获客的数量等等。

如何进行记录呢,还是老生常谈,无外乎以下几种方式:

1.简单粗暴型:

比如Uber和滴滴的获客方式,通过邀请码来进行获客。这种通过现金奖励的土豪方式不适合绝大多数的推广,而且简单粗暴,本文不再赘述。

2.数据匹配型:

现有的一些第三方推广渠道的合作方式常常都是如此,比如iOS通过用户的IDFA来进行标记用户,用户通过第三方app打开第三方渠道的短链时,由app将IDFA传给短链进行记录,当用户注册账号时,app端通过获取IDFA来和第三方渠道进行比对,如果一致,则认为是通过第三方渠道推广而来的量,最后进行结算。

微信小程序也可以模仿该方式进行记录。

分享给好友/好友群/朋友圈,它们需要使用不同的方式来进行记录。

1)朋友圈:

分享至朋友圈是通过分享小程序码来达到分享功能的,那么想要进行数据匹配,肯定是通过小程序码来做文章了。

通过调用微信的不同的接口,可以生成类型不同的小程序码,我们调用接口:https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN,具体参数

关注参数scene和page即可,我们可以将用户的userid或者唯一标识放入其中,这样在其他被拉进小程序的用户打开page页面时,我们可以通过以下方式获取到分享发起者的用户唯一标识:

// 首页的js

Page({
    onLoad:function(options){
        var scence = decodeURIComponent(options.scence)
    }
})

此时,便可以根据此唯一标识来给对应的用户发放奖励了。

2)分享至好友/群:

分享至好友/群和分享至朋友圈的内容并不一致,后者是分享图文链接,而分享至好友群的往往是小程序本身,群中的用户通过该分享可以直接进入小程序,那么如何进行数据匹配呢?

其实方法大同小异,通过查看微信小程序的api

可以在转发回调函数

onShareAppMessage(options) 的path 参数上加入用户的唯一标识,接下来的流程和分享至朋友圈便是一样了

部分运营人员期望能知道分享的群的一些信息,可以参考此文:http://news.ifeng.com/a/20170510/51071063_0.shtml

在小程序中,获取微信群 ID?

根据官方文档,我们可以通过以下两个方式,读取到微信群 ID 的信息

次接口更新,控制小程序页面右上角菜单中的「分享」按钮显示与消失,不再完全依赖页面逻辑文件中是否拥有 onShareAppMessage 函数。

现在有两个新的接口,可以决定小程序是否显示分享菜单:wx.showShareMenu(显示分享菜单)和 wx.hideShareMenu(隐藏分享菜单)。

在 wx.showShareMenu 接口中,设定 withShareTicket: true,即可在用户分享时,获取到 shareTickets。

onShareAppMessage 接口可以在分享成功、失败、完成(成功和失败)下,执行特定的回调函数。

在回调函数中,我们可以插入参数,以便小程序将微信群信息传入。小程序在检测到用户分享动作之后,会将 shareTicket 带入到这个参数中,并执行相应回调函数。

Page({
  onLoad () {
    wx.showShareMenu({
      withShareTicket: true //要求小程序返回分享目标信息
    })
  },
  // 其他的页面函数、生命周期函数等
  onShareAppMessage() {
    return {
      title: '页面分享标题',
      path: '/pages/path/to/target',
      success(res){
        console.log(res.shareTickets[0]) // 奇怪为什么 shareTickets 是个数组?这个数组永远只有一个值。
      }
    }
  }
}

接下来,是通过微信群进入小程序情景下的微信群 ID 获取

用户进入小程序时,小程序可以在 app 对象中的 onLaunch 生命周期函数中,获取到进入小程序的渠道(情景值)。

当情景值为 1044,即通过带 shareTicket 的微信群分享卡片进入小程序,小程序就可以额外获取到 shareTicket。

App({
  onLaunch: function (ops) {
    if(ops.scene == 1044){
      console.log(ops.shareTicket)
    }
  }
})

有了 shareTicket,我们就可以通过调用 wx.getShareInfo 函数,获取到目标微信群(加密过后的)ID 了。

wx.getShareInfo({
  shareTicket: shareTicket,
    complete(res){
      console.log(res)
    }
})

需要注意的是,如果当前用户未登录(从未调用 wx.login 或 session 过期),这些接口都会出现调用失败的情况。

另外,当分享失败或数据获取失败,这些函数只会调用 fail(失败)和 complete(完成)回调,而不会调用 success(成功)回调。

建议直接使用 complete 回调,并通过数据包中的错误码,判断接口是否成功调用,以免出现调用失败时小程序无相应反应的情况

关于shareTicket转发信息详情

https://developers.weixin.qq.com/miniprogram/dev/api/share.html#%E8%8E%B7%E5%8F%96%E6%9B%B4%E5%A4%9A%E8%BD%AC%E5%8F%91%E4%BF%A1%E6%81%AF

在电脑上调试分享接口

开发者工具中加入了分享接口调试功能.

在目标页面中,点击右上角的「更多」按钮,再点击「转发」。这时候,页面会变成「发送给好友」,里面有开发者工具提供的 9 个模拟群,任君选择。

随意点击一个群,进行模拟分享动作,小程序就可以获取到模拟群的加密数据。

获取进入小程序的微信群信息的调试方法

「自定义编译」按钮,在「设置应用的进入场景」,选择「1044:微信群会话中的小程序消息卡片(带 shareTicket)」。

选择场景之后,对话框下方会多出「选择进入的群」。随便选择一个测试群,再点击确定,你就可以开始调试了。

如果你利用 wx.getShareInfo 接口,调试出的结果是这样,那么恭喜你,你的代码没毛病,可以直接进入下一个步骤——数据解码。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容