微信小程序通过云函数生成带参数的小程序码_cloud.openapi.wxacode.get-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42063951/article/details/108428169

小程序云开发还是挺强大啊，以前动不动就需要后端攻城狮进行操作，现在没后端啥事了，但是头发却开始紧张了啊！o(╥﹏╥)o

公众平台模式：

在没有用云函数时，只能先在微信公众平台去生成带参数的小程序码，接着在路径页js的onLoad里获取就可以了，我试了一下，发现可以传中文，真不错，but

在这里插入图片描述

但是局限性还是比较大的，你需要有一台电脑打开微信公众平台，并且你还要有开发者权限登录，接着还要有小程序页面的路径的，有了路径还要会传参，对于非开发人员来说会很不友好，所以现在我们可以通过云函数来实现小程序端就可以生成小程序码的操作。

云开发模式：

接下来我说一下学了云函数后，如何通过云函数生成带参数的小程序码，具体效果请看GIF。

在这里插入图片描述
然后手机上的话，大概是接过样子的

需要用到的API

服务器端API-生成的小程序码：wxacode.get()或者wxacode.getUnlimited() 。
（另外wxacode.createQRCode的话官方都不推荐使用，所以默认忽略）
云函数-上传：cloud.uploadFile()
云函数-下载：cloud.downloadFile()
API-保存图片到系统相册：wx.saveImageToPhotosAlbum()
云函数-删除：cloud.deleteFile()

▲wxacode.get版：

优点：传递的参数用的是path，最大长度 128 字节，中文不用转译哦，接受参数直接在onLoad(options)的options里，真香；
缺点：总共生成的码数量限制为100000，超过后凉凉，不过什么场景能超过十万了？还是很香；
思路：
get()接口实现起来还是比较舒服的，参数放在path就好，如pages/index/index?a=123,并且可以直接传汉字，在onLoad(options)的options接收时也不用转译，传啥就是啥,然后因为参数最大长度为 128 字节，所以足够你用了的。
接口成功后会返回buffer类型的二进制数据，一开始我想直接拿这个buffer返回小程序端去看看能不能直接下载下来，但是会返回错误消息响应大小超过1048576字节，无奈，只能先进行上传操作利用cloud.uploadFile()接口支持buffer的特性，先将其转换成图片并存入云存储。
上传成功后会返回一个fileID，接着再用cloud.downloadFile()把临时文件路径拿到，接着再用wx.saveImageToPhotosAlbum()接口把图片存到设备就好了。
最后为了不污染云存储，我做了一些优化，当重复生成、图片下载后、页面隐藏、页面卸载时我都会利用cloud.downloadFile()接口把云端的图片给清掉。
下载使用:
优快云下载地址：传送门
百度网盘下载地址：传送门提取码：u059
使用的话很简单，把代码下载下来，解压后把代码放到对应的位置，接着在app.json写上路径，然后最重要的是一定要记得上传云函数。

在这里插入图片描述

▲wxacode.getUnlimited版：

优点：生成数量暂无限制;
缺点：传递的参数是放在scene里，最大32个可见字符，只支持数字，大小写英文以及部分特殊字符，中文需要转译，path必须是已经发布的小程序存在的页面，否则连用的资格都没有；
思路：
getUnlimited的思路和get是一样，只不过传参的传递和接收做起来比较麻烦，这个接口传参需要放在scene属性里，但是它有最大32个可见字符的限制，中文的话要转译成其他编码方式，所以我是把中文转译成十六进制unicode（也就是4个字母数字，转译回中文需要JSON.parse("\\u"+"4个字母数字") ），因为我测试时最多是四个汉字加几个英文单词或数字，然后再多接口就会报errCode：40169错误，所以我进行了取舍，只能输入最多4个纯中文或者纯字母数字，当然如果你硬是要中文加字母数字自己改一下代码就好；其次的话上传的小程序码默认路径是首页pages/index/index，如果要改的话需要传一个path属性，并且必须是已经发布的小程序存在的页面,否则会报errCode：41030错误。
下载使用:
优快云下载地址：传送门
百度网盘下载地址：传送门提取码：irmd
使用的话比较麻烦，先把代码下载下来，解压后把代码放到对应的位置，因为输入值进行取舍后，所以传的值局限性变得很大，另外如果path的路径并非是已经发布的小程序存在的页面会报错，因为我这demo用的AppID是已经发布了的小程序，自然index页是已经存在线上的，所以可以测试，如果没有已经发布了的小程序AppID那测不了。

在这里插入图片描述

另外你还要自己去做一个判断，毕竟并不是谁都可以操作这个页面吧，我自己公司的是做了一个按钮，点击后才进入该页面，接着我在云数据库创建了一个管理员集合，里面是存的是管理员的openID,然后在每次进入页面时先用云函数获取该用户的openID，然后拿着这个openID去管理员集合匹配一下，有的话就显示这个按钮，这个看你的项目需求吧。

其实还是有个小小的问题，因为删除云上的图片我是用fileID去删除，所以只能删除一条记录，并非是把整个文件夹删掉，尽管我在下载完后、页面隐藏时、页面卸载时删除了记录，还是会有特殊的情况比如微信开发者工具生成图片后我刷新页面，这时是无法监听删除图片的，但是问题不大，这种几率比较少并且还可以在云开发手动删除这个文件夹；如果你硬是要删除文件夹的话你可以到腾讯云的Node.js 管理端 SDK API看下，里面有个叫deleteDirectory的Api可以删除整个文件夹，但是需要在腾讯云云开发控制台获取 secretId、secretKey，所以比较麻烦，我不想让项目变得复杂所以就弄上去了。

使用中的小技巧

在实际项目中我们可以灵活一点，比如说我要推广index页，那么我们可以在index页
写一个悬浮于页面之上的按钮，当然这个按钮只有管理员才能看见，
在这里插入图片描述
接着在跳转到生成页时我们可以顺便把要生成的路径传过去，接着在生成二维码调用云函数时把路径传过去就好了，这样在后续的开发中如果有推广页，我们只需要把这个悬浮窗代码复制过去，把pages改成当前页就好了。

index.wxml

<!-- 自己另外设置管理员可见 -->
<!-- <navigator wx:if="{{isAdministrator}}" class="QRCode-btn" url="../QRCode/QRCode?pages=pages/index/index"
    hover-class="navigator-hover">生成二维码</navigator> -->
<navigator class="QRCode-btn" url="../QRCode/QRCode?pages=pages/index/index"
    hover-class="navigator-hover">生成二维码</navigator>

index.css

.QRCode-btn {
  z-index: 4999;
  position: fixed;
  right: 0;
  bottom: 160rpx;
  background-color: rgba(7, 193, 96, 0.8);
  font-size: 30rpx;
  color: white;
  padding: 4rpx 8rpx;
  border-radius: 6rpx 0 0 6rpx;
}

QRCode.js 这样改，如果宣传页没有传pages过来，我们默认是首页:

// pages/QRCode/QRCode.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    pages: 'pages/index/index'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    let pages = options.pages
    if (pages != undefined) {
      this.setData({
        pages: pages
      })
    }
  },
  
  // 生成二维码
  createQRCode: function () {
    wx.cloud.callFunction({
      name: 'createQRCode',
      data: {
        QR_code_city: city,
        pages: this.data.pages
      }
    })
  }

})

生成二维码云函数createQRCode的path这样改，记得重新上传云函数

// 云函数入口函数
exports.main = async (event, context) => {
  console.log(event.pages)
  try {
    const result = await cloud.openapi.wxacode.get({
      // 扫码进入的小程序页面路径
      "path": `${event.pages}?QR_code_city=${event.QR_code_city}`,
    })
  } catch (err) {
    return err
  }
}