博客

小程序案例课程介绍

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

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

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

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

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

你想了解一项新技术，如果发现宁皓网有相关课程， 一定要从宁皓网开始：）下面是一个 Node.js 应用开发的学习路径，视频里出现的每一行代码，都亲手敲几遍。

准备

Node.js 就是让你用 JavaScript 语言开发应用，所以在学 Node.js 之前最好先了解一下 JavaScript 语言本身。先完成下面这两个课程。

1. JavaScript 基础
2. ES6 / ES2015

以后我们慢慢会在课程里加一点机器学习的内容，很多跟机器学习相关的库都是用 Python 语言写的。所以我们值得花点时间了解一下这门语言。宁皓网已经发布了一个 Python 课程，用 20 分钟，介绍一下从学习的准备到语法的基础。假设你对程序设计有了一点基础，了解一些基础的概念，在课程里我会非常快速地带你了解一下 Python 语言的语法。这只是一个小小的开始，先热热身，后面还有更多内容。

课程地址：https://ninghao.net/course/5133

学习 Python，如果你喜欢用 IDE ，可以试一下 Pycharm，社区版可以免费使用。或者也可以直接用个简单的文本编辑软件，比如 Atom。安装个 script 包，就可以直接在编辑器里运行 Python 代码了。

安装 Python

在系统上先安装一下 Python，用系统包管理工具可以很方法安装 Python，Windows 用 Chocolatey，macOS 用 Homebrew。

macOS 用户：

macOS 系统自带 Python 2，我们可以再用 Homebrew 安装一个 Python 3 。

brew install python3

完成以后可以使用 python3 这个命令行工具。

Windows 用户：

choco install python

最近测试小程序的接口，需要我提供一个后端服务的文件上传接口。可以使用 Node.js  创建一个这样的上传文件的接口。主要会用到 Express，Multer 这两个 Package。另外可以把上传的结果存储在数据库里，我用了一个叫 Loki 的数据库，这个数据库会在内存里运行，使用简单，速度快。

准备项目

为项目准备一个 package.json 文件。

npm init -y

安装包

npm install express multer cors --save

express 用来创建接口，multer 可以处理文件的上传，cors 可以方便的解决跨域请求问题，比如你的前端应用或者小程序要请求后端服务接口，就会有跨域问题，你得设置一些头部信息解决这个问题。

再安装一个开发依赖叫 nodemon，它会帮我们重启服务。

npm install nodemon --save-dev

文件上传

在项目下面创建一个 upload.js，可以放在 src 目录的下面。内容如下：

src/upload.js

前两天我请了在金山软件公司担任前端小组长的一位朋友（Eyas）帮忙写了一份前端技术需求。大家可以把这份实际工作的技术需求当成一条学习路径，结合宁皓网的课程，给大家列一下学习顺序。我又咨询了一下在 Bilibili 工作的朋友，他也是做前端，要求基本差不多，Bilibili 用的是 Vue 前端框架，所以需求里 Vue.js 是必须要会的东西。前端工作在上海，现在的薪水在 15K ~ 20K 。

两年前我在宁皓网的首页介绍视频里开玩笑说自己的愿望就是实现老婆的愿望，比如在历下区（济南市的一个有优质教育资源的区）买个学区房啥的。这是小雪的心愿，有那么几天我也真的是每天都想想这事，但是真的没有太当真。今年这个愿望别扭地实现了。

自由职业多年养成自由散漫的习惯，也或许是自己天生 “不羁放纵爱自由”。这导致自个儿抗压能力较弱，感受到太大压力，我就不能正常工作。遇到点啥事都想着是不是被限制了，经常逃避，给自己借口，需要自由地空间。这应该也是懦弱地表现。

打从闺女出生起，小雪就开始想着她将来在哪块上学。我真是从来没当回事，我只想能让闺女有个快乐自由地成长环境。在这点上，我跟小雪一直是有分歧的，她宁愿选择条件差的居住条件换取一所好的学校。我觉得小孩应该有个能跟伙伴们快乐玩耍地空间。

我住的有点偏，朋友们来一回都劝我们抓紧搬。不过我来济南二十年，一直在城市边缘荡悠，可能是习惯了。以前早上上班的时候都得在公交车上睡一觉。有的公交车是循环线路，睡过头，过站了，起来的时候会一懵，得想想自己这是上班还是下班。

在小程序里的页面，你要在小程序的主配置文件 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() 里面添加一个对应的生命周期方法，这些方法会自动被执行。