微信小程序笔记(1):小程序的代码构成和目录文件结构

微信小程序的代码构成

小程序的中的文件类型分为四种,分别为:

文件后缀 作用
.json 配置文件
.wxml 模板文件(类似web开发中的HTML)
.wxss 样式文件(类似web开发中的CSS)
.js 脚本逻辑文件,JavaScript。

json文件的注意事项

  1. JSON文件都是被包裹在一个大括号中{},通过key-value的方式来表达数据。
  2. JSON的Key必须包裹在一个双引号中。
  3. JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。
    • 数字,包含浮点数和整数
    • 字符串,需要包裹在双引号中
    • Bool值,true 或者 false
    • 数组,需要包裹在方括号中 []
    • 对象,需要包裹在大括号中 {}
    • Null
  4. JSON 文件中无法使用注释,试图添加注释将会引发报错。

wxml文件与html文件的区别

  1. 一些标签名字不同,如div在wxml中叫view,span在wxml中叫text。
  2. 提供了数据绑定、列表渲染、条件渲染、模板、引用等新功能

wxss相对于CSS的扩充

  1. 新增加了rpx的计量单位,开发者可以免去换算的烦恼。
  2. 提供了全局的样式和局部样式。app.wxss可以作用于所有的页面。
  3. 部分CSS的标签如:div,span等的选择器不在支持,转而支持微信小程序自带的一些标签,如view标签。

微信小程序的目录结构

每个微信小程序都有一致的文件结构。(类似于WPF与WinForm的开发)
主要分为全局配置,和各个页面的配置,还有新增加的sitemap配置:

整体配置

小程序的整体配置需要三个文件来进行说明,并且这三个文件必须放在项目的根目录下:

文件 必需 作用
app.js 小程序逻辑
app.json 小程序公共配置
app.wxss 小程序公共样式表(类似于CSS)

除了上面三个配置文件外,小程序项目中实际上自带了一个名为project.config.json的文件:该文件的作用为保存你在开发项目时的配置,方便在其他设备上继续开发。

页面配置

小程序的每个页面同样需要一定的文件来进行配置和运行,具体如下:

文件 必需 作用
js 页面逻辑
wxml 页面结构
json 页面配置
wxss 页面样式

一般来说,为了方便,我们把小程序中文件的名字设置的和页面的名字一样。

微信小程序笔记(1):小程序的代码构成和目录文件结构

上一篇:0031 微信开发(05 公众号自定义菜单)


下一篇:0029 微信开发(03 获取和存储AccessToken)