（干货）微信小程序转发好友

今天简单地说下微信小程序的转发功能，为什么要简单的说下呢，因为主要讲的就是转发给好友或者群组，还有一种是分享到朋友圈，这种就比较复杂一点了，先稍微透漏一点，分享到朋友圈主要是两种方法，一种是后台直接生成海报图，一种是前端通过canvas生成海报。以后有机会再详细说，好了，言归正传继续说我们的转发好友。

首先介绍一个微信小程序的API：onShareAppMessage(options)

在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。

只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮
用户点击转发按钮的时候会调用
此事件需要 return 一个 Object，用于自定义转发内容

options 参数说明

参数	类型	说明	最低版本
from	String	转发事件来源。button：页面内转发按钮；menu：右上角转发菜单	1.2.4
target	Object	如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined	1.2.4

自定义转发字段

字段	说明	默认值	最低版本
title	转发标题	当前小程序名称
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4		1.5.0
success	转发成功的回调函数		1.1.0
fail	转发失败的回调函数		1.1.0
complete	转发结束的回调函数（转发成功、失败都会执行		1.1.0

还有一个值那就是shareTickets他是转发成功返回的，并且是个数组，每一项是一个 shareTicket ，对应一个转发对象

API先说到这，接下来就是转发的实现

先看图：

首先要在onLoad中配置wx.showShareMenu

  onLoad: function (e) {wx.showShareMenu({// 要求小程序返回分享目标信息withShareTicket: true}); },复制代码

然后再配置onShareAppMessage

/* 转发*/onShareAppMessage: function (ops) {if (ops.from === 'button') {// 来自页面内转发按钮console.log(ops.target)}return {title: '转发dom',path: `pages/index/index`,success: function (res) {// 转发成功console.log("转发成功:" + JSON.stringify(res));var shareTickets = res.shareTickets;// if (shareTickets.length == 0) {//   return false;// }// //可以获取群组信息// wx.getShareInfo({//   shareTicket: shareTickets[0],//   success: function (res) {//     console.log(res)//   }// })},fail: function (res) {// 转发失败console.log("转发失败:" + JSON.stringify(res));}}},
复制代码

我解释一下wx.getShareInfo这个可以获取到获取转发详细信息

完整js代码就是

//index.js
//获取应用实例
const app = getApp()Page({data: {motto: 'Hello World',},onLoad: function (e) {wx.showShareMenu({// 要求小程序返回分享目标信息withShareTicket: true}); },/* 转发*/onShareAppMessage: function (ops) {if (ops.from === 'button') {// 来自页面内转发按钮console.log(ops.target)}return {title: '转发dom',path: `pages/index/index`,success: function (res) {// 转发成功console.log("转发成功:" + JSON.stringify(res));var shareTickets = res.shareTickets;// if (shareTickets.length == 0) {//   return false;// }// //可以获取群组信息// wx.getShareInfo({//   shareTicket: shareTickets[0],//   success: function (res) {//     console.log(res)//   }// })},fail: function (res) {// 转发失败console.log("转发失败:" + JSON.stringify(res));}}},
})复制代码

聪明的同学就该知道接下来该是wxml代码

<view class="container"><view class="userinfo"><button open-type="share">分享好友</button></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>复制代码

友情提示一下如果点击按钮分享的话，button一定要设置open-type="share"否则不起作用。

如果觉得文章还不错并对你有帮助的话，请分享给你的小伙伴，并点赞，有什么不懂得可以在底下留言哦。

如果想看源码的话可以去我的github上下载，欢迎star，github：github.com/Mr-MengBo/w…

（干货）微信小程序转发好友相关推荐

微信小程序转发好友和分享朋友圈
onLoad: function (options) {//修改当前页面标题wx.setNavigationBarTitle({title: "会员中心"}); //用户点击右上角 ...
uniapp(HBuilder X)实现微信小程序转发好友和分享朋友圈(携带多个参数)
1.转发好友 onShareAppMessage() {let that=this;var url="/pages/xxxx/xxxx?id=123&type=goods" ...
微信小程序转发动态消息的问题
最近项目中需要用到微信小程序转发动态消息的功能,遇到了一些坑,最终测试成功了,现在分享给大家. 微信官方的动态消息参考文档在这里:https://developers.weixin.qq.com/mi ...
python 自动化微信小程序_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
原标题:干货 | 微信小程序自动化测试最佳实践(附 Python 源码) 本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善, ...
微信小程序转发微信小程序转发
微信小程序转发涉及以下4个方法: 1.Page.onShareAppMessage({}) 设置右上角"转发"配置,及转发后回调函数返回 shareTicket 票据 2.wx.s ...
unapp微信小程序转发分享、携带参数
一.第一种方式: // 开启小程序原生右上角分享按钮uni.showShareMenu({// https://developers.weixin.qq.com/miniprogram/dev/fra ...
微信小程序转发分享打电话功能,完整代码附效果图
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 按钮绑定在页面内发起转发事件onShareApp:(注意这里是button 并且给他设置了open-t ...
微信小程序转发自定义图片
近日帮朋友做个微信小程序,不得不说小程序真的很便捷今日做到关于转发分享部分,一不小心给自己挖了坑需求:自定义一个按钮来实现转发功能,想使转发界面换成我自定义的图片而不是缩略图,并且转发时需要传一些 ...
微信小程序邀请好友增加积分
假设你的小程序中已经有了一个邀请好友的按钮或页面,那么可以在相应的触发事件中添加以下代码: // 监听邀请好友成功事件 wx.onShareAppMessage(() => {// 增加2积分l ...

（干货）微信小程序转发好友

（干货）微信小程序转发好友相关推荐

最新文章

热门文章