从 0 到 1 开发微信小程序(一):初步认识微信小程序的结构
这是「从 0 到 1 开发微信小程序」系列的第一篇,我是字节莫。
鉴于是光速入门指南
,这里就不涉及微信小程序的运行原理等高深的东西。经过两年的发展,微信小程序的框架已经非常地完善,如果不是一些很底层的需求(如性能优化等),是根本不需要深入到这种程度的。
微信小程序的结构
一个微信小程序是由一个一个的页面(page)组成的,就如同 Windows 程序是由一个一个的窗口组成的一样。开发微信小程序其实就是设计和实现各个页面,然后再实现各个页面间的跳转和交互逻辑。除此之外,还有几个全局文件来控制小程序的某些全局属性(如标题颜色、窗口背景颜色、下方导航栏样式等)。
小程序的全局文件
小程序主要有 app.json
、app.wxss
、app.js
、project.config.json
这四个全局文件。
app.json
app.json
是小程序的全局配置文件,它主要控制的是小程序有哪些页面、页面路径、顶部导航栏(navigationBar)是怎样的、底部的选项栏(tabBar)是怎样的等等。
下方是来自官方文档的一份配置示例:
{
"pages": ["pages/index/index", "pages/logs/index"],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}
上方的示例添加了index
和logs
两个小程序页面;配置了上方导航栏中显示的文字为“Demo”;为下方的选项栏添加了“首页”、“日志”两个选项卡以及它们跳转的页面路径;配置了小程序网络连接的超时时间;启用了 debug 模式;配置了可以跳转到的第三方小程序名单。
我们常用到的配置项会在本系列的第二篇「(二):小程序的基本配置 」中详细说到,因而在此暂且按下不表。
如果实在有兴趣,可以到官方文档中查看关于 app.json
详细的可配置选项。
app.wxss
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用于控制小程序页面组件的样式,可以认为 WXSS 是 CSS 的魔改版。对于一些多个页面都使用到的样式,将其抽离出来作为公共样式,就产生了 app.wxss
全局样式表文件。
app.js
小程序中除了页面的组件和样式,还需要有用户交互逻辑控制,如按下某个按钮跳转至某个页面、长按某个列表项弹出操作菜单等,都属于此。在微信小程序中,逻辑交互控制部分是由 JavaScript 代码来控制的,也就是全局和页面中都包含的 .js 文件。
在全局逻辑代码文件 app.js
中,主要进行小程序注册工作(类似于初始化一个对象),以及获取一些小程序要用到的全局数据等,如获取设备状态栏高度、设备屏幕宽高度、系统信息等。
关于数据绑定与更新、小程序生命周期等这部分的详细内容在后面本系列的第五篇「(五):认识 JavaScript 与第一个小程序页面的逻辑交互 」中会讲到,在此就先不赘述。
project.config.json
project.config.json
是小程序项目的配置文件,里面配置了小程序的名称、AppID、小程序依赖的最低基础库版本等信息。
除此之外,里面还配置了该项目微信开发者工具的外观以及代码编译上传选项等信息,当重新安装了开发工具或者在另一台设备中打开同一个项目时,这些选项就会自动恢复成你的自定义配置。这样做的目的是保证同一个项目在不同的设备中有同样的开发体验。
小程序页面的文件组成
假设微信小程序中有一个页面demo
。
demo.wxml
从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中
HTML
是用来描述当前这个页面的结构,CSS
用来描述页面的样子,JS
通常是用来处理这个页面和用户的交互。同样道理,在小程序中也有同样的角色,其中
WXML
充当的就是类似HTML
的角色。
每一个页面就像一个网页,自然就需要一个文件来描述页面的元素和组成。而demo.wxml
就是用来描述小程序页面构成的文件。与 wxss 和 css 之间的关系相似,wxml 也可以认为是 html 的魔改版,其大部分特性都和 html 相似,但也有许多不同的地方。关于 wxml 详细的内容我们会在在本系列的第三篇「(三):认识 wxml 与常用小程序组件」中讲到,在此就不再赘述,只需了解其在构成微信小程序页面中起到的作用即可。
demo.wxss
上文中已经讲到了 wxss 的作用,有区别的是,app.wxss 对小程序所有页面起作用,而单个页面的 wxss 只对该页面起作用,就像编程中全局变量和局部变量的关系一样。另外,页面 wxss 能够覆盖全局 wxss 中的样式。关于 wxss 的详细内容将在本系列的第四篇「(四):认识 wxss 与第一个小程序页面 」中详细讲述。
demo.js
对于一个小程序而言,只有一个静态的页面是无法提供服务的。因此,还需要具备逻辑交互能力来响应用户对页面的操作,如用户点击按钮、用户滑动滑块条等等。而 JavaScript 脚本正是用勒解决这一问题的。相关内容在前文中已有简略叙述,具体的内容将在本系列的第五篇「(五):认识 JavaScript 与第一个小程序页面的逻辑交互 」中详细讲述。
demo.json
上文中讲到小程序全局配置文件app.json
中配置了小程序的一些全局选项,如小程序页面路径等。那么同理,对于页面的 JSON 配置文件而言,自然就是用于配置这一页面的一些属性了。
页面 JSON 配置文件用于配置页面的一些属性,如顶部导航栏颜色、顶部导航栏文字、该页面是否允许下拉刷新、上拉加载等等。页面配置可以覆盖全局配置。
关于页面配置的详细内容将在本系列的第二篇「(二):小程序的基本配置 」中详细讲述。
总结
通过上文的讲述,我们知道:一个小程序有四个全局配置文件: app.json
、app.wxss
、app.js
、project.config.json
;小程序由多个页面组成,每个页面由四个文件来描述:page.wxml
、page.wxss
、page.js
、page.json
。
至此,我们已经对一个典型小程序的文件组成,以及它们各自的作用有了一定的了解。综上,一个常见小程序项目的文件结构如下:
Miniprogram Project/ 小程序项目目录
├── cloudfunctions 云函数目录
│ └── login
│ ├── index.js
│ └── package.json
├── Miniprogram 小程序目录
│ ├── app.js 小程序全局逻辑代码
│ ├── app.json 小程序全局配置文件
│ ├── app.wxss 小程序全局样式表文件
│ ├── components 自定义组件目录
│ │ └── navigationBar 自定义组件
│ │ ├── navigationBar.js
│ │ ├── navigationBar.json
│ │ ├── navigationBar.wxml
│ │ └── navigationBar.wxss
│ ├── images 图片文件目录
│ │ ├── img1.png
│ │ ├── img2.png
│ │ └── img3.png
│ └── pages 小程序页面目录
│ ├── about 页面
│ │ ├── about.js 页面逻辑代码
│ │ ├── about.json 页面配置文件
│ │ ├── about.wxml 页面结构文件
│ │ └── about.wxss 页面样式表文件
│ └── index
│ ├── index.js
│ ├── index.json
│ ├── index.wxml
│ ├── index.wxss
│ └── user-unlogin.png
└── project.config.json 项目与环境配置(AppID、小程序名称、基础库版本等配置)
最后
第一次写一个系列,同时我也只是业余的小程序开发,文章难免会存在错漏或是不足之处,请务必要指正,不吝感激!
下一篇:「 从 0 到 1 开发微信小程序(二):小程序的基本配置 」
点击数:103