前言

微信二维码，方便传播和列表，可以用于签到扫码，分销二维码，团长二维码，分享海报等一系列二维码

效果如图：

一、二维码

1 选用getUnlimited

wxacode.getUnlimited
因为它：永久有效，数量暂无限制。
使用后端生成，返回到前端显示

2 后端java

service写好的服务
第一步：获取access_token,我这里把它做一个一下处理，把他存在redis中，时间设置2个小时，哪个redisUtil是我封装的一个的，可以换成你们自己的。

第二步：填一下你需要参数

我这边写的是的，方便我传入，page是页面，扫一下二维码，会进入对应页面。scene是参数，进入页面是代入参数

import lombok.Data;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Service;
import org.springframework.web.client.RestTemplate;
import xyz.kszs.base.ResultInfo;
import xyz.kszs.utils.RedisUtil;import javax.annotation.Resource;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.util.Base64;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.TimeUnit;@Service
public class WeChatService {@Resourceprivate RedisUtil redisUtil;private final String appid = "xxxxxxxxxxxxxxxxx";//小程序idprivate final String secret = "xxxxxxxxxxxxxxxx";//小程序秘钥public String getAccessToken() {String keyStr="Access_Token";Object o = redisUtil.get(keyStr);if (o == null) {String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential" +"&appid=" + appid +"&secret=" + secret;RestTemplate restTemplate = new RestTemplate();AccessToken accessToken = restTemplate.getForObject(url, AccessToken.class);if (accessToken==null){return null;}else{String token=accessToken.getAccess_token();redisUtil.set(keyStr,token,(long)2, TimeUnit.HOURS);//存2个小时return token;}} else {return o.toString();}}/*** 获取小程序二维码* @param scene 携带参数* @param page 页面路径* @return base64格式的二维码*/public ResultInfo getQrImage(String scene,String page) {//获取小程序access_tokenString accessToken=getAccessToken();String result = null;// 获取小程序二维码String url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" + accessToken;Map<String, Object> params = new HashMap<>();params.put("scene", scene);params.put("page",page);params.put("check_path",false);params.put("env_version","develop");// 注意这里byte是小写RestTemplate restTemplate = new RestTemplate();ResponseEntity<byte[]> responseEntity = restTemplate.postForEntity(url, params, byte[].class);// 二维码图片转base64if (responseEntity.getStatusCode() == HttpStatus.OK) {InputStream inputStream = null;ByteArrayOutputStream swapStream = null;try {byte[] body = responseEntity.getBody();inputStream = new ByteArrayInputStream(body);// 将获取流转为base64格式byte[] data;swapStream = new ByteArrayOutputStream();byte[] buff = new byte[1024];int rc;while ((rc = inputStream.read(buff, 0, 1024)) > 0) {swapStream.write(buff, 0, rc);}data = swapStream.toByteArray();result = new String(Base64.getEncoder().encode(data));result = "data:image/jpeg;base64," + result;ResultInfo resultInfo=new ResultInfo();resultInfo.setResult(result);return resultInfo;} catch (Exception e) {} finally {try {if (inputStream != null) {inputStream.close();}if (swapStream != null) {swapStream.close();}} catch (Exception e) {}}}return null;}}@Data //获取accessToken
class AccessToken {private String access_token;//获取到的凭证private Integer expires_in;//获取有效时间，单位：秒。目前是7200秒内值private Integer errcode;//错误码private String errmsg;//错误信息
}

3 前端（小程序页面）

我们才后端获取图片，需要通过base64转成img
这个是一个方法，当然，你也可以在java后台做一些处理，把图片在服务器，或者存在ssm，返回一个链接过来，前端页面直接使用。就不需要转化了

const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名function base64src(base64data, cb) {const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];if (!format) {return (new Error('ERROR_BASE64SRC_PARSE'));}const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;const buffer = wx.base64ToArrayBuffer(bodyData);fsm.writeFile({filePath,data: buffer,encoding: 'binary',success() {cb(filePath);},fail() {return (new Error('ERROR_BASE64SRC_WRITE'));},});
};
module.exports = base64src;

在js

var base64src = require('../../../utils/base64src.js');

生成图片方法(请求rq做一下封装，大家可以wx.request去请求你后端写好代码)

    createImg() {wx.vibrateShort({type: 'light',})wx.showLoading({title: '生成中...',})var that = this;that.setData({isCode:true})const query = wx.createSelectorQuery()//返回一个对象实例,通过实例可获取canvasquery.select('#shareCard').fields({node: true,size: true}).exec((res) => { //绘制canvasconsole.log('width', that.data.width)console.log('piR', that.data.pixelRatio)console.log(res)var width = res[0].widthvar height = res[0].heightconst canvas = res[0].nodeconst ctx = canvas.getContext('2d')//使canvas适应各种屏幕不至于大小不同let piR = that.data.pixelRatio; //比例canvas.width = width * piRcanvas.height = height * piRctx.scale(piR, piR)// 绘制图片背景const backImg = canvas.createImage();let data = {page: 'pages/system/login/login',scene: '108',//用户id}rq('WeChat/getQrImage', data, 'GET').then(res => {base64src(res, resCurrent => {console.log(resCurrent)backImg.src = resCurrent;backImg.onload = () => {ctx.drawImage(backImg, width*0.1, width*0.1, width*0.8, width*0.8);wx.hideLoading();}})})const avatarImg = canvas.createImage();let avatarUrl = wx.getStorageSync('avatarUrl');if (avatarUrl == '') avatarUrl = '/img/base/avatar.jpg'avatarImg.src = avatarUrl; //头像路径avatarImg.onload = () => {let size = width * 100 / 750; //大小ctx.drawImage(avatarImg, width * 0.1, width-15, size, size);}//文字ctx.font = 'normal bold 18px sans-serif';ctx.fillStyle = '#000000'; //背景颜色let w = width * 0.1 + 10 + width * 100 / 750;ctx.fillText('邀请你，扫码登录', w, width+10);// ctx.draw = true;})},

wxml写一个页面(页面样式这里不展示呢)

    <!--遮罩--><view class="cu-modal show"></view><view class="modalDlg" style="--width:{{width*0.8}}px;--height:{{width*0.9}}px"><!--关闭按钮--><view style="text-align: center;margin-top: -100rpx;"><icon type="cancel" size="40" color="#fff" bindtap="close"></icon></view><!--显示图片用的标签--><canvas type="2d" id="shareCard" style="width: {{width*0.8}}px;height: {{width*0.9}}px;"></canvas><!--创建一个画布，将它移出屏幕外看不到的地方 不看见的--><canvas canvas-id="myQrcode" style="background:#fff;width: {{width}}px;height: {{width}}px; display:block; left:-800rpx;position:absolute;" /></view><!--按钮--><view style="position: absolute;z-index: 9999;top: {{height*4/5}}px;left:50%;margin-left: -250rpx;"><button class="cu-btn round bg-green lg" style="width: 500rpx;" bindtap="share"><text class="cuIcon-wechat text-lg margin-right-xs"></text> 转发与下载</button></view>

二、普通二维码使用

是把你内容，变成二维码形式，方便扫描获取，上面可以说是程序码，非常适合小程序。先看一下结果

大家扫描会获取到 abc 12345。这是固定的

这里使用 weapp-qrcode 是一个开源的
在github 地址是：https://github.com/MrITzhongzi/small_routine_components/tree/master/6.create_qr_code

把下来，把 weapp-qrcode.js存在你小程序中

js 引入：

import QRCode from '../../../utils/weapp-qrcode.js';

            new QRCode('myQrcode', {text: 'abc 12345',width: that.data.width, //canvas 画布的宽height:that.data.width, //canvas 画布的高padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度callback: (res) => {//工具回调数据// 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求wx.hideLoading()console.log("生成二维码", res)backImg.src=res.path;backImg.onload = () => {ctx.drawImage(backImg, width*0.1, width*0.1, width*0.8, width*0.8);}}})

wxml和前面一样
其中canvas
其中这条一定要存在，不然不显示不出来二维码

 <!--创建一个画布，将它移出屏幕外看不到的地方 不看见的--><canvas canvas-id="myQrcode" style="background:#fff;width: {{width}}px;height: {{width}}px; display:block; left:-800rpx;position:absolute;" />

总结：

对于这2中生成二维码方式。我还是推荐是使用第一种的，因为比较适合小程序。第2种，可以弄来看一下。大家觉得呢

微信小程序生成二维码、程序码、海报相关推荐

【微信小程序】微信小程序生成二维码报错errcode=41030,invalid page rid
场景调用微信小程序生成二维码接口,提示报错错误内容 array(2) {["errcode"] => int(41030)["errmsg"] =&g ...
微信小程序生成二维码js
微信小程序生成二维码js 参考:https://github.com/tomfriwel/weapp-qrcode 最新的二维码工具:https://github.com/KeeeX/qrcodejs ...
微信小程序生成二维码带参海报
微信小程序生成二维码带参海报没错,就是用 canvas 来实现文章目录微信小程序生成二维码带参海报获取屏幕分辨率比生成二维码获取网络图片并转为本地临时文件绘制背景图片以及二维码代码片段 ...
微信小程序生成二维码，接口C接收值
微信小程序生成二维码,接口C接收值深坑解决接口C替代方案深坑当我们用微信二维码生成接口c类型的二维码时,需要传入参数,而根据文档我们填写 path时传入参数例如 pah: page/in ...
微信小程序生成二维码的两种方式
微信小程序生成二维码的两种方式 2020/11/10 第一种,利用网络api自动生成 <image class="xin-erma" src="{{'https:/ ...
【微信小程序生成二维码并下载，分享】
微信小程序生成二维码并保存,分享,下载依赖工具使用weapp-qrcode-base64库生成二维码的base64编码链接:weapp-qrcode-base64 安装 npm install ...
微信小程序生成二维码可文字，链接，图片（支持中文）
功能简介 : 微信小程序生成二维码,支持文本和网址,支持中英文,输入框可清空,可单击保存二维码...... 核心代码 : createQrCode:function(url,canvasId,cavW ...
【精】微信小程序生成二维码海报分享 [原理+源码]
关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定; 首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边 ...
微信小程序生成二维码的方式
一:生成普通的二维码 https://open.weixin.qq.com/sns/getexpappinfo?appid=xxx&path=xxx?a=123 appid:小程序的appid ...
微信小程序生成二维码之传参（接收的参数乱码该咋解决）
先说我的案例,我需要的是,扫码进入不同的区域展示(因此这个就需要进行二维码路径传参),大致思路:接收数据,然后根据所接收的数据进行判断,展示不同的区域. 我是用的草料二维码生成的 - https:// ...

微信小程序生成二维码、程序码、海报

文章目录

前言