关于小程序的转发:

最简单的就是点击小程序右上角菜单“转发”按钮直接分享,不过这种分享有点不太友好,实用性也不强。

当然,你可以自定义分享内容,包括标题,简介,图片及分享的小程序页面路径。

再高级一点,还可以对转发出去的小程序被二次打开的时候获取到一些信息。

一. 自定义转发内容:

onShareAppMessage(Obj):

1. 监听转发按钮(button open-type="share")或小程序右上角“转发”按钮的点击行为;
2. 自定义转发分享内容。
3. 还可以监听这些信息:
 
示例代码:
  /**
* 用户分享自定义
*/
onShareAppMessage: function(res) {
return {
title: '哈根达斯冰激凌5折特惠',
path: '/pages/index/index?goods_id=' + wx.getStorageSync("goods_id"),
imageUrl: 'http://static.e-mallchina.com/pic/product/brand/detail/hgds.jpg'//自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。
}
}

点击右上角菜单中的“转发”按钮,分享效果如下:

二. 点击页面按钮分享转发:

<button> 组件设置 open-type="share"即可实现页面内分享,点击按钮即可跟点击右上角菜单中的转发按钮会有一样的效果。

<button open-type='share' type='warn' size="mini" plain="true" id='btnShare0'>推荐给好友</button>

当然,跟右上角菜单中的转发按钮一样,如果设置了自定义转发内容,点击分享按钮也会展示自定义分享内容的。

三. 关闭分享功能:

wx.hideShareMenu(Object object):隐藏转发按钮,关闭转发功能(不影响转发按钮的功能,只是右上角分享没有了)。
  /**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
wx.hideShareMenu()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
wx.hideShareMenu()
},

四. 获取更多转发信息:

转发出去的小程序被二次打开的时候能够获取到一些信息,例如群的标识。

大致流程:

1. 通过调用 wx.showShareMenu 并且设置 withShareTicket 为 true ;
2. 当用户将小程序转发到任一群聊之后, 此转发卡片在群聊中被其他用户打开时,可以在 App.onLaunch 或 App.onShow 获取到一个 shareTicket;
3. 通过调用 wx.getShareInfo() 接口传入此 shareTicket 可以获取到转发信息。

示例代码:

  //分享页面设置开启分享群信息
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
wx.showShareMenu({
withShareTicket: true
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
wx.showShareMenu({
withShareTicket: true
})
}
//app.js 获取小程序名片页附带的分享信息
App({
onLaunch: function(ops) {
//小程序在群里被打开后,获取情景值和shareTicket
console.log("ops:", ops)
if (ops.scene==1044) {
wx.getShareInfo({
shareTicket: ops.shareTicket,
success:function(res) {
console.log("wx.getShareInfo:::", res)
}
})
}
}
})

分享到群里之后,在群里打开小程序,获取类似下面的数据:

如上图,获取的就是分享到的群聊的相关信息了,不过这个信息是加密的,需要像获取手机号一样再去后端解密才可以。

其中 encryptedData 解密后为以下 json 结构,详见加密数据解密算法。其中 openGId 为当前群的唯一标识:

{
"openGId": "OPENGID"
}
如需要展示群名称,可以使用开放数据组件

经验证,这个功能只有在分享到群聊中才会有效,也就是说只能区分小程序是在群中还是好友聊天窗口中打开的,所以这个功能是比较鸡肋的。

五. 其他一些功能:

还有一个接口,就是更新转发属性的接口:wx.updateShareMenu(Object object),平常用的不多,感兴趣的可以自行去官网研究。

微信小程序开发——小程序分享转发的更多相关文章

  1. 微信小程序开发8-小程序的宿主环境(1)

    1.小程序的运行环境分成渲染层和逻辑层,第2章提到过 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层.小程序的渲染层和逻辑层分离是经过很多考虑得出来的模型 2. 1.渲染层和数据 ...

  2. 微信小程序开发3-小程序的代码组成

    1.​小程序由配置代码JSON文件.模板代码 WXML 文件.样式代码 WXSS文件以及逻辑代码 JavaScript文件组成 2.JSON: (JavaScript Object Notation) ...

  3. 小程序开发-小程序tabBar不显示的原因分析

    在尝试小程序开发时,tabBar这个是个非常常见的组件,但是今天在进行开发时,设置了TabBarb并没有显示,被这个问题困扰了近半小时,现在将排查问题后所得到的经验记录下来. 首先 如果tabBar不 ...

  4. 微信小程序开发中怎么设置转发(分享)的信息

    如果什么都不设置,转发时默认名称是小程序的名称,转发的图片显示的是当前页面的截图,如图一 如何在自定义转发信息呢? 在进行转发的页面中: Page({ onShareAppMessage: funct ...

  5. 微信小程序开发02-小程序基本介绍

    前言 前面我们研究了下微信小程序的执行流程,因为拿不到源码,只能算我们的猜想,我们需要更加了解小程序还需要做具体的项目,于是我们将原来那套还算复杂的业务拿出来: [组件化开发]前端进阶篇之如何编写可维 ...

  6. 微信小程序开发01-小程序的执行流程是怎么样的?

    前言 我们这边最近一直在做基础服务,这一切都是为了完善技术体系,这里对于前端来说便是我们需要做一个Hybrid体系,如果做App,React Native也是不错的选择,但是一定要有完善的分层: ① ...

  7. 微信小程序开发-小程序之间的跳转

    前几天开发微信小程序,其中有个需要联动宣传的业务,就是正在开发的小程序跳转到别的小程序去, 然后去看了下大家的做法与看法,总结下这小程序跳转之间应该注意到的几个问题 首先是跳转的方法, https:/ ...

  8. 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等

    一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...

  9. 微信小程序开发——小程序API获取用户位置及异常流处理完整示例

    前言: 小程序需要添加一个定位功能,主要的就是获取用户位置的经纬度,然后根据用户经纬度进行一些判断操作. 在小程序提供的Api中,获取用户定位信息的主要Api是 wx.getLocation(obj) ...

随机推荐

  1. air 调用jsfl 执行对应函数,并传参

    jsflPath = "WindowSWF/dt_tool_jsfl/" + event.item.fileName+".jsfl"; var element_ ...

  2. ORM对单表的增删改查

    表记录的增加: 1)b = Book(name='python', price=99) b.save() 2)Book.objects.create(name='python', price=99) ...

  3. jquery Load方法的重要点

    一个非常重要而且很容易忽视的问题就是:你是否load进了你必须load的元素,是否有的没有load进来,打开firebug查看一下

  4. 记录在Centos下安装和使用Git的过程,从github上克隆仓库和提交。

    1 安装git yum install git 2配置DNS vi /etc/resolv.conf nameserver 8.8.8.8nameserver 8.8.4.4 3 设置网关 vi /e ...

  5. ArcGIS 栅格数据教程

    ArcGIS 栅格数据教程 全部8个教程,带详细操作步骤和原始数据. 技术咨询:谢老师,135_4855_4328,xiexiaokui#139.com ArcGIS 10.5 此教程中的练习将使用样 ...

  6. SQL中ISNULL的问题。

    今天在写SQL代码的时候写了个 ISNULL(变量1,变量2),返回的结果居然是 "*" ,这个星号,郁闷了很久. 代码大意如下: ) declare @str2 int sele ...

  7. 吴裕雄 python 机器学习-DMT(2)

    import matplotlib.pyplot as plt decisionNode = dict(boxstyle="sawtooth", fc="0.8" ...

  8. js高级-模块化演变

    function demo(){ var a = b = c = 9; // b,c全局变量 a局部变量 } demo(); console.log(b) 命名空间 var Shop = {} //顶 ...

  9. 寒假生活第一天——Github初体验

    快开学了,今天体验了一下github这个对我来说很是神秘的东西 它的定义来源于百度百科,如有异议,那就有吧.//gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格 ...

  10. scrapy爬虫的编写步骤

    scrapy的步骤: a.编写item,爬取的各个属性 b.编写spider,name 要和 scrapy crawl xxspider一致,里面编写parse的信息,就是xpath获取item的各个 ...