随着移动互联时代的蓬勃发展，开发者可以在各类不同的平台创造 App 应用，比如 Android、IOS、Web 端等等。与其他移动平台的 App 相比，微信小程序 具有某些方面的巨大优势：
- 它依托于微信内部。由于微信在国内恐怖的垄断地位（以及强社交属性），微信小程序出生就具有巨大的流量池。
- 同样因为小程序的底层由微信维护，因此天然就具有了跨平台的基因。
本章让我们小试牛刀，熟悉下如何开发微信小程序吧。
准备工作首先下载微信小程序开发工具，官方地址在这里，下载并安装稳定版即可（笔者下载的版本是1.05.2111300）。
安装完成后打开开发工具并选择创建小程序，如下图。
过程中如果提示注册微信公众平台账号，跟着弄就行。
- 项目名称： frontend ，翻译过来是”前端“。后续章节还会涉及到 Django 代码，也就是 backend ”后端“。
- 目录： D:DeveloperPydjango_weixinapp_tutorialfrontend 。你也可以根据习惯，将项目存放在其他地方。
- 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.jsonapp.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评论区！
最新评论