微信小程序自定义二维码（小程序+后端）

效果图

微信端代码

微信端主要分为拉取服务端小程序码，和主要图片文件下载本地，绘图几部。文章介绍主要步骤。

文件下载

coverUrlTep = await this.getFileTep(that.goodsInfo.cover_url);
——————————————————————————————————————————————
async getFileTep(url) {
				return new Promise((resolve, reject) => {
					let fileTep;
					uni.downloadFile({
						url: url, //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								console.log('文件下载成功');
								fileTep = res.tempFilePath
								resolve(fileTep);
							}
						}
					});
				})
			},

圆角头像

				//头像
				//从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
				//（不能访问画布上的其他区域）。可以在使用 clip 方
				//法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。
				shareCtx.save();
				shareCtx.beginPath();
				shareCtx.arc(60, 60, 30, 0, 2 * Math.PI);
				shareCtx.clip();
				shareCtx.drawImage(avatarTep, 30, 30, 60, 60);

				shareCtx.restore();

圆角头像

				//头像
				//从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
				//（不能访问画布上的其他区域）。可以在使用 clip 方
				//法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。
				shareCtx.save();
				shareCtx.beginPath();
				shareCtx.arc(60, 60, 30, 0, 2 * Math.PI);
				shareCtx.clip();
				shareCtx.drawImage(avatarTep, 30, 30, 60, 60);

				shareCtx.restore();

文字加粗

			shareCtx.fillText(a_price, 70, 450)
			//加粗效果
			shareCtx.fillText(a_price, 70 - 0.5, 450 - 0.5)

圆角思路

最终效果

show you the code

				//实际项目代码，酌情拷贝
				shareCtx.setFillStyle('#F8F6FC')
				shareCtx.fillRect(20, 100, 16, 16)
				shareCtx.beginPath();
				shareCtx.setFillStyle('#fff')
				shareCtx.arc(36, 116, 16, 0, 2 * Math.PI);
				shareCtx.fill();
				shareCtx.restore();

				shareCtx.save();
				shareCtx.setFillStyle('#F8F6FC')
				shareCtx.fillRect(339, 100, 16, 16)
				shareCtx.beginPath();
				shareCtx.setFillStyle('#fff')
				shareCtx.arc(338, 116, 16, 0, 2 * Math.PI);
				shareCtx.fill();
				shareCtx.restore();

				shareCtx.save();
				shareCtx.setFillStyle('#F8F6FC')
				shareCtx.fillRect(20, 521, 16, 16)
				shareCtx.beginPath();
				shareCtx.setFillStyle('#fff')
				shareCtx.arc(36, 521, 16, 0, 2 * Math.PI);
				shareCtx.fill();
				shareCtx.restore();

				shareCtx.save();
				shareCtx.setFillStyle('#F8F6FC')
				shareCtx.fillRect(339, 521, 16, 16)
				shareCtx.beginPath();
				shareCtx.setFillStyle('#fff')
				shareCtx.arc(338, 521, 16, 0, 2 * Math.PI);
				shareCtx.fill();
				shareCtx.restore();

保存生成图片

setTimeout(() => {
					//uni-app保存画布图片方法
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						destWidth: 375,
						destHeight: 557,
						canvasId: 'downloadShareCanvas',
						success: function(res) {
							// 在H5平台下，tempFilePath 为 base64
							console.log(res.tempFilePath);
							//弹窗图片
							that.qrCodeSharePic = res.tempFilePath;
							//弹窗是否显示的辨识
							//作者这边在弹窗中置入了<image>标签
							that.qrCodeSharePicShow = true;
						}
					})
				}, 300);

解析sence参数

async onLoad(options) {
			let id;
			let userId;
			console.log(options);
			if(options.scene){
				//scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				//有参数
				const scene = decodeURIComponent(options.scene);
				console.log(scene);
				let strs = scene.split(";")
				id = strs[0];
				userId = strs.length > 1 ? strs[1] : null;
				console.log(id);
				console.log(userId);
			}else{
				//接收传值,id
				id = options.id;
				this.goodsId = id;
			}
			..........

后端

		//添加用户ID参数，商品id参数
        StringBuilder stringBuilder = new StringBuilder().append(goodsId);
        if (null != userId){
            stringBuilder.append(";").append(userId);
        }

        try {
            //工具类
            wxaCode = wxMaService.getQrcodeService().createWxaCodeUnlimit(stringBuilder.toString(), "pages/product/product");
        } catch (WxErrorException e) {
            e.printStackTrace();
        }

        String imgUrl = null;
        if (null != wxaCode){
        	//自己写的oss上传工具
            imgUrl = ossUtil.uploadGoodsSharePic(wxaCode);
        }