巧用雲調用，實現【共享名片夾】小程序

時間 2019-12-06

標籤巧用調用實現共享名片夾程序简体版

原文原文鏈接

原創：鋒少javascript

1、前言

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

涉及的技術點有：ios

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

2、主要功能

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

3、功能實現

3.一、準備工做

一、註冊微信小程序帳號：axios

方式一：直接註冊（mp.weixin.qq.com/wxopen/ware…小程序

方式二：已經有微信公衆號（已認證）朋友能夠直接【登陸公衆號】 -> 【小程序管理】 -> 【添加】->【快速註冊並認證小程序】，註冊完成後，找到小程序的 AppID和 AppSecret微信小程序

二、下載微信開發者工具、建立項目，打開開發者工具，鍵入項目目錄、項目名稱、剛纔的 AppID，此時項目建立成功，而後點擊開發者工具上方的【雲開發】開通雲開發。api

3.2功能實現一：【建立電子名片】

信息存儲，圖片上傳，名片讀取（AI智能名片識別）

1.功能簡要描述

對於一個名片的小程序，第一步確定是建立電子名片，除此以外，能夠用傳統信息錄入的方式建立名片，同時也支持紙質名片的識別讀取，快速建立名片，這裏本地須要導入 mapping.js框架，接下來以紙質名片識別爲例。xcode

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.生成專屬名片海報分享到朋友圈長按進入對應的電子名片頁面。名片海報上除了有對應用戶的姓名以外，還有專屬的名片小程序碼，效果以下：promise

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
  }
}
複製代碼