云开发·云调用生成小程序码

栏目: 编程工具 · 发布时间: 5年前

内容简介:小程序云开发已经支持云调用,开放了很多接口,一直想要的获取小程序码也支持了。这下轻量的小程序也可以有自定义小程序码的功能。获得一个带参数的小程序码,传播出去以后,用户扫码进入指定页面,根据参数做不同的处理。本文只讲小程序码生成、存储、展示部分。参数处理不多介绍,可以查看新建小程序可以从开发工具的云开发模板初始化项目,根据

小程序云开发已经支持云调用,开放了很多接口,一直想要的获取小程序码也支持了。这下轻量的小程序也可以有自定义小程序码的功能。

1. 需求

获得一个带参数的小程序码,传播出去以后,用户扫码进入指定页面,根据参数做不同的处理。本文只讲小程序码生成、存储、展示部分。参数处理不多介绍,可以查看 项目代码 了解更多。

2. 开通云开发

新建小程序可以从开发 工具 的云开发模板初始化项目,根据 云开发操作指引 新建项目即可。

但是这里有个问题,已发布小程序的页面才能生成小程序码。如果现有的小程序没有开通云开发,需要做以下几步:

  1. 开发工具开通云开发,设定云开发的环境;
  2. 将原来的代码(除了 project.config.json 以外的所有文件)放到新建的 miniprogram 目录;
  3. 新增 cloudfunctions 目录;
  4. app.json 新增配置 "cloud": true
  5. project.config.json 配置 "miniprogramRoot":"miniprogram/""cloudfunctionRoot":"cloudfunctions/"
  6. 修改小程序基础库版本,最低要 2.3.0 "libVersion": "2.3.0"

3. 生成小程序码

下面可以开始写代码开发了,开始之前,建议先看完官方教程。特别是开发工具的使用步骤,开发和调试时如果遇到奇怪的问题,可以尝试重启开发工具、重装开发工具,也可以去 微信开放社区 发帖。(重启和重装都是我在社区中发现的答案,能解决各种不应该存在的问题)。

3.1 准备文件

cloudfunctions 目录右键 新建Node.js云函数 getqr

生成小程序码需要单独指定权限。在 getqr 目录新建 config.json ,里面写以下内容:

{
  "permissions": {
    "openapi": [
      "wxacode.getUnlimited"
    ]
  }
}

小程序码的获取方式有三种,这里只用到了接口 getUnlimited,选择这个接口的原因是漂亮的圆形小程序码,数量无限制。具体区别可以去 获取小程序码官方文档 查看详情。

正常情况下,这个时候云函数可以部署测试了。如果遇到部署不成功、各种权限问题,可以尝试本地部署上传所有文件、重启试试。

3.2 生成小程序码

生成小程序码的代码如下,可以指定页面和页面参数 scene ,还有小程序码的尺寸。

注意这里的 scene 有限制:

1. 最大32个可见字符;

2. 只支持数字,大小写英文以及部分特殊字符: !#$&'()*+,/:;=?@-._~

3. 注意参数格式:下面实例代码生成小程序码后,扫码获得 pages/demo/demo?scene=id%3D6

try {
  const result = await cloud.openapi.wxacode.getUnlimited({
    page: 'pages/demo/demo',
    scene: 'id=6',
    width: 240,
  })
  console.log(result)
  return result
} catch (err) {
  console.log(err)
  return err
}

直接调用,比服务端调用少了 access_token 参数。

3.3 上传到云存储

返回值中的 buffer 就是图片内容,直接上传到云存储:

const uploadResult = await cloud.uploadFile({
  cloudPath: 'shareqr/' + qr_name_hash + '.jpg',
  fileContent: result.buffer,
});
  • 我在云存储新建了 shareqr 目录保存小程序码;
  • 图片名根据参数取md5摘要;
  • getUnlimited 返回的图像是 jpeg 格式,后缀硬编码写 .jpg

3.4 获取图片临时路径

直接上代码

getURLReault = await cloud.getTempFileURL({
  fileList: [uploadResult.fileID]
});
fileObj = getURLReault.fileList[0]
return fileObj

3.5 直接从存云存储获取

生成过以后图片已经保存在云存储,用同样的参数第二次调用没必要再生成一次,去掉一次网络请求,可以节省不少时间。

前面说到文件名使用请求参数摘要,知道了目录和文件名,再加上文件bucket前缀就可以拼出来 fileID ,用 fileID 可以查询云存储的文件。

比如我刚刚生成的 fileID 是 cloud://dev-xxxx.8888-dev-xxxx/qr/44ea42f05091c3bec771123e6e8cd4c2.jpg , 前缀就是 cloud://dev-xxxx.8888-dev-xxxx/ 。再拼上目录、文件名、后缀就是 fileID

注:此处的 fileID 拼接方法并不是来自官方文档,只是在使用中发现这个前缀不会变。还需要官方解释说明 fileID 规则。

如果会改变,就需要再用云数据库存储 fileID ,更麻烦一些。

3.6 云函数完整代码

const full_path = event.page + '?' + event.scene;
  const qr_name_hash = crypto.createHash('md5').update(full_path).digest('hex');
  const temp_id = bucketPrefix + qr_name_hash + '.jpg';


// 云函数入口函数
exports.main = async (event, context) => {
  const full_path = event.page + '?' + event.scene;
  const qr_name_hash = crypto.createHash('md5').update(full_path).digest('hex');
  const temp_id = bucketPrefix + qr_name_hash + '.jpg';
  // return {
  //   full_path,
  //   qr_name_hash,
  //   temp_id
  // }

  try {
    // 先尝试获取文件,存在就直接返回临时路径
    let getURLReault = await cloud.getTempFileURL({
      fileList: [temp_id]
    });
    // return getURLReault;
    let fileObj = getURLReault.fileList[0];
    if (fileObj.tempFileURL != '') {
      fileObj.fromCache = true;
      return fileObj;
    }

    // 生成小程序码
    const wxacodeResult = await cloud.openapi.wxacode.getUnlimited({
      scene: event.scene,
      page: event.page,
      width: 240
    })
    // return wxacodeResult;
    if (wxacodeResult.errCode != 0) {
      // 生成二维码失败,返回错误信息
      return wxacodeResult;
    }

    // 上传到云存储
    const uploadResult = await cloud.uploadFile({
      cloudPath: 'qr/' + qr_name_hash + '.jpg',
      fileContent: wxacodeResult.buffer,
    });
    // return uploadResult;
    if (!uploadResult.fileID) {
      //上传失败,返回错误信息
      return uploadResult;
    }

    // 获取图片临时路径
    getURLReault = await cloud.getTempFileURL({
      fileList: [uploadResult.fileID]
    });
    fileObj = getURLReault.fileList[0];
    fileObj.fromCache = false;

    // 上传成功,获取文件临时url,返回临时路径的查询结果
    return fileObj;

  } catch (err) {
    return err
  }

}

4. 小程序页面调用

调用页面就比较简单了,在小程序新建一个 pages/share/shareonLoad 函数调用云函数。

// 使用前记得先初始化云函数,一版放到 app.js onLaunch() 中
// wx.cloud.init({env: 'dev-8888'})

wx.cloud.callFunction({
  name: 'getqr',
  data: {
    page: 'pages/demo/demo',
    scene: 'id=6',
  }
}).then(res => {
  console.log(res.result);
  if (res.result.status == 0) {
    _this.setData({
      qr_url: res.result.tempFileURL
    })
  }else{
    wx.showToast({
      icon: 'none',
      title: '调用失败',
    })
  }
}).catch(err => {
  console.error(err);
  wx.showToast({
    icon: 'none',
    title: '调用失败',
  })
})

至此完整的调用过程已经全部完成,详细代码可以到 项目代码 查看。

代码中还对入口页面和share页面的参数做了包装,云函数可以直接使用,小程序可以稍做修改适应自己业务。

写在最后

小程序云开发已经开放了很多功能,除了这次提到的生成小程序码,云调用还可以发送模板消息。有需要的开发者又一个理由可以快速上线新功能了。

云开发还开放了 HTTP API ,也就是用自己的服务器调用云函数。以前看完云开发介绍文章最大的疑问就是,你说的都很好,可是后台数据怎么管理呢?不能跟自己的服务器结合,只能放一些轻量的小程序。有了 HTTP API 以后就可以用自己的服务器做管理后台了。这时候你要问,都用上服务器了,还需要云开发做什么。首先,云开发免费;其次,免费功能已经够强,就差不能做Web管理后台了;最后, 获取access_token (小程序及小游戏调用不要求IP地址在白名单内。)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Programming Amazon Web Services

Programming Amazon Web Services

James Murty / O'Reilly Media / 2008-3-25 / USD 49.99

Building on the success of its storefront and fulfillment services, Amazon now allows businesses to "rent" computing power, data storage and bandwidth on its vast network platform. This book demonstra......一起来看看 《Programming Amazon Web Services》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

html转js在线工具
html转js在线工具

html转js在线工具