微信小程序 - 获取用户session_key, openid - 后端为nodejs, Koa2框架

这是我在csdn的第一篇文章,看了那么多别人的文章,是时候要来贡献一下了。


最近在写小程序,零Nodejs基础上来就写,踩了巨多坑,以后再也不干这种事了。

我的小程序用的是微信的Koa2框架,新建项目的时候开发者工具给的demo。小程序需要获取用户的openid来建立一个数据库。由于自己不会造轮子,那就上网找找别人造的轮子咯。这是我找到的一个合适的(博主名字:意外金喜):点击打开链接。说白了就是抄这位波束的代码啦...这里面有两个坑,我分开来讲。如果有人遇到同样的情况的话,希望我写的东西帮到你们。


第一,wx.request的一个bug。

(也有可能不是bug而是我不会写而已)使用wx.request把用户的登录凭证code发到后端,来换取用户的openid。这是微信给的demo:

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})

但是,我的后端接收不到数据!我启动单步调试,用console.log()来看我传了些什么数据,发现根本没有data这个参数。无可奈何,摸索了一番后,我发现可以把code藏在header里面,后端代码读取headers里面的参数来完成传参(如果知道正确的写法,还望不吝赐教)。以下是我的代码(client/utils/wechat.js):

    static request(url, params, method = "POST", type = "application/x-www-form-urlencoded") {
        console.log("向后端传递的参数", params);
        return new Promise((resolve, reject) => {
            let opts = {
                url: url,
                method: method,
                header: { 
                    'Content-Type': type,
                    'accept': params,  
                    },
                success: resolve,
                fail: reject
            }
            console.log("请求的URL", opts.url);
            wx.request(opts);
        });
    };

第二,框架不同语法不同。

由于意外金喜用的是Express框架,跟小程序的Koa有一点点不同,就是这一点点不同卡了我好久(多久就不讲了说出来丢人),直到刚刚看廖雪峰老师的教程才发现(点击打开链接)。这个故事告诉我们,如果要debug,官方文档或者阅读框架的源码是很有用的。

下面是意外金喜的代码(新增的路由):

router.post("/openid", async (req, res) => {
  const Ut = require("../common/utils");
  try {
    console.log(req.body);
    let appId = "wx70xxxxxxbed01b";
    let secret = "5ec6exxxxxx49bf161a79dd4";
    let { js_code } = req.body;
    let opts = {
      url: `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${secret}&js_code=${js_code}&grant_type=authorization_code`
    }
    let r1 = await Ut.promiseReq(opts);
    r1 = JSON.parse(r1);
    console.log(r1);
    res.json(r1);
  }
  catch (e) {
    console.log(e);
    res.json('');
  }
})
问题出在 async(req, res) 这里。这是express的写法,但是在Koa,这里的参数是不同的。Koa的写法是 async(req, res) 
其中,参数ctx是由koa传入的封装了request和response的变量,我们可以通过它访问request和response,next是koa传入的将要处理的下一个异步函数。

上面这句数是廖雪峰老师写的。当我照搬意外金喜的代码的时候,就会报错"res.json is not a function",因为res.json是express的东西,在Koa里面是不存在的!

于是我把路由的代码改了一下(server/routers/index.js):

router.post("/openid", async function (ctx, next) {
    const Ut = require("../common/utils");
    console.log('ctx.response: ', ctx.response)
    console.log('ctx.request: ', ctx.request)
    try {
        let grant_type = 'authorization_code'
        let appid = config.appId
        let secret = config.appSecret
        let code = ctx.accept.headers.accept
        console.log('req code: ', code);
        let opts = {
            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + code + '&grant_type=' + grant_type
        }
        let r1 = await Ut.promiseReq(opts);
        r1 = JSON.parse(r1);
        console.log('r1 is:', r1);
        openid = r1.openid
        ctx.response.body = openid
    }
    catch (e) {
        console.log(e);
        ctx.response.status = 403
    }
})

把res.json改成ctx.response.body就可以了。

运行结果如下:

login接口获取的code: 061iT8Hv1VtW0b07dWHv1m3SGv1iT8Hj
appservice?t=1530270757816:1084 Fri Jun 29 2018 19:12:42 GMT+0800 (China Standard Time) 接口调整
wechat.js? [sm]:59 getUserInfo接口 {errMsg: "getUserInfo:ok", rawData: "{"nickName":"大大大濤濤","gender":1,"language":"en","ci…rkwjS4R0jca8z8mMXGZ7fwFd9DXsfZY9podNmKh3gGQ/132"}", userInfo: {…}, signature: "a6ea2264b97da6813dff42d6f7ea24969e68490b", encryptedData: "cCrJ0XjJhmmqJWQ0ry3vqebd7Hv6Ixx2p8DMaUwW0YFMGWFqK7…48onyskBK8jwRzGdakk9naOmLXd1paEWYGebEtwldjbTyg/Q=", …}
wechat.js? [sm]:29 向后端传递的参数:  061iT8Hv1VtW0b07dWHv1m3SGv1iT8Hj
wechat.js? [sm]:42 请求的URL:  https://cevgpypz.qcloud.la/weapp/openid
index.js? [sm]:102 从后端获取的openid:  ovvsAxxxxxp9blJ-XvmOxxxxxu2c

展开阅读全文

Git 实用技巧

11-24
这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值