准备工作

  • 开通小程序账号
  • 在小程序管理后台创建一个小程序，获取到AppID
  • 下载小程序开发工具
  • 打开项目根目录的project.config.json，修改appid为你的AppID
  • 打开开发工具，导入项目
  • 点击开发工具的云开发，开通云开发功能
  • 开通之后，在云开发界面点击数据库，创建3个集合：user、img、fav，记录为空就可以

小程序后台地址：https://mp.weixin.qq.com/

现在应该能够正常运行了。

小程序逻辑

进入小程序

可以这样理解：整个小程序是一个App对象，包含了很多属性，每个页面都是App的属性。页面是名字为Page的对象。
App和Page的配置：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

打开小程序之后，执行app.js中的onLaunch，它是App的“生命周期函数”。这个函数中除了最后一句，都是编辑器自己生成的示例代码，可以删除。

init函数前面有async，这是ES6语法，简单来说，async配合await可以让异步方法以同步的方式执行。在js中，异步方法有setTimeout/setInterval、AJAX、Promise等。用async的目的是为了防止嵌套过多的回调函数。

init方法首先调用getOpenId获取OpenID，这是用户的识别码，用来区分用户。为了保证成功取到OpenID再执行后面的方法，在调用getOpenId的时候，使用了await让这个方法同步执行。

利用上面获取到的OpenID，从user表(或者叫集合)中尝试获得用户信息。如果没有得到用户信息，就创建一个新用户。

云数据库在执行add操作时会自动加上_openid字段，所以不用再把上面得到的OpenID传给数据库了。这个_openid字段就是你的OpenID，是腾讯从它的服务器取的。

首页

每个页面都是一个Page对象。
首页支持下拉刷新，是在pages/index/index.json中启用的，然后在Page中配置onPullDownRefresh。
页面打开后会按规定的顺序执行页面的生命周期函数。首页的生命周期函数只有onLoad，这是页面加载完成后执行的。不同的生命周期函数执行的时间不同，可用的资源也不同，有的生命周期函数可能在页面结构还没生成的时候执行，所以没法操作页面上的元素。
因为onLoad不支持async，所以自定义了一个async init方法。
init调用了两个方法，获取了总的图片数量和第一页20条的图片数据。小程序限制每次查询数据的数量，最多一次20条。
首页支持滑到底部时自动加载下一页，是通过onReachBottom实现的，这是Page的一项配置。
因为下拉加载是刷新页面，所以增加了isRefresh参数用来区分是刷新页面还是到底加载下一页，可以在页面中搜索查看。

注意：因为时间限制，只有首页实现了分页功能，其他有列表的页面没有实现分页。所以在演示我的收藏、待审核图片等页面时，最好别添加太多数据

个人中心

个人中心在页面中通过open组件获取用户名和头像。
默认新用户都是普通用户。在云数据库的user表中，修改记录的is_admin字段为true，此用户就成为了管理员。
管理员的个人中心会显示“待审核图片”菜单，普通用户不显示。

未完待续......

标签: none