微信小程序开发专题小程序学习

微信小程序分享

2019-02-22  本文已影响197人  谢大见

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)

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 接口,调试出的结果是这样,那么恭喜你,你的代码没毛病,可以直接进入下一个步骤——数据解码。

上一篇下一篇

猜你喜欢

热点阅读