评论

情侣券 v2.0 使用的 4 款开源组件

超级的实用组件推荐

前言

之前写了《情侣券 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,
        })
      }
    })
  1. 选择完成之后把图片地址传递到截图页面
onLoad: function (options) {
    this.cropper = this.selectComponent("#image-cropper");
    this.cropper.pushImg(options.src)
  }
  1. 截图后把截图地址回传到触发页面进行上传替换。
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. 导航组件

使用场景

每一个页面的导航。

详细介绍

《自定义导航栏开源库》

总结

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

最后一次编辑于  11-06  
点赞 4
收藏
评论

2 个评论

  • xplee
    xplee
    11-06

    日历组件的地址是什么?好像贴错了

    11-06
    赞同
    回复 1
    • 陈宇明
      陈宇明
      11-06
      感谢提醒,已更正
      11-06
      回复
  • brave
    brave
    11-05

    很棒!期待更多好的分享!

    11-05
    赞同
    回复 1
    • 陈宇明
      陈宇明
      11-05
      谢谢认可,我会继续努力的
      11-05
      回复
登录 后发表内容