巧用云调用，实现【共享名片夹】小程序

原创： 锋少

1、前言

从一个较早的小程序开发者到第一批使用小程序·云开发的开发者，这期间一直在关注关于小程序各方面的更新，同时也用小程序·云开发作了几款产品，其中包括上次分享的随手记Lite小程序，比较上次，此次分享的技术点相对更加全面和实用一些。

涉及的技术点有：

• 数据上传、数据更新、分页读取、数据删除，AI智能名片识别读取。
• 单图上传、多图上传，图片URL获取，带参小成码生成。
• 下发模板消息，云调用使用。

2、主要功能

• 建立电子名片：信息存储，图片上传，名片读取（AI智能名片识别）
• 转发电子名片：专属名片海报（带参小程序码生成）
• 电子名片被访问：下发模板消息（云调用）

3、功能实现

3.一、准备工做

一、注册微信小程序帐号：

方式一：直接注册（mp.weixin.qq.com/wxopen/ware…

方式二：已经有微信公众号（已认证）朋友能够直接【登陆公众号】 -> 【小程序管理】 -> 【添加】->【快速注册并认证小程序】，注册完成后，找到小程序的 AppID和 AppSecret

二、下载微信开发者工具、建立项目 ，打开开发者工具，键入项目目录、项目名称、刚才的 AppID，此时项目建立成功，而后点击开发者工具上方的【云开发】开通云开发。

3.2功能实现一：【建立电子名片】

信息存储，图片上传，名片读取（AI智能名片识别）

1.功能简要描述

对于一个名片的小程序，第一步确定是建立电子名片，除此以外，能够用传统信息录入的方式建立名片，同时也支持纸质名片的识别读取，快速建立名片，这里本地须要导入 mapping.js框架，接下来以纸质名片识别为例。

2.核心代码

// 上传名片后获取零时连接
  getTempFileURL() {
    wx.cloud.getTempFileURL({
      fileList: [{
        fileID: this.data.fileID,
      }],
    }).then(res => {
      console.log('获取成功', res);
      if (res.fileList.length) {
        this.setData({
          coverImage: res.fileList[0].tempFileURL
        }, () => {
          this.parseNameCard();
        });
      } else {
        Toast('获取图片地址失败');
      }
    }).catch(err => {
      Toast('获取图片地址失败');
    });
  },
  // 读取名片
  parseNameCard() {
    wx.cloud.callFunction({
      name: 'parseCard',
      data: {
        url: this.data.coverImage
      }
    }).then(res => {
      if (res.result.data.length == 0) {
        Toast('解析失败，请上传【纸质名片】或【手动建立】');
        return;
      }
      let data = this.transformMapping(res.result.data);
      wx.setStorageSync("parseCardData", data)
      Toast('解析成功');
    }).catch(err => {
      console.error('解析失败，请上传【纸质名片】或【手动建立】', err);
      Toast('解析失败，请上传【纸质名片】或【手动建立】');
    });
  },

  // 名片数据解析
  transformMapping(data) {
    let record = {};
    let returnData = [];
    data.map((item) => {
      let name = null;
      if (mapping.hasOwnProperty(item.item)) {
        name = mapping[item.item];
        // 写入英文名
        item.name = name;
      }
      return item;
    });
    // 过滤重复的字段
    data.forEach((item) => {
      if (!record.hasOwnProperty(item.item)) {
        returnData.push(item);
        record[item.item] = true;
      }
    });
    return returnData;
  },
复制代码

3.3功能实现二：【转发电子名片】

专属名片海报（带参小程序码生成）

1.功能简要描述：转发电子名片有两种方式。

1.以小程序的形式直接转发给好友或微信群。 2.生成专属名片海报分享到朋友圈长按进入对应的电子名片页面。名片海报上除了有对应用户的姓名以外，还有专属的名片小程序码，效果以下：

2.核心代码

const cloud = require('wx-server-sdk')
const axios = require('axios')
var rp = require('request-promise');
cloud.init()

// 云函数入口函数，小程序端传过来页面和名片id
exports.main = async (event, context) => {
  console.log(event)
  try {
    const resultValue = await rp('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret')
    const token = JSON.parse(resultValue).access_token;
    const response = await axios({
      method: 'post',
      url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit',
      responseType: 'stream',
      params: {
        access_token: token,
      },
      data: {
        page: event.page,
        width: 300,
        scene: event.id,
      },
    });

    return await cloud.uploadFile({
      cloudPath: 'xcxcodeimages/' + Date.now() + '.png',
      fileContent: response.data,
    });
  } catch (err) {
    console.log('>>>>>> ERROR:', err)
  }
}
复制代码

3.4功能实现三：【电子名片被访问】

下发模板消息（云调用）

1.功能简要描述

用户名片被访问的时候，用户者会收到【客户来访提醒】的模板消息，同时提醒用户完善名片信息。

2.核心代码

const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.templateMessage.send({
      touser: event.toUser,
      page: "pages/index/index",
      data: {
        keyword1: {
          value: event.visitDate
        },
        keyword2: {
          value: "刚刚有人深度访问了您的名片，常常完善名片信息，更容易被查找和访问。"
        },
      },
      templateId: 'templateId',
      formId: event.formId,
    })
    return result
  } catch (err) {
    throw err
  }
}
复制代码

4、总结

和传统的小程序 + WEB后台开发模式比起来，云开发在精力和人力上真的是节省了不少，这能使开发者将大部分精力和时间放到功能的开发上。 云开发上线时间不算太长，但逐步有新的功能开放出来，好比云控制台数据的导入导出、云调用等，但愿小程序·云开发开放出更多的接口和功能......

5、项目预览