小程序分享给好友以及分享到朋友圈

前言:小程序分享给好友或者朋友圈仅需我们使用微信自带的API,分享到朋友圈的前提是需要我们允许分享给好友,其次才可以分享到朋友圈,功能简单话不多说直接上官方API链接和代码。

 一、分享给好友

wx.onShareAppMessage(function callback) | 微信开放文档 (qq.com)

我们直接使用官方API:onShareAppMessage

onShareAppMessage: function(res) {
      if (res.from === 'button') {
        // 来自页面内转发按钮
                console.log(res);
      }
      return {
        title: '现在注册还送全场8折优惠劵,无消费门槛',
        imageUrl: 'https://guacheng.fanwan.net.cn/applet/tools/newSharePic.png',
        path: '/pages/startPage/startIndex?userInviteCode=' + this.userQRcode,
      }
    },

其中的参数需要我们使用return,title是分享给好友的标题,imageUrl是我们分享内容图片的链接,path是我们的分享点入的页面路径,其中path是可以带参数的。

这时我们分享给好友功能已经完成,如果需要通过页面的button按钮来进行分享给好友需求,则直接使用特定的button如下open-type="share"即可,样式可以自行覆盖编写:

<button type="default" open-type="share">分享给好友</button>

面对面扫码功能也不难,后台生成带参数的二维码后,我们可以使用微信开发者工具通过二维码编译,(我们需要注意的是扫码二维码的时候是直接进入我们线上发布的正式服的,所以就无法进行测试,因此我们可以在生成二维码的时候通过开发工具的二维码编译,就可以根据我们开发的代码进行编译了)

然后正常的在onload()生命周期中获取参数,小程序应用级别的生命周期的onLaunch()中也可以获取到


二、分享到朋友圈

Page(Object object) | 微信开放文档 (qq.com)

​
  onShareTimeline: function(res){
    return {
      title: '现在注册还送全场8折优惠劵,无消费门槛', //字符串  自定义标题
      query: 'id=1',  //页面携带参数
      imageUrl:'https://guacheng.fanwan.net.cn/applet/tools/newSharePic.png'   //图片地址
    }

​

这里我们也是用官方API:onShareTimeline,但是需要注意分享到朋友圈需要我们先允许分享给好友,并且值得注意的是分享到朋友圈是不能自定义路径的,并且限制较多,不建议将交互复杂的界面进行分享,官方文档的说明亦是如此。

同时分享到朋友圈的功能不支持我们使用自定义按钮,只能通过点击小程序右上方的胶囊位(个人反正是没有找到能够直接分享到朋友圈的按钮实现方式) ,至于分享的界面也和小程序内部有所不同,详情见下图(找了一个拼多多的案例),点击右下角的前往小程序则会前往当前浏览的小程序界面,(例如浏览的商品详情页则直接跳转到详情页,对应的参数是支持我们带参的)

 

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>