博客

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

获取用户的微信登录状态

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

小程序请求登录码

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

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

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

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

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

WordPress 核心自带了一些 REST 接口，可以处理文章，用户，评论等等这些资源。有时候我们需要自己加工一些接口功能，WordPress 支持我们添加这样的自定义 REST 接口。注册的接口相关的信息可以挂载到 rest_api_init 这个钩子函数上。注意接口用的是 register_rest_route 函数。

Endpoints

一个例子：

<?php

function ninghao_rest_hello_callback() {
  return 'hello ~';
}

function ninghao_rest_register_route() {
  register_rest_route( 'ninghao/v1', 'hello', [
    'methods'   => 'GET',
    'callback'  => 'ninghao_rest_hello_callback'
  ] );
}

add_action( 'rest_api_init', 'ninghao_rest_register_route');

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

思路

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

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

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

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

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

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

NGINX 对我说 “The plain HTTP request was sent to HTTPS port”，折腾了 8 小时我才明白他的意思。记录一段折腾经历，证明小恶魔都藏在细节里。最近在做给小程序添加应用后台的课程。小程序访问后端服务接口的时候，要保证接口可以通过互联网访问。我用 SSH 在本地跟我的一台服务器之间打了一个通道，访问接口主机名的时候，让服务器把请求转发给我的在本地开发环境上运行的应用。在《互联网访问本地开发环境》里面介绍了这个方法。

如果你想基于 WordPress 去创建前端 App 或者移动端 App，解决用户的身份验证可以使用 JWT 这种方法，它是一种基于 Token 的验证身份的方法。《WordPress 开发：身份验证（JWT）》这个课程演示了在 WordPress 网站上实施使用 JWT 验证用户身份。先看一下《JWT：JSON Web Token》，了解一下 JWT 是怎么回事。另外还有个在 Node.js 上实施使用 JWT 的课程，有兴趣也可以参考一下。

处理客户端（前端，移动端，桌面端）的请求，返回请求的数据，比如返回一个文章列表。或者处理请求发送过来的数据，比如把请求里带的文章内容保存在网站的数据库里。这些我们都要用到 WordPress 的 REST 接口。

流程

下面是在 WordPress 网站上使用 JWT 验证用户身份的主要流程。

1. 申请  Token：用户使用自己在网站上注册的用户名与密码向网站申请 Token。
2. 签发 Token：网站收到请求验证用户名与密码是否匹配，如果匹配，网站就给用户签发一个 JWT 的 Token。
3. 使用 Token：用户收到网站签发的 Token，以后每次向网站发送请求的时候都可以带着这个 Token，网站接收请求，验证 Token 的有效性，并执行用户请求的行为。

开发 WordPress 项目，正确的做法是在本地开发，然后把对项目做的修改部署到生产环境。按照 《WordPress 开发：开发环境》 这个课程，可以自动化在本地搭建一个开发环境，可以使用 Composer 管理 WordPress。《WordPress 开发：生产环境》，这个课程里演示了自动化搭建生产环境，并部署 WordPress 项目的方法。

本地开发环境与生产环境基本可以保持一致，同样的操作系统（Ubuntu），同样的配置方法。对环境的配置都保存成了文件，修改了配置文件，再次执行配置，可以配置本地开发环境，也可以自动化去配置网站的生产环境。最近更新了 《WordPress 开发：开发环境》，演示了在本地开发环境上发现核心需要更新，更新以后，做一下提交，然后把更新再部署到生产环境的整套过程。

下面介绍一下更新核心并部署到生环境的流程。

Bootstrap 4 的界面组件课程已经发布了，可以帮你快速了解 Bootstrap 最核心的部分。你可以使用 Bootstrap 的组件快速为网站应用创建界面。课程里演示了 Bootstrap 所有组件的使用方法，除了表单部分，我们会单独再做个课程介绍一下表单的使用方法。

学习 Bootstrap 框架，不仅仅是要得到好看的界面，更重要的是去了解它的一些解决问题的思路，比如设计一个界面都需要怎么去组织 HTML 的代码结构。学习 Bootstrap 的组件部分，有几点要注意一下，颜色，尺寸，交互，配置还有事件。

组件可能有不同的颜色，尺寸，有些组件还有些交互功能，配置使用这些功能可以使用 Bootstrap 提供的 data 接口，或者可以通过 JavaScript 代码去配置。带交互功能的组件一般还会触发一些自定义的事件，我们可以监听这些事件去做一些事情。