Django+微信小程序开发待办清单：准备工作

随着移动互联时代的蓬勃发展，开发者可以在各类不同的平台创造 App 应用，比如 Android、IOS、Web 端等等。与其他移动平台的 App 相比，微信小程序 具有某些方面的巨大优势：

• 它依托于微信内部。由于微信在国内恐怖的垄断地位（以及强社交属性），微信小程序出生就具有巨大的流量池。
• 同样因为小程序的底层由微信维护，因此天然就具有了跨平台的基因。

本章让我们小试牛刀，熟悉下如何开发微信小程序吧。

准备工作

首先下载微信小程序开发工具，官方地址在这里，下载并安装稳定版即可（笔者下载的版本是1.05.2111300）。

安装完成后打开开发工具并选择创建小程序，如下图。

过程中如果提示注册微信公众平台账号，跟着弄就行。

• 项目名称： frontend ，翻译过来是”前端“。后续章节还会涉及到 Django 代码，也就是 backend ”后端“。
• 目录： D:\Developer\Py\django_weixinapp_tutorial\frontend 。你也可以根据习惯，将项目存放在其他地方。
• AppID：这是正式小程序的唯一编号。开发时选测试号就Ok。如果你还没有测试号，那就跟着官方指南申请，并不复杂。

其他选项按图中填即可。

点击确定，就进入小程序项目的开发界面了：

开发工具这样就准备好了。

项目创建后，各个文件中有一些初始代码。这实际上是个获取用户信息的小 Demo ，读者有兴趣可以先研究研究。

项目结构

可以看到目录里有些以前没见过的文件格式，像 .wxml 、 .wxss ，这都是啥?

不慌，接下来逐步了解小程序的项目结构，和几个非常重要的文件。

app.js

微信小程序此文件中注册（通过调用 App()），是整个小程序的入口。你可以在这里定义生命周期函数，监听小程序是否切换后台、是否初始化完成、设置全局变量等等。示例代码如下：

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

这个文件运行 Javascript 代码。

app.json

app.json 文件用来对微信小程序进行全局配置，比如页面文件的路径、窗口外观、设置网络超时时间等。

比如初始的代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

仔细看上面的字段。pages 指定了小程序共有哪几个页面（初始项目有 index 和 logs 两个页面）。window 指定了全局页面的基本配置，比如导航栏背景色、字体颜色、内容等等。

app.wxss

这个文件的后缀是 .wxss 。WXSS是一套样式语言，用于描述小程序页面的样式，它的作用和语法都类似于浏览器 Web 的 .css 文件。示例：

/** common.wxss **/
.small-p {
  padding:5px;
}

小程序页面

一个小程序通常由多个页面组成。首先你得有个首页对吧；如果是电商平台，还得有产品详情页。小程序展现给用户的，就是所有页面的集合。

一个标准的小程序页面由四个文件组成，分别是：

• .js：这是个 Javascript 文件，它表述了页面的主要逻辑。
• .wxml：类似传统 Web 开发的 .html 文件，是页面的结构。
• .json：本页面的配置文件。（前面的 app.json 是全局配置）
• .wxss：用于描述本页面的样式。

小程序通过目录将每个页面的文件组织起来，互不影响。

观察下项目初始的 pages/index/ 和 pages/logs/ 文件夹，都包含上面的4个文件。

以上就是小程序最核心的结构。

总结

总结下小程序启动的流程：

• 小程序在 app.js 中注册；
• 通过 app.json 的 pages 字段，得知首页为 pages/index/index；
• 搜索 pages/index/ 路径，加载 index.js 、index.json 、index.wxml 、index.wxss，并各司其职；
• 渲染页面并呈现给用户。

感觉不难对吧。下一章让我们真正动手，写一个demo小程序吧。

点赞 or 吐槽？来博客或GitHub评论区！