十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍小程序如何实现转发功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联专注于企业营销型网站建设、网站重做改版、溧水网站定制设计、自适应品牌网站建设、H5场景定制、商城网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为溧水等各大城市提供网站开发制作服务。
文章背景:
在开发小程序的过程中,有时我们需要设计一个 “好友代付” 的功能。该功能的目的就是通过点击按钮,来引导微信用户转发此页面到微信好友或微信群中,让对方来帮你付款。
知识讲解
首先,开发前的重要一步就是,阅读小程序官方文档 —— 小程序转发功能对应接口
梳理讲解:
1.要拥有转发功能,必须要在当前页面的"js"代码中,定义"onShareAppMessage()"函数
2.要知道转发功能的使用有两种方式
#其一是自定义按钮进行点击触发,
#其二就是点击右上角菜单的那个“转发”按钮
3.转发操作完成后,要进行回调函数的处理 #一般Toast提示语句即可
完整接口代码解释:
/** * 进行页面分享 */ onShareAppMessage: function (options) { if (options.from === 'button') { // 来自页面内转发按钮 console.log(options.target) } return { //## 此为转发页面所显示的标题 //title: '好友代付', //## 此为转发页面的描述性文字 desc: '江湖救急,还请贵人伸手相助啊!', //## 此为转发给微信好友或微信群后,对方点击后进入的页面链接,可以根据自己的需求添加参数 path: 'pages/subpayment/firpayment/index?sn=' + this.data.sn, //## 转发操作成功后的回调函数,用于对发起者的提示语句或其他逻辑处理 success: function(res) { //这是我自定义的函数,可替换自己的操作 util.showToast(1, '发送成功'); }, //## 转发操作失败/取消 后的回调处理,一般是个提示语句即可 fail: function() { util.showToast(0, '朋友代付转发失败...'); } } },
代码实现操作
一. 此处,实际展示一下不同转发方式所打印的 options 参数信息
首先,在 wxml 页面中,设计一个 open-type="share"的按钮
那么不同的转发发起方式,打印出的options 参数信息如下:
建议:
1. 建议不需要进行转发操作的页面 #(比如:个人中心,地址管理,订单列表等)
就不要定义"onShareAppMessage()"参数,以减少不必要的用户操作和后续状况处理
2. 个人推荐使用 "Button" 引导的转发方式,如果同一个页面有多个引导按钮,可以根据其 "target"中的"id" 进行区分
二、实际开发效果展示
通过前面的核心代码,我实现的效果如下:
提示:
个人发现
在微信官方提供的开发者工具中进行测试时,可以看到自己转发唤醒时拥有设置的描述语句(desc),
但是,我在真机"iphone7"手机上测试时,并不会有所显示,可从图片中看到 #(默认截取了我的一部分页面)
title 和 imageUrl 的设置是可以正常显示的
以上是“小程序如何实现转发功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!