置顶#小程序云开发挑战赛#-云线名片-跨界王者精选热门

2020-09-19

5869浏览

0评论

跨界王者团队参加小程序云开发挑战赛的系统介绍文章。文章主要介绍了云线名片小程序产品设计思路和开发设计思路等。

一、应用场景

云线名片适合所有需要交换名片的场景。

在互联网时代到来之前，名片多是纸质形态，以印刷技术填充上个人的信息，作为与陌生人第一次会面时的破冰行为。

然而，这种形态的名片缺点也比较明显，需印刷、经常忘带、难保存、易丢失、信息容量很小等等都是我们日常生活中经常听到遇到的问题。

移动互联网给我们的生活带来了翻天覆地的变化，名片类的APP产品开始萌芽，需要双方同时下载了同一款APP，否则就不能完成完整的完成交换。

一直到微信小程序出现，名片应用终于有了最合适的土壤。基于微信聊天框的交换名片流程即满足了用户需求又完全符合产品的增长模型。

（小程序名片产品增长模型）

新加好友，打个招呼，都可以直接发送小程序名片。不仅是个人信息，连公司信息、项目介绍、合作意向、发票信息等等（目前仅实现个人信息的编辑）都可以一键发送。精心制作的云线名片瞬间让人眼前一亮，别出心裁。只要对方有微信就可以互相交换名片，即使没有使用过这个产品也可以在30秒内完成制作并回发给对方。

二、目标用户

所有人都有交友需求，都可能需要使用名片打一个漂亮的招呼。

当然，核心用户还是从事销售、保险、公关等行业的职场人士。

三、实现思路

云线名片使用微信小程序原生开发，实现逻辑本身比较简单，用户编辑名片信息更新到云开发后台，分享出去后其他用户可以根据分享链接中的名片ID查询到名片信息。

由于本人平时工作较忙，也不做小程序开发这一块儿。于是设计了这个能覆盖本次比赛要求（云函数、云数据库、云调用、静态资源托管能力）的最小可行性产品（MVP）。每一个项目都应该从MVP起步，再逐渐丰满成长，也符合互联网产品的发展之道。

四、产品设计图

1、产品的业务流程如下图所示：

（云线名片核心业务流程）

点击别人分享的名片可以进入到云线名片小程序，可以浏览名片信息或直接与之联系，也可以再分享给其他人。

点击左上角的小房子图标，可以进入到自己的名片，如果没有创建名片，则会提示创建。

编辑完成并保存提交后，可以将自己的名片再分享给朋友，完成名片交换。

目前由于时间关系只完成了以上功能，后续马上需要完成名片管理，可以整理并快速找到自己收到的名片。

2、产品原型图如下：

（云线名片产品原型图）

3、产品未来展望

该产品其实可以继续做下去，身边很多朋友包括我自己都有这个需求。未来首先要加上名片管理功能，然后添加更多可以交换的信息，添加不同的主题，以及优化交换流程。随着用户量的增加，可以沉淀很多用户数据产生价值。产品本身的活跃度不高，不太可能产生流量价值。但是可以给一些用户做个性化定制，或者发布一些收费主题，产生盈利。

五、架构图

（云线名片系统架构图）

整个系统架构从上到下分为四层。

小程序端部分：

1、页面（Pages）：最上层是用户界面。只需要两个页面即可完成全部业务需求，别人的名片和自己的名片共用【个人名片页】，根据传入的cardId做区分。

2、工具库（Utils）：相当于网络层，将云函数访问、云数据库访问和云存储上传分封装，便于页面层使用。另外一个日志工具主要是方便上线时一键关闭日志。

云服务端部分：

3、接口（Apis）：根据业务需求，总共封装了六个接口。为什么最常用的获取名片信息却未通过云函数实现？主要考虑是该功能虽然常用，但是非常简单，只是单表查询，直接使用前端访问云数据库效率更高。并且作为查询接口，无需权限校验等。其他可能影响数据数据变更的接口都校验了用户。

4、数据库（Collections）：在传统数据库中这个被称作Tables，而小程序开发使用了前端开发更容易理解的概念“数据集合”，真是非常nice。因为时间仓促，有的集合的命名不够贴切（用户信息表，其实应该是名片信息表），却来不及调整，大家请多包涵。

六、效果图

（云线名片效果图）

七、部分代码

由于产品比较简单，业务代码也没什么难点，就只贴出我封装的工具库代码供大家批评指正了。

下面是调用云函数的代码封装：

// 调用云函数
// opt支持以下参数：
// showLoading，是否展示加载框，默认 true
// name，要调用的函数名
// data，调用函数的请求参数
// success，请求成功的回调，response.ok 为 true 时才认为成功，并返回 response.data
// fail，请求失败的回调，云函数调用失败时返回 err.description，response.ok 为 false 时返回 response.msg
var callFunction = function (opt) {

  Log.log('[云函数调用] :', opt)

  // 默认展示加载框
  if (opt.showLoading == null) {
    opt.showLoading = true
  }

  if (opt.showLoading) {
    wx.showLoading()
  }
  wx.cloud.callFunction({
    name: opt.name || '',
    data: opt.data,
    success: res => {
      if (opt.showLoading) {
        wx.hideLoading()
      }
      Log.log(`[云函数] [${opt.name}] 调用成功：`, res.result)
      if (res.result.ok) {
        if (opt.success) {
          opt.success(res.result.data)
        }
      } else {
        if (opt.fail) {
          opt.fail(res.result.msg)
        }
      }
    },
    fail: err => {
      if (opt.showLoading) {
        wx.hideLoading()
      }
      Log.error(`[云函数] [${opt.name}] 调用失败：`, err)
      if (opt.fail) {
        opt.fail(err.description)
      }
    }
  })
}

module.exports = {
  callFunction
}

使用也比较简单，以点赞操作为例，代码片段为：

  praise: function () {
    const userId = this.data.userId
    const cardId = this.data.cardId

    if (userId.length == 0 || cardId.length == 0) return

    // 调用云函数
    Cloud.callFunction({
      name: 'praise',
      data: {
        visitor: userId,
        master: cardId
      },
      success: res => {
        // 记录成功，刷新社交信息
        Log.log('res: ', res)
        this.getSocialData()

        Util.showToast('干得漂亮！也分享名片给其他好友吧。')
      },
      fail: err => {
        Log.error('err: ', err)
        Util.showToast(err)
      }
    })
  },