小程序实用UI及常见问题解决

小程序云开发获取网络图形式小程序二维码

2019-08-19  本文已影响1人  Frankeen

使用小程序云开发生产小程序二维码并返回网络地址这个步骤有些绕,下面我就简单介绍一下;

配置云调用

在云函数目录下的 新建config.json配置文件的 permissions.openapi 字段中增加要调用的接口名;

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

参考地址:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/openapi/openapi.html#云调用

调用小程序生产二维码接口

根据自己需要拼接的生产的小程序二维码数据,然后获得小程序二维码的buffer,后面上传二维码到云存储空间将用到;注意path 是小程序访问页面路径以及需要的参数,具体参数可以看微信文档

        let jp = {
        ctId: ct._id,
      }
      let path = "pages/ct/ct?jp=" + encodeURIComponent(JSON.stringify(jp));
      const code = await cloud.openapi.wxacode.get({
        path: path,
        width: 400,
        isHyaline: true,
        autoColor: false,
        lineColor: {
          "r": 9,
          "g": 187,
          "b": 7
        }
      })

参考地址:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.get.html

上传小程序二维码到微信云开发数据存储空间

使用云开发提供的uploadFile方法上传图片资源到云存储空间,注意这里返回的是文件id:fileID,不是网络路径,后面我们需要用到该fileID生产网络图片访问的临时路径;cloudPath是存储的图片名称,fileContent是上面我们生成的二维码的buffer;

      const codeName = ct._id + ".jpg";
      try {
        const uploadFile = await cloud.uploadFile({
          cloudPath: codeName,
          fileContent: code.buffer,
        })
        console.log("uploadFile", uploadFile)
        const updateComment = await db.collection('ct').doc(ct._id).update({
          data: {
            codePath: uploadFile.fileID,
          }
        })
      } catch (e) {
        console.log("uploadFile", e)
      }

参考地址:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-server-api/storage/uploadFile.html

获取图片临时访问网络地址

用云文件 ID 换取真实链接,可自定义有效期,默认一天且最大不超过一天。一次最多取 50 个。注意fileList传的是一个fileId数组数组;然后返回对象里面包含一个图片网络访问地址的数组fileList

      const fileList = [ct.data.codePath]
      const codePath = await cloud.getTempFileURL({
        fileList: fileList,
      })
      console.log("codePath.fileList", codePath.fileList)

我们想要的网络图片地址就存放在codePath.fileList里面;
参考地址:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-server-api/storage/getTempFileURL.html

代码详细地址:https://github.com/fuxingkai/LMsg
查看源码cloudfunctions目录下面的ct目录里面相关内容;

上一篇下一篇

猜你喜欢

热点阅读