社区/文章分享/巧用云调用,实现【共享名片夹】小程序|技术分享

巧用云调用,实现【共享名片夹】小程序|技术分享

一、前言

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

涉及的技术点有:

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

二、主要功能

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

三、功能实现

3.1、准备工作

1、注册微信小程序账号:

方式一:直接注册(https://mp.weixin.qq.com/wxopen/waregister?action=step1
方式二:已经有微信公众号(已认证)朋友可以直接【登录公众号】 -> 【小程序管理】 -> 【添加】->【快速注册并认证小程序】,注册完成后,找到小程序的 AppID 和 AppSecret

2、下载微信开发者工具、创建项目 ,打开开发者工具,键入项目目录、项目名称、刚才的 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
  }
}

四、总结

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