zoukankan      html  css  js  c++  java
  • 获取小程序指定页面的小程序码

     小程序二维码生成官方文档链接 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;
    View Code

    然后在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

  • 相关阅读:
    JS 打印实现部分打印
    window.opener和window.open
    js中!和!!的区别及用法
    SQL循环表里的数据
    简明lua教程[转]
    mysql调优技巧-profiles
    MySQL的InnoDB的幻读问题
    linux exec命令
    常用正则搜集整理
    flashget for linux安装问题解决
  • 原文地址:https://www.cnblogs.com/thing/p/9358200.html
Copyright © 2011-2022 走看看