手把手教你Nodejs获取微信小程序二维码

【小程序二维码和普通二维码】

下图左为小程序码,右为普通二维码,

普通二维码的生成比较简单,只用jquery就可以生成,详见:https://blog.csdn.net/uikoo9/article/details/43229367,

小程序码比较特殊,只有通过调用微信接口返回。

手把手教你Nodejs获取微信小程序二维码_第1张图片

 

【获取小程序码的三个接口】

详见:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html

官网文档有详细介绍,三个接口的区别, 一般使用第二个接口,可以生成小程序码而且目前生成个数不受限制

手把手教你Nodejs获取微信小程序二维码_第2张图片

 

【获取二维码生成图片后打不开】

获取二维码的接口比较简单,大概就是先去获取access_token,然后调用接口,传参,

大概代码如下(非正式代码,文章底部有正式代码)

	try{
		// request
		var data = await qiao.ajax.postSync({
			url : 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + global.weixin_access_token,
			json: {
				scene: '1',
				page : 'views/ucenter-register/ucenter-register'
			}
		});
		
		// error
		if(data.errcode){
			res.send(qiao.json.danger('获取二维码失败!', {errName:data.errcode,errMsg:data.errmsg}));
			return;
		}
		
		// write file
		var fs = require('fs');
		fs.writeFile('d:/test.png', data, function(err){
			console.log(err);
		});
		
		// send
		res.send(qiao.json.success('获取二维码成功!', data));
	}catch(e){
		res.send(qiao.json.danger('获取二维码失败!', {errName:e.name,errMsg:e.message}));
	}

本来是一个很简单的接口,但是微信文档的一贯作风,就不给你说明白,只说返回图片二进制内容,

手把手教你Nodejs获取微信小程序二维码_第3张图片

 

控制台打印出来是乱码

手把手教你Nodejs获取微信小程序二维码_第4张图片

 

不过文件倒是生成了,双击后提示格式不正确,也就是打不开

手把手教你Nodejs获取微信小程序二维码_第5张图片

 

【图片打不开的解决方法】

其实是一个小问题,但是困扰了一天,百度谷歌都找不到好答案,微信小程序社区几个问题也都没有回复,很是抓狂,

锲而不舍下找到了答案,详见:https://segmentfault.com/a/1190000002787763

简单的说就是

1.nodejs端请求微信接口使用的npm request库(https://www.npmjs.com/package/request)

2.微信接口直接返回二进制内容

3.request默认会进行编码!!!

4.最后导致的就是生成的图片打不开

 

解决方法也很简单,多加一个encoding:null的参数即可,也就是告诉request不要编码原样返回,

手把手教你Nodejs获取微信小程序二维码_第6张图片

 

之后生成的图片就可以正常打开了~

 

【二维码的三种保存方式】

小程序码一般有三种使用场景

1.后端直接返回数据,前端使用image+base64渲染

2.后端生成图片后返回服务器图片地址

3.后端生成图片后上传文件云,类似oss,返回图片地址

 

总结一下就是:对微信返回的数据,要不生成文件,要不返回base64数据

 

【图片+base64渲染方式】

如果不想在服务器生成小程序码文件,可以直接返回base64的数据进行渲染,

相关代码:

1.nodejs代码,request中的encoding修改为base64

手把手教你Nodejs获取微信小程序二维码_第7张图片

2.小程序中添加前缀后直接为image设置src

手把手教你Nodejs获取微信小程序二维码_第8张图片

 

【qiao.ext.weixin】

到这里应该已经解决大家经常遇到的问题了, 下面就是对以上逻辑的一些封装,有需要的可以继续阅读

 

将微信nodejs的一些常用方法做了封装,发布了npm包:qiao.ext.weixin(https://www.npmjs.com/package/qiao.ext.weixin)

目前对外的几个方法

1.获取access_token

2.通过小程序接口1-3获取二维码并生成文件

3.通过小程序接口1-3获取二维码并返回image的src

 

【获取access_token】

首先需要安装这个npm包,在nodejs端

npm i qiao.ext.weixin

然后就是获取access_token的代码, 你只需传入appid和appsecret即可

'use strict';
 
var qiaoExtWeixin = require('qiao.ext.weixin');
 
var test = async function(){
    var appId		= require('./config.json').AppID;
    var appSecret	= require('./config.json').AppSecret;
    
    var accessToken	= await qiaoExtWeixin.accessToken(appId, appSecret);
    console.log(accessToken);
};
 
test();

 

【通过接口获取小程序码并生成文件】

只需要3个参数

1.上面获取的accessToken

2.小程序接口默认要求的参数params,这里不需要传access_token,详见微信文档

3.生成文件的路径filePath,比如d:/test.png

'use strict';
 
var qiaoExtWeixin = require('qiao.ext.weixin');
 
var test = async function(){
    // accessToken
    var accessToken = '';
    
    // mp code file by api 1 : https://developers.weixin.qq.com/miniprogram/dev/api/getWXACode.html
    qiaoExtWeixin.mpCodeFile(1, accessToken, {path:'views/ucenter-register/ucenter-register'}, 'd:/test1.png');
 
    // mp code file by api 2 : https://developers.weixin.qq.com/miniprogram/dev/api/getWXACodeUnlimit.html
    qiaoExtWeixin.mpCodeFile(2, accessToken, {page:'views/ucenter-register/ucenter-register', scene:'1'}, 'd:/test2.png');
    
    // mp code file by api 3 : https://developers.weixin.qq.com/miniprogram/dev/api/createWXAQRCode.html
    qiaoExtWeixin.mpCodeFile(3, accessToken, {path:'views/ucenter-register/ucenter-register'}, 'd:/test3.png');
};
 
test();

 

【通过接口获取小程序码并返回src】

'use strict';
 
var qiaoExtWeixin = require('qiao.ext.weixin');
 
var test = async function(){
    // accessToken
    var accessToken = '';
    
    // mp code src by api 1 : https://developers.weixin.qq.com/miniprogram/dev/api/getWXACode.html
    var src1 = await qiaoExtWeixin.mpCodeSrc(1, accessToken, {path:'views/ucenter-register/ucenter-register'});
 
    // mp code src by api 2 : https://developers.weixin.qq.com/miniprogram/dev/api/getWXACodeUnlimit.html
    var src2 = await qiaoExtWeixin.mpCodeSrc(2, accessToken, {page:'views/ucenter-register/ucenter-register', scene:'1'}, 'jpg');
    
    // mp code src by api 3 : https://developers.weixin.qq.com/miniprogram/dev/api/createWXAQRCode.html
    var src3 = await qiaoExtWeixin.mpCodeSrc(3, accessToken, {path:'views/ucenter-register/ucenter-register'}, 'png');
    
    console.log(src1);
    console.log(src2);
    console.log(src3);
};
 
test();

 

你可能感兴趣的:(04_JS&JQ&UI)