前言

之前写了《情侣券 v2.0 版本迭代思考》的产品思考接下来，我来分享下里面用的开源组件。

案例

1. 裁剪组件

使用场景

1. 首页自定义图片
   
2. 自定义卡券背景
   
3. 自定义分享图
   

使用流程

1. 先在触发页面调用选择图片API

wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        let tempPath = res.tempFilePaths[0];
        wx.navigateTo({
          url: '/pages/cropper/cropper?action=home&src=' + tempPath,
        })
      }
    })

2. 选择完成之后把图片地址传递到截图页面

onLoad: function (options) {
    this.cropper = this.selectComponent("#image-cropper");
    this.cropper.pushImg(options.src)
  }

3. 截图后把截图地址回传到触发页面进行上传替换。

submit() {
    this.cropper.getImg((obj) => {
      app.globalData.imgSrc = obj.url;
      console.log('obj.url', obj.url)
      wx.navigateBack({
        delta: -1
      })
    });
  }

组件地址

https://github.com/wx-plugin/image-cropper

2. 日历组件

使用场景

我们的回忆模块

使用时候直接把数据处理成组件需要的格式就好了。

风格支持

组件地址

https://github.com/treadpit/wx_calendar

3. 海报组件

使用场景

记录完成之后的分享海报功能。

海报json

this.setData({
        imgDraw: {
          width: '750rpx',
          height: '1334rpx',
          background: '背景图地址',
          views: [
            {
              type: 'image',
              url: 卡券背景图地址,
              css: {
                top: '393rpx',
                left: '40rpx',
                width: '670rpx',
                height: '240rpx',
                borderRadius: '16rpx'
              },
            },
            {
              type: 'text',
              text: 卡券标题,
              css: {
                top: '440rpx',
                left: '100rpx',
                align: 'left',
                fontSize: '40rpx',
                color: 标题文字颜色
              }
            },
            {
              type: 'text',
              text: 卡券介绍,
              css: {
                top: '520rpx',
                left: '100rpx',
                align: 'left',
                fontSize: '26rpx',
                color: 介绍文字颜色
              }
            },
            {
              type: 'image',
              url: 头像A地址,
              css: {
                top: '75rpx',
                left: '190rpx',
                width: '120rpx',
                height: '120rpx',
                borderWidth: '2rpx',
                borderColor: '#FAC0BE',
                borderRadius: '60rpx'
              }
            },
            {
              type: 'image',
              url: '爱心图片地址',
              css: {
                top: '102rpx',
                left: '322rpx',
                width: '108rpx',
                height: '65rpx',
              }
            },
            {
              type: 'image',
              url: 头像B地址,
              css: {
                top: '75rpx',
                left: '441rpx',
                width: '120rpx',
                height: '120rpx',
                borderWidth: '2rpx',
                borderColor: '#FAC0BE',
                borderRadius: '60rpx'
              }
            },
            {
              type: 'text',
              text: 用户A昵称 +'与'+ 用户B昵称 +'的美好回忆',
              css: {
                top: '253rpx',
                left: '375rpx',
                maxLines: 1,
                align: 'center',
                fontWeight: 'bold',
                fontSize: '36rpx',
                color: '#2A2A2A'
              }
            },
            {
              type: 'text',
              text: 用户A昵称 +'使用了'+ 用户B昵称 +'制作的'+卡券标题+'，并留下记录。',
              css: {
                top: '317rpx',
                left: '375rpx',
                maxLines: 1,
                align: 'center',
                fontWeight: 'bold',
                fontSize: '26rpx',
                color: '#F58C98'
              }
            },
            {
              type: 'image',
              url: 小程序码地址,
              css: {
                top: '674rpx',
                left: '283rpx',
                width: '184rpx',
                height: '184rpx'
              }
            },
            {
              type: 'text',
              text: '长按识别小程序码  围观TA的甜蜜时刻',
              css: {
                top: '882rpx',
                left: '375rpx',
                width: '216rpx',
                align: 'center',
                fontSize: '24rpx',
                color: '#2A2A2A'
              }
            }
          ]
        }
      })
    },

详细介绍

《生成海报很复杂？有它轻松搞定！》

4. 导航组件

使用场景

每一个页面的导航。

详细介绍

《自定义导航栏开源库》

总结

好的轮子能够帮助我们剩下不少的时间。
后续我会分享更多实用组件的案例给到大家。