# 萤火虫商城微信小程序分享到朋友圈

**Repository Path**: e_01/goods_WWechat_Moments

## Basic Information

- **Project Name**: 萤火虫商城微信小程序分享到朋友圈
- **Description**: 实现微信小程序分享到朋友圈
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-06-22
- **Last Updated**: 2021-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



替换index.js就可以



微信最近开放了微信小程序分享到朋友圈的接口。
目前此功能没有完全放开，需微信安卓[7.0.16版本](https://dldir1.qq.com/weixin/android/weixin7016android1700_arm64.apk)才支持，灰度测试 ,iOS版本暂不支持。

想让小程序提供“分享到朋友圈”的功能，小程序端需要通过调用[wx.showShareMenu](https://developers.weixin.qq.com/miniprogram/dev/api/share/wx.showShareMenu.html) 这个api，支持此功能，具体的操作步骤如下：
# 1.设置“调试基础库”的版本

[wx.showShareMenu](https://developers.weixin.qq.com/miniprogram/dev/api/share/wx.showShareMenu.html) api支持分享朋友圈的功能参数“`menus`”需要基础库2.11版本以上，因此首先在微信小程序开发工具里设置基础库为2.11版本以上

![image](https://images.gitee.com/uploads/images/2020/0731/075941_db07dcd7_902699.png)

设置完成后，在点击小程序右上角的三个点，会出现“分享到朋友圈”的按钮，不过是灰色的，无法触发。

不得不说朋友圈的入口才是最大的流量池。

![image.png](https://images.gitee.com/uploads/images/2020/0731/075941_05add785_902699.png)

具体代码实现功能（供参考）
首先最简单的就是使用小程序的生命函数

~~~
 onLoad() {
   //直接写入这里监听
wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
  },
~~~
这样写的话会默认分享的时候是小程序的logo和小程序的主页。


那我们也可以这样监听
~~~
 /**
   * 分享当前页面
   */
  onShareAppMessage: function() {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
  },
  //用户点击右上角分享朋友圈
  onShareTimeline: function () {
      let _this = this;
      // 构建页面参数
      let params = App.getShareUrlParams({
        'goods_id': _this.data.goods_id
      });
    return {
//titile就是分享名称  query为分享进入链接，imageurl就是图片相对获取就可以
      title: _this.data.detail.goods_name,
      query: {
        key: "/pages/goods/index" +  _this.data.detail.goods_id
      },
      imageUrl: _this.data.detail.goods_image,
    }
  },
~~~

效果：

![image.png](https://images.gitee.com/uploads/images/2020/0731/075941_27eb148a_902699.png)
![image.png](https://images.gitee.com/uploads/images/2020/0731/075941_d102015d_902699.png)
![image.png](https://images.gitee.com/uploads/images/2020/0731/075941_7cbe9819_902699.png)













#附赠一个解决分类过长导致diy图片不好的
修改
pages/category/index/index.wxss
第144行左右 
.cate-cont-box text {
  text-align: center;
  display: block;
  font-size: 26rpx;
  padding-bottom: 14rpx;
  color: #444;
  padding: 0 15rpx 30rpx 15rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;/*设置 需要显示的行数*/
}

原来：
![输入图片说明](https://images.gitee.com/uploads/images/2020/0824/170605_ad7fa590_902699.png "屏幕截图.png")


解决后
![输入图片说明](https://images.gitee.com/uploads/images/2020/0824/170641_9eee6406_902699.png "屏幕截图.png")