Python 开发者的微信小程序开发实践

导读

比如，移民申请表照片：

高额工资单照片：

豪车订单照片：

下面，就开干吧！

注册一个微信小程序

接着有三个步骤：邮箱注册、邮箱激活和信息登记：

完成上述三个步骤后，就可以登录进入管理中心：

在基本设置中，我们可以设置微信小程序的名称、头像、说明等基本信息。

在开发设置中，我们可以获取到小程序的 AppID 和 AppSecret，这在后续的开发中会使用到，同时我们可以在此设置小程序服务器的域名：

安装和使用微信 Web 开发者工具

开发微信小程序需要使用到微信 Web 开发工具这一软件。我们下载并安装好。

启动之后，需要我们使用微信扫码进行登录：

之后，新建一个小程序项目：

指定小程序的项目目录、输入小程序的 AppID（管理页面中获取）、输入项目名称，之后我们就进入了微信开发工具的主界面了：

因为我们使用了快速启动的模板，所以自动生成了一个 Hello World 的 Demo。接下来，我们创建我们的票圈神器的小程序页面。

创建微信小程序页面

在创建小程序的页面之前，我们先来了解一下微信小程序的代码结构。

根据微信小程序开发文档的介绍：小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由以下三个文件组成，必须放在项目的根目录。

app.js（定义小程序的逻辑）

app.json（定义小程序的公共配置）

app.wxss（定义小程序的公共样式表）

同时，一个小程序的页面由四个文件组成：

JavaScript 文件（定义页面逻辑）

WXML 文件（定义页面结构）

WXSS 文件（定义页面样式）

JSON 文件（定义页面配置）

微信小程序的视图层负责页面的展示，由 WXML 文件描述页面结构和 WXSS 文件描述页面的样式。

WXML 和 WXSS 是什么东西呢？我们可以拿 HTML 和 CSS 来与之进行类比。虽然它们不一样，但是它们真的很相似。

WXML 是一套微信定义的可嵌套的标记语言，而 WXSS 则具备 CSS 的大部分特性，并对 CSS 进行了扩充和修改。

接下来我们来规划一下我们的小程序的页面构成：

首页列表页：用于显示可用于制作照片的条目；

详情表单页：用于显示照片效果以及接收用户输入信息；

照片结果页：用于显示生成的照片以及提供保存按钮；

创建页面目录和文件

首先，我们在项目目录结构的 pages 路径下新建一个 detail 目录，其下包含三个同名的 JS 文件、WXML 文件、WXSS 文件；一个 result 目录，其下包含三个同名的 JS 文件、WXML 文件、WXSS 文件；最后 pages 目录下的结构如下图所示：

然后，在创建的 JS 文件中输入以下代码：

Page() 函数用来注册一个页面。接受一个 object 参数，以指定页面的初始数据、生命周期函数、事件处理函数等。

使用微信开发者工具的智能提示可以快速生成这些代码：

完成这一步之后，我们打开项目根目录的 app.json 文件：

在pages列表中添加如下代码：

最后 app.json 文件中 pages 列表的值应该为：

编辑列表页面

首先，我们在列表页面放置一个轮播图，让我们的页面不显单调。准备三张图片：

在项目根路径下新建一个名为 imgs 的目录，将三张轮播图片复制进去：

在 index.js 文件的 Page 实例中，在 data 字典添加一个键值对，用于指定本地轮播图片的位置：

删除 index.wxml 文件中的所有代码，输入以下代码以创建一个轮播图：

其中：

swiper 标签表示滑块视图容器；

swiper-item 标签则表示滑块的条目；

block 标签表示一个标签块

我们可以看到，在 block 标签中，我们为其设置了 wx:for 属性，这个属性用于列表渲染，绑定了 Page 的 data 中的 headimg 数组（在微信小程序中，WXML 中的动态数据都来自于对应 JS 文件 Page 中的 data 数据）。

接着，调整轮播图的样式，在 index.wxss 文件中输入以下代码：

最后保存文件，在微信开发者工具中可以预览到我们的轮播图已经创建成功：

创建完轮播图之后，我们继续编辑创建图片列表结构。

在页面的列表结构中，我们使用一个 view 标签作为外部容器，里面定义了一个 block 标签用于遍历图片模板数据生成多个图片信息，定义渲染的数组为 templist，这个我们将在 index.js 文件中进行定义和声明。

同时使用了 navigator 标签，用于页面的跳转，设置一个参数 tid 并将模板的 id 作为值，使其能够跳转到具体模板的详情页面。

然后在 index.wxss 文件中添加以下样式：

如果 templist 数组有合适的数据，那么其渲染出来的页面应该是下面这样的：