前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序 转发功能实例讲解

微信小程序 转发功能实例讲解

作者头像
泥豆芽儿 MT
发布2018-09-11 11:37:58
2.2K0
发布2018-09-11 11:37:58
举报

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333848

▽ 背景

  • 最近在开发小程序过程中,需要设计一个“好友代付”的功能,目的就是点击按钮,引导微信用户转发此页面到好友或微信群中,让对方帮你付款

▼ 知识讲解

①. 首先,开发前的重要一步就是,阅读小程序官方文档 —— 小程序转发功能对应接口

②. 梳理讲解:

代码语言:javascript
复制
1.要拥有转发功能,必须要在当前页面的"js"代码中,定义"onShareAppMessage()"函数
2.要知道转发功能的使用有两种方式
    #其一是自定义按钮进行点击触发,
    #其二就是点击右上角菜单的那个“转发”按钮
3.转发操作完成后,要进行回调函数的处理 #一般Toast提示语句即可

③. 完整接口代码解释:

代码语言:javascript
复制
  /**
   * 进行页面分享
   */
  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"的按钮
代码语言:javascript
复制
<button type="warn" open-type="share" data-tag="share1" id="btn_share1">发送微信给好友</button>
  • 那么不同的转发发起方式,打印出的options 参数信息如下:
代码语言:javascript
复制
建议:
 1. 建议不需要进行转发操作的页面 #(比如:个人中心,地址管理,订单列表等)
    就不要定义"onShareAppMessage()"参数,以减少不必要的用户操作和后续状况处理
 2. 个人推荐使用 "Button" 引导的转发方式,如果同一个页面有多个引导按钮,可以根据其 "target"中的"id" 进行区分

二、实际开发效果展示

  • 通过前面的核心代码,我实现的效果如下:
  • 提示:
代码语言:javascript
复制
个人发现
    在微信官方提供的开发者工具中进行测试时,可以看到自己转发唤醒时拥有设置的标题和描述语句,
    但是,我在真机"iphone7"手机上测试时,并不会有所显示,可从图片中看到 #(默认截取了我的一部分页面)
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年07月17日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • ▽ 背景
  • ▼ 知识讲解
  • ◆ 代码实现操作
    • 一. 此处,实际展示一下不同转发方式所打印的 options 参数信息
      • 二、实际开发效果展示
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档