博客

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

思路

小程序的页面滚动到底部的时候，会触发一个 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 代码去配置。带交互功能的组件一般还会触发一些自定义的事件，我们可以监听这些事件去做一些事情。

学习使用 Bootstrap 这个库是最好的学习 HTML 与 CSS 的方法，当然还有一点 JavaScript。如果您刚刚起步学习 Web 开发，那首先要学 HTML 与 CSS。有一点基础以后，就可以去学习使用 Bootstrap 去设计界面了。它给了我们一套界面设计框架，学习它是怎么组织的 HTML 代码结构，然后在上面去应用 CSS 样式，CSS 类的命名方式，各种选择器，如何利用各种伪类与伪元素。Bootstrap 里面的东西主要分成了四个部分。布局，内容，组件，还有工具。我们先来了解一下 Bootstrap 的布局（Layout）。

布局（Layout）

网格是设计界最常用的工具。Bootstrap 使用了 12 栏网格（Grid）的布局系统，就是它把一行（Row）内容分成了十二栏（Column）。你可以为一行内容里面的每一个栏去指定它占用的栏数，一行最多只能显示十二栏宽度的内容。

比如你的界面上需要一块三栏显示的内容，A，B还有 C，你可以让 A 占用 6 栏宽度，B 占用 4 栏宽度，剩下的两个网格宽度留给 C 。这样 A，B，C 这几栏内容加起来的宽度正好是 12 个网格，所以它们也就正好可以在一排显示。如果一排内容的宽度超过了 12 个网格，那后面的栏会自动给挤到第二排显示。

有天早上起来，打开宁皓网，点开用户列表一看，我靠，一群 “开票” 广告用户名（开票请加q...）。一看就知道是用某种机器软件自动注册的用户名，每个用户名会稍微有点变化，每间隔一段时间就会自动注册一个这样的用户。我在后台添加了一个黑名单，禁止用户名里带 “票”。管用了一阵子，不过看来对方早有准备，他手工试了几下以后，发现 “票” 这个字被禁以后，他就把 “票”，改成 “Piao” 了。

后来我就干脆，把 “票”，“漂”，“Piao” ... 以及其它出现在垃圾用户名里的字符都放到黑名单里边，心想这回肯定没事了。结果第二天一早又发现，这哥们不 “开票” 改卖 “建材” 了。然后我就又禁用一轮，他一边注册， 我一边删，一边添加黑名单。后来可能是他累了，最后放弃了。我不想在页面上添加反人类的验证码，或者让用户玩拼图游戏。是不是可以通过机器学习来解决。

Bootstrap 4 是地球上最受欢迎的 CSS 界面框架。最新版的 Bootstrap 4 已经发布测试版，现在我们的网站应用的界面已经可以基于 Bootstrap 4 去开发了。宁皓网录制了一批新鲜的 Bootstrap 课程，刚刚发布了 《Bootstrap 4：网页布局》，其它组件的使用方法本月会陆续发布完。

学习 Bootstrap

Bootstrap 的基本使用是非常简单的，仔细地看看官方文档就能直接用了，不过即使是老手，也经常在文档中迷失。正确的方法是先看宁皓网的视频：） 然后再去看文档。