资讯专栏INFORMATION COLUMN

小程序自定义分享事件及回调函数

liangdas / 3458人阅读

摘要:定义函数在页面的文件中定义函数时,表示该页面可以进行转发。显示图片长宽比是转发成功之后的回调转发失败之后的回调用户取消转发转发失败,其中为详细失败信息转发结束之后的回调转发成不成功都会执行来自页面内的按钮的转发来源于此处可以修改中的内容返回

定义函数

在页面的js文件中定义 onShareAppMessage 函数时,表示该页面可以进行转发。可以在函数中设置页面转发的信息。

只有定义了该函数,小程序右上角的菜单中才会有转发按钮

用户点击转发按钮的时候回调用该函数

该函数内需要 return 一个 Object,Object中包含转发的信息(可自定义转发的内容)

触发转发的位置

页面中可以触发转发的地方有两个:
  一个是右上角菜单中的转发按钮
  另一个是页面中具有属性open-type且其值为sharebutton。(注:必须是button组件,其他组件中设置 open-type="share" 无效)
  即:
  注意:实际开发中会发现这个 button 自带有样式,当背景颜色设置为白色的时候还有一个黑色的边框,刚开始那个边框怎么都去不掉,后来给button加了一个样式属性 plain="true" 以后,再在样式文件中控制样式 button[plain]{ border:0 } ,就可以比较随便的自定义样式了,比如说将分享按钮做成一个图标等

触发分享事件函数
onShareAppMessage: function( options ){
  // 自定义分享内容
  var shareObj = {
    title: "转发的标题",        // 小程序的名称
    path: "/pages/share/share",        // 默认是当前页面,必须是以‘/’开头的完整路径
    imgUrl: "",     //自定义图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
    success: function(res){
      // 转发成功之后的回调
      if(res.errMsg == "shareAppMessage:ok"){
      }
    },
    fail: function(){
      // 转发失败之后的回调
      if(res.errMsg == "shareAppMessage:fail cancel"){
        // 用户取消转发
      }else if(res.errMsg == "shareAppMessage:fail"){
        // 转发失败,其中 detail message 为详细失败信息
      }
    },
    complete: fucntion(){
      // 转发结束之后的回调(转发成不成功都会执行)
    }
  };
  // 来自页面内的按钮的转发
  if( options.from == "button" ){
    console.log("来源于button");
    // 此处可以修改 shareObj 中的内容
    shareObj.path = "/pages/btnname/btnname?btn_name="+eData.name;
  }
  // 返回shareObj
  return shareObj;
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107841.html

相关文章

  • 玩转程序转发——程序探索

    摘要:转发的意义转发即是分享,分享带动了事物去中心化,实现网络化,最终走向云处理化通过微信平台,转发即是聊天流量时代,转发即是引流官方转发示例监听用户点击页面内转发按钮组件或右上角菜单转发按钮的行为,并自定义转发内容。 转发的意义 转发即是分享,分享带动了事物去中心化,实现网络化,最终走向云处理化 通过微信平台,转发即是聊天 流量时代,转发即是引流 官方转发示例 onShareAppMe...

    UsherChen 评论0 收藏0
  • 微信程序教学第三章第四节(含视频):程序中级实战教程:下拉更新、分享、阅读标识

    摘要:下拉更新分享阅读标识本文配套视频地址开始前请把分支中的目录导入微信开发工具这一篇中,我们把列表这块的剩余功能做完下拉更新分享阅读标识。 下拉更新、分享、阅读标识 本文配套视频地址:https://v.qq.com/x/page/h0554... 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一篇中,我们把列表这块的剩余功能做完:下拉更新、分享、阅读标识。 ...

    caoym 评论0 收藏0
  • 微信程序教学第三章第四节(含视频):程序中级实战教程:下拉更新、分享、阅读标识

    摘要:下拉更新分享阅读标识本文配套视频地址开始前请把分支中的目录导入微信开发工具这一篇中,我们把列表这块的剩余功能做完下拉更新分享阅读标识。 下拉更新、分享、阅读标识 本文配套视频地址:https://v.qq.com/x/page/h0554... 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一篇中,我们把列表这块的剩余功能做完:下拉更新、分享、阅读标识。 ...

    neroneroffy 评论0 收藏0
  • 微信程序教学第三章第四节(含视频):程序中级实战教程:下拉更新、分享、阅读标识

    摘要:下拉更新分享阅读标识本文配套视频地址开始前请把分支中的目录导入微信开发工具这一篇中,我们把列表这块的剩余功能做完下拉更新分享阅读标识。 下拉更新、分享、阅读标识 本文配套视频地址:https://v.qq.com/x/page/h0554... 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一篇中,我们把列表这块的剩余功能做完:下拉更新、分享、阅读标识。 ...

    chemzqm 评论0 收藏0
  • 微信程序(新)必备知识

    摘要:组件化开发小程序在未出现组件之前,要重用的话,只能简单复制粗暴黏贴组件化开发的优势可复用代码分离,可维护更重要定义组件先创建文件夹用于存放组件,然后再创建组件文件夹注意组件的文件名并不是组件名,而页面文件名是页面名,组件名是引用时才确定的引 组件化开发 小程序在未出现组件之前,要重用的话,只能简单(复制)粗暴(黏贴) 组件化开发的优势: 1、可复用(wxml/wxss/js) 2、代...

    mengera88 评论0 收藏0

发表评论

0条评论

liangdas

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<