2行代码实现小程序直接分享到微信朋友圈功能

2020年09月02日/ 浏览 102

期盼已久的小程序直接分享到朋友圈的功能,官方终于支持了。今天就来带大家实现小程序分享到朋友圈的功能。代码很简单。

老规矩,以图为证
新加分享到朋友圈的按钮

1111.png

分享到朋友圈的效果
1113.png

分享成功

1112.png

打开朋友圈分享链接后的效果
1115.png

可以看到底部有个前往小程序,这样我们就可以在朋友圈里直接打开小程序了。

是不是很激动,接下来就教大家如何实现小程序分享到朋友圈的功能吧。

小程序分享到朋友圈的代码编写

或许你都想象不到,小程序分享到朋友圈真是太简单了。只需要下面这几行代码,并且这几行代码是小程序页面的默认配置。

//第一步:设置可被分享
onShareAppMessage: function (res){
    return {title:'我是传统分享的标题'}
},
//第二步:设置分享到朋友圈的标题
onShareTimeline:function (res){
    return {
        title:'转发到朋友圈'
        query:'我是携带参数'
    }
},

onShareAppMessage是我们默认就有的配置,也就是onShareTimeline是我们新加的,其实你只要配置好onShareTimeline这段代码,就可以轻松的实现小程序分享到朋友圈功能了。

来看下官方的文档

其实小程序分享到朋友圈只需要满足下图红色框里的两个条件。

而这两个条件很好满足,就是我们这两行代码

注意点

还有一点要注意的,就是我们要想使用小程序分享到朋友的功能,必须
1,使用最新版的开发者工具
2,使用最新版的调试库

到这里我们就轻松的实现小程序分享到朋友圈的功能了,赶紧给你的小程序添加这个功能吧。

请自行测试吧~!

如果不能分享,本人在这里提供另一个版本的代码,需要的回复下载。

[hide]

 onShareAppMessage: function () {
        return {
          title: this.data.shop.name,    //自定义标题   string
          path: `/pages/store/store?id=${this.data.shop.shop_id}`  //这个地址需要把页面路径拼接的参数发送出去,直写页面地址的话,别人进入会是空的页面
        }
      },
      onShareTimeline: function(res){
        let img = this.data.path_image+this.data.shop.shop_img  //取得是每个店铺的图和店铺名称
        console.log(img)
        return {
          title: this.data.shop.name, //字符串  自定义标题
          query: `id=${this.data.shop.shop_id}`,  //页面携带参数
          imageUrl:img   //图片地址
        }
      },

[/hide]

picture loss