关于小程序的转发:

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

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

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

一. 自定义转发内容:

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. Django从MySQL数据库生成model

    字段太多的话,手动建表,然后用 inspectdb 命令生成model文件,效率会高很多: inspectdb  表名 >> model文件名.py >> 是追加在文件末尾:& ...

  2. golang 字符串截取

    java中有SubString,那golang怎么截取字符串? str := "hello world" fmt.Print(str[:]) 以上代码输出 hello 数组,sli ...

  3. delphi Berlin Could not load SSL library.

    delphi Berlin Could not load SSL library. TIdSSLIOHandlerSocketOpenSSL 解决办法:下载合适的版本文件libssl32.dll Id ...

  4. 机器学习进阶-目标跟踪-KCF目标跟踪方法 1.cv2.multiTracker_create(构造选框集合) 2. cv2.TrackerKCF_create(获得KCF追踪器) 3. cv2.resize(变化图像大小) 4.cv2.selectROI(在图像上框出选框)

    1. tracker = cv2.multiTracker_create() 获得追踪的初始化结果 2.cv2.TrackerKCF_create() 获得KCF追踪器 3.cv2.resize(fr ...

  5. WPF线性渐变画刷应用之——炫彩线条

    效果图: Xaml代码: <Rectangle Width="800" Height="10"> <Rectangle.Fill> &l ...

  6. JEECG 新手常见问题大全,入门必读

    大家还有什么问题,请跟帖,谢谢支持..  JEECG常见问题大全 原文地址:http://t.cn/RvYsEF61. jeecg数据库脚本问题   注意:jeecg3.5.2之前版本,不需要数据库脚 ...

  7. opencv给图片添加文字水印<转>

    其中有一些改动为了文字大小等还有一些图片的尺寸,真正使用的时候可以把尺寸的屏蔽掉 头文件: //==================================================== ...

  8. ABAP-折叠窗口

    1.测试 2.代码 *&---------------------------------------------------------------------* *& Report ...

  9. homebrew, carthage以及redis的安装和启动

    homebrew的介绍以及redis的安装   brew install redis https://www.cnblogs.com/xd502djj/p/6923690.html redis的启动, ...

  10. Rust语言学习笔记(7)

    模块 // 兄弟模块 mod network { fn connect() { } } mod client { fn connect() { } } // 父子模块 mod network { fn ...