美文网首页
微信小程序分享

微信小程序分享

作者: 菜蚴菜 | 来源:发表于2021-06-11 18:01 被阅读0次

    小程序分享的具体内容可参照官方文档,现在官方的说法为转发。
    以下内容只针对转发给朋友这一功能

    一、分享方式

    1、页面右上角三个...拉起分享
    2、按钮主动触发( 必须为button)

    二、实现全局配置以及两种分享方式的自定义

    小程序分享的实现是通过在page中配置onShareAppMessage实现

    三、实现方案:

    注意:官方的使用指引中明确了按需出现,所以在app.js全局配置实现所有页面增加分享功能是行不通的。需要每一页单独配置onShareAppMessage。
    1、在app.js中写一个公共的shareAppMessage方法。
    为了方便各个页面引用,把shareAppMessage方法放在了globalData中,或者写一个js文件,通过在页面中引用文件的方式获取shareAppMessage方法。

    #app.js
    function shareAppMessage(options) {
      // 页面右上角三个...拉起分享的配置
      var shareObj = {
        title: 分享的title, // 默认是小程序的名称(可以写slogan等)
        path: '/pages/index/index', // 默认是当前页面,必须是以‘/’开头的完整路径
        imageUrl: 图片地址, //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,
                           //支持PNG及JPG。(但实际我在使用本地图片发现不可用,只能使用线上的图片)。
                           //不传入 imageUrl 则使用默认截图(当期页面的截图,有可能暴露用户隐私)。
                          //显示图片长宽比是 5:4。
      } 
      // 页面内的按钮拉起分享的配置(以传入一个自定义的name值为例)
      if (options && options.from == 'button') {
       //从dataset中获取自定义的值
        var eData = options.target.dataset
        let departmentName = eData.name || ''
        shareObj.title = departmentName + '邀请你'
      } 
      return shareObj
    }
    App({
      globalData: {
        // 赋值全局数据
        shareAppMessage: shareAppMessage,
      },
    }
    

    2、引用实现分享

    //index.wxml
    //按钮分享的方式,可通过dataset传入一些自定义的值
     <button open-type="share" data-name="{{name}}" >
           分享
     </button>
    
    //index.js
    //页面...分享方式
    var app = getApp()
    Page({
      onShareAppMessage: app.globalData.shareAppMessage
    })
    

    相关文章

      网友评论

          本文标题:微信小程序分享

          本文链接:https://www.haomeiwen.com/subject/fceveltx.html