获取小程序指定页面的小程序码

 小程序二维码生成官方文档链接 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中，代码如下：

var fs = require('fs');
var request = require('request');
 
var AccessToken = {
  grant_type: 'client_credential', //这里填这个值就可以了
  appid: 'vvvvvvvvvvvvvvvvv',  //你的小程序appid
  secret: 'vvvvvvvvvvvvvvvvv'  //你的小程序secret
}

//获取你的AccessToken的链接
var wx_gettoken_url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=' + AccessToken.grant_type + '&appid=' + AccessToken.appid + '&secret=' + AccessToken.secret;
 

 
var create_time = 0,
  now = 0,
  token = '';
var createQrcode = {
  test:function(){
      console.log('test')
  },
  create: function(config) {
    var that = this;
    return new Promise(function(resolve, reject) {    
        console.log('fn：create');
        if (that.isInTwoHours()) {
          that.getQrcode(config).then((res)=>{
            resolve(res)
          });
          
        } else {
          getWxToken().then(res => {
              if (res.isSuccess) {
              that.getQrcode(config).then((res)=>{
                  resolve(res)
              });
                
              } else {
              console.log('获取token出错');
              }
          })
        }
    })
  },
  //判断是否超过两个小时，将token存储起来，减少token请求。
  isInTwoHours: function() {
    console.log('fn:isTwoHours');
    now = new Date().getTime();
    var diffHours = (now - create_time) / (60 * 1000);
    console.log('diffHours：' + diffHours);
    if (diffHours < 2) {
      return true;
    } else {
      return false;
    }
  },
  
  getQrcode:function(config){
    return new Promise(function(resolve, reject) {
                resolve(
                        request({
                            method: 'POST',
                            url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + token.access_token,
                            body: JSON.stringify({
                                path:config.path,
                                scene:config.scene
                            })
                        })
                )
            }).then(data => {
                data.pipe(fs.createWriteStream('../upload/qrcode/' + config.scene + '.png'))
                return new Promise(function(resolve, reject) {
                    resolve('https://VV.VVVVV.com/images/qrcode/' + config.scene + '.png') //将图片完整的链接返回出去
                })
            })
  }


//获取微信的Access-token
var getWxToken = function() {
  console.log('fn:getWxToken');
  var that = this;
  return new Promise((resolve, reject) => {
    request({
      method: 'GET',
      url: wx_gettoken_url
    }, function(err, res, body) {
      if (res) {
        create_time = new Date().getTime();
        token = JSON.parse(body);
        console.log(token,2222222222)
        resolve({
          isSuccess: true
        });
      } else {
        console.log(err);
        resolve({
          isSuccess: false
        });
      }
    }
)
  });
}

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