微信小程序

在小程序里用微信的开放接口微信登录，跟大家讨论一下在应用里面实施这个微信登录功能的设计流程。

获取用户的微信登录状态

在应用里我们先要得到用户的微信登录状态，这个状态要在我们的应用的后端服务那里对微信接口发出请求并获取。

小程序请求登录码

得到登录状态首先得有个登录码，小程序提供了一个 wx.login 接口，它可以得到登录码。

wx.login({
  success: (login) => {
    console.log(login.code)
  }
})

这个登录码会在 wx.login 接口的成功回调得到的响应的 code 属性里面。有了这个登录码，我们要去请求自己的后端服务接口，让接口去请求微信的登录接口。这个请求可以在小程序里面用 wx.request 来发出，请求的类型是 POST，请求的数据里面要包含获取到的登录码。

在微信小程序里，使用一些接口的时候需要得到用户的授权，用户同意以后我们就可以得到相应的权限，去做一些事情。比如获取用户微信帐号相关信息，得到用户的位置，保存到相册等等。

比如我想知道用户微信帐号相关的信息。先用 wx.getSetting 检查一下用户当前对我们的小程序的授权状态，如果发现用户还没有授权小程序查看他的用户信息，就去调用 wx.authorize 弹出对话窗提醒用户是否要授权小程序得到他的用户信息。用户如果按了同意，接下来我们就可以使用 wx.getUserInfo 这个接口去得到用户相关的信息了，比如他的头像，名字等等。

在微信小程序上显示的内容列表，需要分页显示，向下滚动页面，页面到底了以后如果列表里面还有要显示的项目，就把下一页上的内容项目加载进来放到当前的页面上显示出来。这个就是无限页面加载功能。

思路

小程序的页面滚动到底部的时候，会触发一个 onReachBottom 方法，在这个方法里我们可以去实现加载下一页内容项目的功能。页面加载（onLoad）以后，向服务端请求得到第一页要显示的内容项目，通常在得到的响应里面，服务端会包含一些额外的信息，比如请求的列表一共有多少个项目，当前给我们的是哪些，当前的页码是什么，列表分成了多少页等等。利用这些信息，结合 onReachBottom 就可以实现无限加载功能了。

微信的小程序相当于是一套前端（Frontend）应用的框架，让它变成一个真正能用的 App，我们还得给它提供一个后端服务，或者叫应用后台（Backend）。几乎所有的后端应用框架都支持为小程序提供后端服务。WordPress，Drupal，Rails，Node.js ...   了解一下 RESTful 风格的后端服务接口。

后端服务通过 RESTful 风格的接口为小程序提供数据，或者处理从小程序那里发送过来的数据。比如可以给小程序提供一个内容列表让它在页面上显示，可以接收小程序发送（POST，DELETE，PATCH）过来的数据，比如把内容保存到后端的数据库里。

小程序应用后台（WordPress）预览

用 WordPress 为微信小程序提供后端服务接口，提供可以显示的内容列表，验证用户身份，创建新的内容，上传媒体文件，还有删除内容。

课程组合使用了宁皓网提供的知识框架里的几个部分。小程序是应用的前端，需要用 JavaScript 语言编写，除了语言，还得了解小程序框架本身。后端用到了 WordPress，搭建后端开发环境还得了解点服务器相关的知识。

微信小程序开发课程包里又多了一个《微信小程序：接口》课程，先学会用 wx.request 发出网络请求，比如可以去请求后端服务的资源，也可以向后端服务发送数据。然后用 wx.chooseImage 去选择手机上的图片，再用 wx.previewImage 把选择的图片显示在小程序的界面上。我们再用 Node.js 去准备一个后端服务接口，再学会用 wx.uploadFile 把用户通过小程序选择的在手机上的图片上传到我们的后端服务，上传文件的时候会显示文件上传的进度条。

需求

1. 《Node.js：上传文件》：用 Node.js 创建支持文件上传的接口。
2. 《在互联网访问本地开发环境》：在互联网上直接能访问到在本地开发环境上搭建的服务。

小程序案例课程介绍

看着简单的东西做起来都不简单，因为有太多的细节一开始你是看不见的。最近正在制作一个小程序的案例课程，简单的几个页面，耗费了 61 个小时。其中有 26 个小时是在完成整个的开发与设计，还用了 35 小时，在总结，完善，写作，与录制。后期的视频编辑还需要花些时间。

案例课程花费的时间长，会包含重复的动作，还有跟学习本身无关的一些事情。但是案例课程可以暴露隐藏的细节，不仅仅是展示一系列的技巧，更多的是为你提供一套思维框架。

这个课程正在制作中，有兴趣可以先完成宁皓网的 CSS 与 JavaScript 课程。订阅宁皓网以后，可以学习所有这些课程。

做了个小程序的案例课程，想跟着来，大家先把已经发布的小程序课程学完。页面的设计主要基于《网站》系列课程，如果你想学习网页版的设计，可以先完成《网站》系列。

如果是简单的页面你可以直接把数据放到小程序里面。如果数据很多，并且需要与用户的交互功能，你可以用 Drupal，WordPress，Laravel，Node.js，Rails 等等为小程序提供后端服务接口。

在小程序里的页面，你要在小程序的主配置文件 app.json 里面说明一下，这些页面可以放在 pages 属性的下面。在里面描述一下页面的地址就行了，比如 pages/index/index，这就是 index 页面的地址，这个页面应该在 pages 目录下面的 index 这个目录里，最后的 index 是页面的名字，这里不需要指定扩展名，小程序会自动给我们加上。

{
  "pages": [
    "pages/wxml/wxml",
    "pages/index/index",
    "pages/event/event",
    "pages/demo/demo"
  ],
}

页面导航

小程序内部页面与页面之间的链接，需要用 navigator 组件，组件里面包装的东西就是链接文字，组件上的属性可以配置链接属性，比如用 url 属性设置一下链接的地址。像这样：

<navigator url="/pages/demo/demo">demo</navigator>

在页面上会显示一个 demo 链接，点击这个链接打开的就是 demo 页面。链接上可以包含查询参数，这些参数在页面上可以得到，你可以把这些参数告诉应用的后端去处理。

注册了小程序以后，就需要为小程序准备一些页面了。每个页面都有三个基本的东西，一个主逻辑文件（.js），一个视图文件（.wxml），还有一个样式文件（.wxss）。页面需要的这几个文件可以放在一个单独的目录的下面。

主逻辑

先创建页面的主逻辑文件，比如放在 pages/index/ 这个目录的下面，页面的主逻辑文件的名字可以是 index.js ，在这个文件里，用 Page() 函数注册一个页面。

Page({})

注册的时候可以给它一个对象参数，在它里面可以添加页面的初始化数据，生命周期，事件处理，还有自定义的方法。

生命周期

页面也有自己的生命周期，就是页面在不同的阶段要做的一些事情。onLoad，onShow，onReady，onHide，onUnload。需要在什么阶段做事情，就在注册页面的 Page() 里面添加一个对应的生命周期方法，这些方法会自动被执行。