小程序二维码生成官方文档链接 https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html
如果你有一个页面，比如某个商品详情页： /Page/detail/detail?id=1000000，你希望生成这个页面的一个小程序码；那么你就需要调用小程序的接口来生成这个二维码了；
具体思路：
1.按照官方文档的指示，首先你要调接口获取你的AccessToken才能使用生成小程序码的接口；
2.得到AccessToken后就可以开始调用生成小程序码的B接口了，一般来说，要传两个参数：page参数是你的页面链接，scene参数就是你要传给页面的参数，例如上面的id=1000000中的1000000
3.得到微信返回的小程序码后，将图片保存到你的后台服务器，然后把图片的路径返回到前端；
4.前端得到了图片的链接后，就可以直接渲染在页面上了；
小程序提供了三个接口可以生成指定的页面的二维码，分别为A接口，B接口，C接口；
A接口和C接口都有数量限制：10万个；而且C接口只能请求到普通的方形二维码；
所以我选择了B接口；
获取小程序码的后台代码封装在utils/creatQrCode.js中，代码如下：
1 var fs = require(\'fs\'); 2 var request = require(\'request\'); 3 4 var AccessToken = { 5 grant_type: \'client_credential\', //这里填这个值就可以了 6 appid: \'vvvvvvvvvvvvvvvvv\', //你的小程序appid 7 secret: \'vvvvvvvvvvvvvvvvv\' //你的小程序secret 8 } 9 10 //获取你的AccessToken的链接 11 var wx_gettoken_url = \'https://api.weixin.qq.com/cgi-bin/token?grant_type=\' + AccessToken.grant_type + \'&appid=\' + AccessToken.appid + \'&secret=\' + AccessToken.secret; 12 13 14 15 var create_time = 0, 16 now = 0, 17 token = \'\'; 18 var createQrcode = { 19 test:function(){ 20 console.log(\'test\') 21 }, 22 create: function(config) { 23 var that = this; 24 return new Promise(function(resolve, reject) { 25 console.log(\'fn：create\'); 26 if (that.isInTwoHours()) { 27 that.getQrcode(config).then((res)=>{ 28 resolve(res) 29 }); 30 31 } else { 32 getWxToken().then(res => { 33 if (res.isSuccess) { 34 that.getQrcode(config).then((res)=>{ 35 resolve(res) 36 }); 37 38 } else { 39 console.log(\'获取token出错\'); 40 } 41 }) 42 } 43 }) 44 }, 45 //判断是否超过两个小时，将token存储起来，减少token请求。 46 isInTwoHours: function() { 47 console.log(\'fn:isTwoHours\'); 48 now = new Date().getTime(); 49 var diffHours = (now - create_time) / (60 * 1000); 50 console.log(\'diffHours：\' + diffHours); 51 if (diffHours < 2) { 52 return true; 53 } else { 54 return false; 55 } 56 }, 57 58 getQrcode:function(config){ 59 return new Promise(function(resolve, reject) { 60 resolve( 61 request({ 62 method: \'POST\', 63 url: \'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=\' + token.access_token, 64 body: JSON.stringify({ 65 path:config.path, 66 scene:config.scene 67 }) 68 }) 69 ) 70 }).then(data => { 71 data.pipe(fs.createWriteStream(\'../upload/qrcode/\' + config.scene + \'.png\')) 72 return new Promise(function(resolve, reject) { 73 resolve(\'https://VV.VVVVV.com/images/qrcode/\' + config.scene + \'.png\') //将图片完整的链接返回出去 74 }) 75 }) 76 } 77 78 79 //获取微信的Access-token 80 var getWxToken = function() { 81 console.log(\'fn:getWxToken\'); 82 var that = this; 83 return new Promise((resolve, reject) => { 84 request({ 85 method: \'GET\', 86 url: wx_gettoken_url 87 }, function(err, res, body) { 88 if (res) { 89 create_time = new Date().getTime(); 90 token = JSON.parse(body); 91 console.log(token,2222222222) 92 resolve({ 93 isSuccess: true 94 }); 95 } else { 96 console.log(err); 97 resolve({ 98 isSuccess: false 99 }); 100 } 101 } 102 ) 103 }); 104 } 105 106 module.exports = createQrcode;
然后在express的路由中调用生成小程序码的方法：
var creatQrcode = require(\'../utils/creatQrCode\');
router.post("/createQrcode",function(req, res, next){
let pageSrc = req.body.pageSrc; //页面链接
let scene = req.body.scene; //页面参数
let config={page:pageSrc,scene:scene}
creatQrcode.create(config).then((imgUrl)=>{ //请求到小程序码后得到图片链接
res.json({
status:0,
imgUrl:imgUrl //将图片链接返回给前端
})
})
})
最后，你要在该小程序页面上做处理，具体思路：
1.如果用户是扫你的小程序码进这个页面的，那么就会有一个scene；
2.如果用户是点击其他页面条状进来的，那么链接类似这样的：/Page/detail/detail?id=1000000，你要处理的只是id；
具体代码如下：
........ onLoad:function(options){ if (options.scene) { //如果是扫码进来这个页面的话 var scene = decodeURIComponent(options.scene); this.setData({ id: scene }) this.getGoodslist(\'shopId\', scene) } else { //如果是正常跳转进来的话 var id = options.id; this.setData({ id: id }) this.getGoodslist(\'shopId\', id) } }, .................
最后，如果你的小程序还没发布，那么扫码后是打不开指定页面的，所以在开发阶段，你可以使用微信开发工具提供的模拟扫码进入页面，这样就可以调试了：
注：express获取小程序码图片的代码参考自：https://blog.csdn.net/u014477038/article/details/70056171
请发表评论