摘要:本文将带你了解微信小程序开发之转发好友,希望本文对大家学微信有所帮助
本文将带你了解微信小程序开发之转发好友,希望本文对大家学微信有所帮助
今天简单地说下微信小程序的转发功能,为什么要简单的说下呢,因为主要讲的就是转发给好友或者群组,还有一种是分享到朋友圈,这种就比较复杂一点了,先稍微透漏一点,分享到朋友圈主要是两种方法,一种是后台直接生成海报图,一种是前端通过canvas生成海报。以后有机会再详细说,好了,言归正传继续说我们的转发好友。首先介绍一个微信小程序的API:onShareAppMessage(options)在 Page 中定义 onShareAppMessage 函数,设置该页面的转发信息。只有定义了此事件处理函数,右上角菜单才会显示 “转发” 按钮用户点击转发按钮的时候会调用此事件需要 return 一个 Object,用于自定义转发内容options 参数说明自定义转发字段 还有一个值那就是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…
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号