专栏首页小程序·云开发专栏巧用云调用,实现【共享名片夹】小程序
原创

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

原创: 锋少

一、前言

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

五、项目预览

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [mini-blog]基于云开发的博客小程序诞生

    对于完全依赖云开发的博客来说,文章的发布还是比较麻烦的,毕竟不能在小程序上直接写文章吧,效率太低,所以我利用公众号作为的文章数据源,利用云函数写了个定时同步的方...

    Bug生活2048
  • 聚焦“云开发圆桌论坛”,大前端Serverless专家们释放了这些讯号!

    4月14日,由云加社区举办的TVP&腾讯云技术交流日云开发专场,暨"腾讯云-云开发圆桌论坛"在北京、深圳两地同步举行。

    TVP官方团队
  • 为什么 TCP 建立连接是三次握手,关闭连接确是四次挥手呢?

    我们知道网络层,可以实现两个主机之间的通信。但是这并不具体,因为,真正进行通信的实体是在主机中的进程,是一个主机中的一个进程与另外一个主机中的一个进程在交换数据...

    Java技术栈
  • [博客小程序]评论通知功能实现(一)——小程序发送模板消息的几种实现

    准备的话就是先读下文档,了解下模板消息怎么发送和怎么接入的,然后到你的后台去选择你想要的消息模板,记录好对应的模板ID即可。

    Bug生活2048
  • 假期为啥不用加班,因为小程序云开发上线了这个功能!

    开发阿杰早在假期前就计划好了和女友的巴厘岛之旅,也提前订好了机票。可偏偏就在放假前一天,因公司接待需要得紧急上线一个访客预约的小程序解决自主预约及访客通知的需求...

    腾讯云开发TCB
  • 从前端到全栈

    从两个维度去分析前端的技术发展,一个维度是前端复杂度,具体来讲就是前端在解决创建应用复杂度方面做的一些事情;另一个是从广度层面看前端做的事情, 这两个维度构成了...

    腾讯云开发TCB
  • 聚焦“云开发圆桌论坛”,大前端Serverless大佬们释放了这些讯号!

    4月14日,由云加社区举办的TVP&腾讯云技术交流日云开发专场,暨"腾讯云-云开发圆桌论坛"在北京、深圳两地同步举行。

    腾讯云开发TCB
  • 自己动手实现OkHttp

    在Android、Java开发领域中,相信大家都听过或者在使用Square家大名鼎鼎的网络请求库:OkHttp ,当前多数著名的开源项目如 Fresco、Gli...

    Android技术干货分享

扫码关注云+社区

领取腾讯云代金券