02

小程序前端开发

1). 开发环境

现在，打开你的小程序开发工具，使用 创建一个新项目。（这里没有多余的，所以我先使用测试环境）

2). 建立模板

可以先勾选“创建普通的快速入门模板”，生成官方的测试demo，如下图：

我们先来看一下目录结构，app.js、app.json、app.wxss分别对应全局方法、全局配置参数、全局样式，在具体包中，.js、.wxml、.wxss对应相应的元素。

3).一个简单的页面就生成了，我们来看看效果吧。

很简单，但是大家可以看到“大事件”里面的内容都是硬编码的，这时候就需要后端来提供数据了。

03

服务器部分

1).安装5大项：安装环境 apt-get -dev

安装 pip

安装 pip

使用 apt-get 安装

安装 pip

2). 配置

首先，在你的 /var/www/ 目录中创建一个测试目录，例如 /var/www#test

然后使用以下命令将此目录的权限更改为 777 /var/www/test

规则如下，因为是测试用例，为了方便，直接用777。

3).

目录结构如下：

所有配置文件都在/etc/中，每个虚拟主机都已安排在/etc//目录中

启动程序文件在/usr/sbin/

日志文件放在/var/log/中，分别是.log和.log

在 /etc/init.d/ 下创建启动脚本

默认虚拟主机目录设置在/usr///www

启动服务：/etc/init.d/，重启服务：/etc/init.d/

现在我们需要进入配置，修改配置文件。vim /etc//site-/

4）服务器普遍兼容各种Web框架，需要的实现非常简单，资源消耗轻量，速度也相当快。

此时我们需要把我们的测试运行项目放入“准备”步骤中创建的测试目录中，我选择的FTP工具是：xftp。

我传入了一个简单的测试文件 wsgi.py，并使用命令 /var/www/# vim wsgi.py 来预览它。

此时在测试目录下输入命令-w 4 -b 127.0.0.1:8000 wsgi:app即可运行。

此时访问服务器即可看到“ ”可以正常显示。

04

小程序后端开发

我们用的后端是一个框架，加+就可以快速搭建。首先需要一些基础知识。相信大家在学习了这么久，这个完全不是问题。现在，我们来学习一下怎么用吧。

1). 获取对象

这是一个最简单的demo，执行流程是：从模块中获取对象app，通过路由执行方法，返回内容，此时浏览器访问（默认端口5000）：127.0.0.1:5000/，就可以看到国际化的常规界面了。

2）路由

唯一 URL

这条规则看上去有点混乱，其实是不可理解的。优点是：

如果用户忘记了尾随斜杠，这将允许关联的 URL 接管并像任何其他服务器一样工作。

这可确保 URL 是唯一的，有助于防止搜索引擎对同一页面进行两次索引。如果您真的记不住，最好的办法就是忘掉它：使用相同的 URL，但不要在末尾加上“/”。

3). 模板渲染

很多时候，当用户访问一个 URL 时，我们需要返回一个接口给用户，当然我们不会自己去渲染 HTML，因此配备了一个模板引擎。

看完下面的代码示例，相信你就会明白。

我们创建一个“”文件夹来存储模板。模板将在该文件夹中搜索。因此，如果你的应用程序是一个模块，那么这个文件夹应该与模块处于同一级别；如果它是一个包，那么这个文件夹就是包的子目录：

#案例1模块：

/.py

/

/.html

#案例2 包装：

/

/.py

/

/.html

4).GET 和 POST

请求方法不止两种，不过最常用的就是这两种，如果对这两种不熟悉可以先查看HTTP方法的资料，这里我们只在 中演示它们的用法。

5).请求对象

我先模拟一个简单的登录操作，首先是控制器：

可以看到执行流程：

获取请求

确定请求类型

获取登录数据

() 方法验证登录

如果登录成功，则执行()方法

若登录失败，添加失败信息并返回失败模板

以下是上面使用的两种方法：

6). 数据渲染

那么，我们在小程序端该如何获取并展示数据呢？我们先简单读一下小程序官方文档。

请注意，小程序以纯异步方式发送请求。我们来模仿一下：

我们把获取的数据保存在变量“”中。我们再读一遍文档，看看小程序是如何进行数据绑定的。

然后我们把之前硬编码的文字替换成“{{}}”，然后刷新页面，就可以看到数据已经显示出来了。

看一下效果：

好了，按照以上这些步骤，一个完整的流程就算完成了，虽然实现了一个小功能，但是麻雀虽小，五脏俱全，接下来我们再来详细了解如何改造和丰富我们的项目。

例如，稍加努力即可：