小程序的分享 发送给好友功能

小程序的分享 onShareAppMessage(options)

 

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

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

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

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

 

页面中有可以触发转发时间的地方有两个:

  一个是右上角菜单中的转发按钮

  另一个是页面中具有属性open-type且其值为share的button。(注:必须是button组件,其他组件中设置 open-type="share" 无效)

  即:<button data-name="shareBtn" open-type="share">转发</button>

  注意:实际开发中会发现这个 button 自带有样式,当背景颜色设置为白色的时候还有一个黑色的边框,刚开始那个边框怎么都去不掉,后来给button加了一个样式属性 plain="true" 以后,再在样式文件中控制样式 button[plain]{ border:0 } ,就可以比较随便的自定义样式了,比如说将分享按钮做成一个图标等

 

触发分享事件后调用的函数:

 

 

 

onShareAppMessage: function( options ){
  var that = this;
  // 设置菜单中的转发按钮触发转发事件时的转发内容
  var shareObj = {
    title: "转发的标题",        // 默认是小程序的名称(可以写slogan等)
    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' ){
    var eData = options.target.dataset;
    console.log( eData.name );     // shareBtn
    // 此处可以修改 shareObj 中的内容
    shareObj.path = '/pages/btnname/btnname?btn_name='+eData.name;
  }
  // 返回shareObj
  return shareObj;
}

 

微信小程序去掉右上角的转发

  wx.hideShareMenu();

嗯。需求是在页面内点击转发按钮会获得积分,所以想要隐藏右上角的转发(就是点击右上角三个小点之后出现的转发)。在onload里加上wx.hideShareMenu();就可以啦。
顺便,小程序现在拿不到转发是否成功的回调,好难受哦。


参考链接:https://www.jianshu.com/p/12298812999b

### 回答1: 可以使用以下代码实现微信小程序分享给微信好友: wx.showShareMenu({ withShareTicket: true }) wx.onShareAppMessage(function () { return { title: '分享标题', path: '/pages/index/index', imageUrl: 'https://example.com/share.png' } }) ### 回答2: 要实现微信小程序分享给微信好友,需要以下步骤: 1. 在小程序的页面中添加分享按钮,可以使用`button`组件。 2. 给分享按钮绑定一个点击事件`bindtap`,点击时触发相应的分享逻辑。 3. 在点击事件中,调用微信提供的API`wx.showShareMenu`,显示分享菜单。 4. 使用`wx.onShareAppMessage`,来设置分享的内容和回调函数。 5. 在回调函数中,通过`return`语句返回分享的数据配置项,包括分享标题、路径和图片。 6. 用户点击分享给微信好友后,会触发微信的分享界面,用户可以选择发送给好友分享到朋友圈等操作。 例子代码如下: ```javascript // 在小程序的页面中添加分享按钮 <button bindtap="share">分享好友</button> Page({ // 点击分享按钮时触发的事件 share: function() { // 显示分享菜单 wx.showShareMenu({ withShareTicket: true }); }, // 设置分享的内容和回调函数 onShareAppMessage: function() { return { title: '分享标题', path: '/pages/index/index', imageUrl: '/images/share.png' }; } }); ``` 注意:以上代码只展示了实现分享给微信好友的基本逻辑,具体的分享样式、分享后的跳转逻辑等可以根据自己的需求进行进一步定制和开发。 ### 回答3: 微信小程序提供了一个分享组件,可以通过代码实现将小程序分享给微信好友。 首先,在小程序的页面中引入分享组件,可以使用`<button>`元素实现一个点击分享的按钮,如下所示: ```html <button open-type="share">分享好友</button> ``` 然后,在小程序的`app.json`文件中配置页面的路径,将分享组件所在的页面添加到`"pages"`数组中。 接下来,当用户点击分享按钮时,小程序会自动触发`<button>`元素的`open-type="share"`属性,然后跳转到分享页面,同时会触发页面的`onShareAppMessage`函数,我们可以在这个函数中自定义分享的标题、路径和图片等信息。在分享页面的`onShareAppMessage`函数中,我们可以使用以下代码实现分享功能: ```javascript onShareAppMessage: function () { return{ title: '分享标题', path: '分享路径', imageUrl: '分享图片地址' } } ``` 需要注意的是,分享路径必须是小程序中已注册的页面路径,并且不能携带查询参数。 最后,当用户点击分享后,微信会弹出一个分享的界面,用户可以选择将小程序分享给微信好友发送给群组或者分享到朋友圈。 以上就是使用代码实现微信小程序分享给微信好友的方法,通过添加分享组件、配置分享页面和自定义分享函数,可以方便地实现小程序分享功能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值