行业知识
uni-app(微信小程序) 根据小程序页面路径(可带参数) 生成二维码、分享码
2026-11-03 21:19:43
来源:互联网转载
小程序的官方文档有生成小程序码的API
微信官方文档 小程序 看文档点这里
- 第一个获取小程序码,就是根据你要通过二维码打开的页面路径生成一个小程序码,且这个小程序码是永久的
其实文档内也说明了,很少用到。即使需要生成这样的小程序码,可以去微信公众平台的小程序管理后台生成,还方便。
重点说如何使用获取不限制的小程序码(我的使用场景是uniapp的框架,微信小程序根据用户ID生成分享码,并与被分享者建立关系,所以需要带参数)
- 调用方式 也就是接口地址(地址后面的access_token第三点说如何获取)
POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
- 参数
scene 必传 // 这个就是你需要通过页面传的参数page 非必传 // 默认就是主页 例如 pages/index/index,//根路径前不要填加 /,不能携带参数//(参数请放在scene字段里),如果不填写这个字段,默认跳主页面
还有别的参数可以看文档根据实际需求添加
3. access_token的获取
GET https://api.weixin.qq.com/cgi-bin/token
三个必填参数
- grant_type 固定传 client_credential
- appid 和secret 去小程序的公众平台 --> 开发管理 --> 开发设置 获取
拿到 appid 和 secret 之后就可以通过接口获取access_token 用GET请求。这个可以交给后端也可以前端自己去获取
// 获取 access_tokengetAccessToken(){uni.request({method: "GET",url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,success:(result) =>{let access_token = result.data.access_token// 获取到 access_token 后 获取二维码this.getQrCode(access_token)}})}// 获取二维码getQrCode(token){// 注意 access_token 参数是必须放在url后面 其余参数 要在data里面let path = 'pages/index/index'uni.request({method: "POST",responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`,data: {page: path, // 需要打开的页面路径scene: this.userid // 这个是需要传递的参数},success:(result) =>{// 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示// 如果不加请求时 responseType: 'arraybuffer' 则会转码失败this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data);},})}// template 部分 获取access_token 成功回调
获取小程序码成功的回调 这是接口的预览可直接看见二维码,但是如果要展示在页面上就需要转码
打开页面的参数如何接收 (跟普通路由页面跳转时的参数获取一样)
以上就是我实践过程的总结 期间踩了蛮多的坑 现在整理下 希望你们别再踩坑了
https://api.weixin.qq.com开头的接口调用发不到正式环境会不显示,是小程序合法域名的问题,且这个不能在小程序后台配置,所以这两个只能放在后端去调用
页面展示的小程序码是没有办法直接分享出去的,需要先保存在本地相册之后再出去分享,由于图片不是本地图片,就用不了小程序的API去保存,下面是我用的方法
- 第一步获取相册权限 不用改,可以直接用
saveAlbum() { //获取权限保存相册uni.getSetting({ //获取用户的当前设置success: (res) => {// console.log("获取权限",res);if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册this.saveImageToPhotosAlbum();} else {uni.authorize({ //如果没有授权,向用户发起请求scope: 'scope.writePhotosAlbum',success: () => {this.saveImageToPhotosAlbum();},fail: () => {uni.showToast({title: "请打开保存相册权限,再点击保存相册分享",icon: "none",duration: 3000});setTimeout(() => {uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册success: (res2) => {// console.log(res2.authSetting)}});}, 3000);}})}}})}, - 保存图片至相册
saveImageToPhotosAlbum() {// 下面注释掉的是把base64 去掉头部,我们可以直接使用没有添加头的数据 所以就可以不用再去转// this.maskData=this.bufferImg.replace(/^data:image\/\w+;BASE64,/, "");//去掉data:image/png;base64,// 保存图片的名字 可以写*** 也可以写成动态的let filePath = wx.env.USER_DATA_PATH + `/qrcode.png`;uni.getFileSystemManager().writeFile({filePath: filePath, //创建一个临时文件名data: this.maskData, //写入的文本或二进制数据encoding: 'base64', //写入当前文件的字符编码success: res => {uni.saveImageToPhotosAlbum({filePath: filePath,success: function(res2) {uni.showToast({title: '保存成功,请从相册选择再分享',icon: "none",duration: 5000})},fail: function(err) {// console.log(err.errMsg);}})},fail: err => {//console.log(err)}})},
上一篇:监控服务器怎么配置硬盘?