巧用云调用，实现【共享名片夹】小程序-深蓝源码网

时间: 2020-09-03 00:08:26 人气: 2277 评论: 0

原创：锋少

一、前言

从一个较早的小程序开发者到第一批使用小程序·云开发的开发者，这期间一直在关注关于小程序各方面的更新，同时也用小程序·云开发做了几款产品，其中包括上次分享的随手记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后台开发模式比起来，云开发在精力和人力上真的是节省了很多，这能使开发者将大部分精力和时间放到功能的开发上。云开发上线时间不算太长，但逐步有新的功能开放出来，比如云控制台数据的导入导出、云调用等，希望小程序·云开发开放出更多的接口和功能......

五、项目预览

深蓝源码网-一个分享互联网精品资源的网站！-www.69shenlan.com

技术沙龙教程文章热点综合

分享链接