Fork me on GitHub

关于学习微信小程序的一些记录

发表于 | 分类于
字数统计: 1,024 字 | 阅读时长 ≈ 4 分钟

小程序心得记录

关于微信小程序自己的一些学习历程记录一下吧。

上个学期，经过一个朋友介绍，我有幸参加了学校“挑战杯”其中一个小组的项目，负责该项目的微信小程序部分。那时候我一点都不了解小程序，通过自己慢慢学习摸索，帮助该团队完成了这个项目1.0版本的小程序端后，退出该项目团队。接下来就我个人的学习经历什么的随便写写，算是一种记录。
该项目是制作一个健身器材。就我个人而言，我知道健身有在健身房进行大汗淋漓的健身，也有在体侧房进行测量性质之类的健身，我们的项目就是属于后者，制作一个能测量出被测量者的各方面力量。当时硬件方面已经成熟，上位机就绪，可以在机器上进行实验。后台小组以及我负责的小程序都是后来加入的。
说回小程序，此处应有图，不过这个项目将来要上市的（团队负责人很有生意头脑），所以意思意思就好。以下的图是在小程序开发助手和web开发者工具看的。

关于登录

来说说小程序的登录。
引用小程序官方文档的登录时序图，整个登录流程基本如下图所示：
小程序登录时序图
该图中，小程序指的就是我们使用小程序框架写的代码部分，第三方服务器一般就是我们自己的后台服务程序，微信服务器是微信官方的API服务器。

在客户端获取当前登录微信用户的登录凭证(code)

我们可以使用wx.login()方法得到一个登录凭证，获取该凭证是小程序登录的第一步。

接着可以在小程序的App代码中发起登录凭证请求，也可以在其他任何Page页面代码中发起登录凭证请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        var code = res.code;
        if (code) {
          console.log('获取用户登录凭证：' + code);
        } else {
          console.log('获取用户登录态失败：' + res.errMsg);
        }
      }
    });
  }
})

获取唯一标识(openid)和会话密钥(session_key)

使用wx.request()方法，请求后台的API，并将登录凭证(code)传递过去。例如在我们前面代码的基础上增加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        var code = res.code;
        if (code) {
          console.log('获取用户登录凭证：' + code);

// --------- 发送凭证 ------------------
	wx.request({
	  url: 'https://www.yourAPI.com/user',
	  data: { code: code }
	})
// ------------------------------------

        } else {
          console.log('获取用户登录态失败：' + res.errMsg);
        }
      }
    });
  }
})

你的后台服务(/user)接着需要使用这个传递过来的登录凭证，去调用微信接口换取openid和session_key，接口地址格式如下所示：

1
https://api.weixin.qq.com/sns/jscode2session?`appid=APPID`&`secret=SECRET`&`js_code=JSCODE`&grant_type=authorization_code

其中APPID和SECRET则是申请小程序时候就给出的，可以去小程序后台管理界面查看，JSCODE则是小程序端传递过来的登录凭证code。

后台代码这里不是我负责，所以没有贴出。不过其实大同小异。

你自己的后台代码如果成功执行的话，就可以得到openid和session_key。这个信息就是当前微信账户在微信服务器那边的登录态了。
至此登录部分就完成了。

其他

之后就是一些图片上传啊，UI的设计啥的，这些去微信小程序官方文档都能找得到。UI则采用了WeUI（https://weui.io/）。小程序也采用了数据驱动的方式操作文档，这是很棒的，跟现有的流行框架，如VUE，Angular一样，同时也支持ES6语法。

总之，这个项目让我体验到前后台合作开发的流程，算是有收获。继续学习下去吧。