原創： 鋒少

一、前言

從一個較早的小程序開發者到第一批使用小程序·云開發的開發者，這期間一直在關注關于小程序各方面的更新，同時也用小程序·云開發做了幾款產品，其中包括上次分享的隨手記Lite小程序，比較上次，這次分享的技術點相對更加全面和實用一些。

涉及的技術點有：

• 數據上傳、數據更新、分頁讀取、數據刪除，AI智能名片識別讀取。
• 單圖上傳、多圖上傳，圖片URL獲取，帶參小成碼生成。
• 下發模板消息，云調用使用。

二、主要功能

• 創建電子名片：信息存儲，圖片上傳，名片讀取（AI智能名片識別）
• 轉發電子名片：專屬名片海報（帶參小程序碼生成）
• 電子名片被訪問：下發模板消息（云調用）

三、功能實現

3.1、準備工作

1、注冊微信小程序賬號：

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

方式二：已經有微信公眾號（已認證）朋友可以直接【登錄公眾號】 -> 【小程序管理】 -> 【添加】->【快速注冊并認證小程序】，注冊完成后，找到小程序的 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后臺開發模式比起來，云開發在精力和人力上真的是節省了很多，這能使開發者將大部分精力和時間放到功能的開發上。 云開發上線時間不算太長，但逐步有新的功能開放出來，比如云控制臺數據的導入導出、云調用等，希望小程序·云開發開放出更多的接口和功能......

五、項目預覽

轉載于:https://juejin.im/post/5ccea04f6fb9a031fc63c189

總結

以上是生活随笔為你收集整理的巧用云调用，实现【共享名片夹】小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。