虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

小程序因为传播快,易分享,现已经成为各大小公司的标配,从曾今你有公众号么,变为你有小程序么?可想而知小程序的火爆程度

那么在小程序中,如何生成小程序码?虽然小程序目前可以分享到朋友圈了的,但小程序码的传播无论是直接分享给好友,还是作为图片分享,或是作为线下扫码入口,都是引流的一种重要的入口

实例效果

（点击长按识别扫码）

具体实现

小程序端代码,在view元素上绑定事件

<view bindtap="onViewTap">小程序码</view>

小程序端逻辑代码

Page({
  data: {},
  // 绑定的点击事件函数
 >在小程序端就上面几行代码

 
云函数端实现代码
 
在cloudFunctions文件夹下创建getQrCode云函数,会默认创建config.json,index.js,package.json三个文件
 
其中config.json内为
 
{
  "permissions": {
    "openapi": [
      "wxacode.getUnlimited"
    ]
  }
}

 
上面的是利用wxacode.getUnlimited生成小程序码的配置,这个配置是固定的
 
而index.js中如下代码
 
// 云函数入口文件
const cloud = require('wx-server-sdk');

cloud.init();

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext(); // 获取上下文
  const result = await cloud.openapi.wxacode.getUnlimited({
    // 调用生成小程序码的接口，携带一些参数,例如:scene
    scene: wxContext.OPENID,
  });
  // console.log(result)
  const upload = await cloud.uploadFile({
    // 生成的小程序码上传到云存储中
    cloudPath: 'qrcode/' + Date.now() + '-' + Math.random() + '.png', // 生成的小程序码存储到云存储当中去，路径
    fileContent: result.buffer,
  });
  return upload.fileID; // 返回文件的fileID,也就是该图片
};

 
生成小程序码就是上面几行简单的云函数代码就可可以实现,主要是利用wxacode.getUnlimited这个接口
 
获取小程序码，适用于需要小程序码数量极多的业务场景。通过该接口生成的小程序码，永久有效，数量暂无限制
 
相关文档
 
wxacode.getUnlimited 小程序码生成接口文档
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html
cloud.uploadFile 本地资源上传至云存储
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/server.uploadFile.html
 
结语
 
在小程序中生成小程序码有两种方式:一种是https调用,另一种是云调用,在本文中就是使用的云调用最为简单,免去了获取access_token,免鉴权
 
在小程序端发起请求生成小程序码的云函数,云函数端借用云调用根据wxcode.getUnlimited这个接口生成小程序码,然后上传到云存储中,返回云存储中的图片的fileID,在小程序端就可以拿到云函数端返回fileID,根据这个fileID把小程序码展示出来
 
如遇到小程序码问题,也欢迎小伙伴们下方留言,一起学习探讨~
 

 
记账就用轻记账
 

 


 
公众号（ID：itclanCoder）
 
码能让您早脱菜籍，文能让您洗净铅华
 
  可能您还想看更多：
 

 
Js篇-面试题14-JavaScript 中的 window.onload 事件和 jQuery 的 ready 函数有何区别
 


 
Js篇-面试题12-如何解析 URL 提取 params 参数
 


 
Js篇-面试题11-比较下for..of与for..in的区别
 

 
Js篇-面试题9-请说一下Js中的事件循环机制
 

 
vuepress建站过程中遇到的一些问题