微信小程序学习

配置文件

全局配置文件为 app.json,在项目的根目录中。

配置详情参考官方文档

要注意的是主体页面的颜色要和微信的颜色保持一致为白色,但是状态栏以及标签页这些地方可以是自己喜欢的颜色。

登录状态的维护

和其他媒介一样,微信小程序本质上是内容的载体,因而我们也要有一个后台服务器来为小程序提供内容。

从小程序登录微信是极其容易的一件事情,但是我们的后台 api 怎么知道用户是不是真的登录了呢?那就要通过微信提供的 api 来验证了。

在微信的 wx.login() api 中,如果成功登录,则会返回一个登录凭证 code,小程序可以把这个 code 传递给 后台服务器,然后后台服务器通过调用微信的验证 api 来测试登录状态,如果成功则会返回 session_key 到后台服务器(这个 session_key 是密钥,不应该传输到小程序客户端)。

而小程序和普通的浏览器不一样,是不能存储 cookie 的,因此 cookie 相关应该存储到服务器中,而服务器应该把存储 cookie 的 key 来返回给小程序,小程序之后就通过这个 key 来向服务器进行请求。

注意这里有两个登录状态,一个是小程序中微信号的登录状态,第二个是服务器中的登录状态。后者是依托于前者,如果前者过期重新登录,则必须要更新服务的的登录状态。

这样设置的好处是控制了服务器的资源不能被随意获取。

参考资料

wx.getStorageSync(key) 是用来从本地缓存中同步获取指定 key 对应的内容。

wx.setStorageSync(key, value) 把 value 存储到相应的 key 对应的内容中,会覆盖掉原来 key 对应的内容。

.unshift() Array 的方法,用来在数组的首部添加一个或多个元素,添加几个元素就有几个参数。

.map() Array 的方法,用 map 中的函数来处理 Array 中的每个数据。

=> 用来定义箭头函数,这个函数表达式的语法比函数表达式短。

1
2
3
4
5
6
7
8
9
10
11
// 一个参数时圆括号是可选的
singleParam => { statements; }
(singleParam) => { statements; }

(param1, param2, …, paramN) => { statements; }
(param1, param2, …, paramN) => expression
// 等价于:(param1, param2, …, paramN) => { return expression; }
/* 当删除大括号时,它将是一个隐式的返回值,这意味着我们不需要指定我们返回*/

// 没有参数时必须要使用圆括号
() => { statements; }