小程序的代码构成讲解小程序入门与实战三

26次阅读

共计 1416 个字符，预计需要花费 4 分钟才能阅读完成。

上一章节我们已经知道如何申请小程序的AppId, 并且也安装了微信开发者工具。接下来我们需要了解小程序的代码构成。

在上一章节我们已经利用微信开发者工具快速构建了一个名称为 HelloWorld的小程序项目，可以借这个项目来看看。

点击菜单栏“编辑器”，就可以看到这个小程序的代码构成了了。

可以看出构建小程序项目，根目录下必须要有 app.js,app.json,app.wxss 这 3 个文件。

pages 目录是用于存放页面，每个页面就是一个文件夹，分别由.json、.wxml、.wxss、.js 文件构成。

utils 目录主要用于存放各种工具类，全局方法等。

JSON 配置

项目的根目录app.json，是小程序的全局配置。

也就是说，小程序的所有页面路径、所有界面表现、底部 tab 等都在这里面统一配置。

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

我给大家讲一下这个配置各个项的含义:

pages 字段

指定小程序由哪些页面组成，每一项都对应一个页面的路径信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。也就是说，你的小程序新增或者减少页面，都需要对 pages 数组进行修改

window 字段

用于设置小程序的状态栏、导航条、标题、窗口背景色。

别急，如果你不是很理解的话，我们后面会在项目中详细的讲。

WXML 模板

WXML 相当于 HTML 的角色，用来描述当前页面的结构。

小程序给我们包装好了有基本能力的标签，还提供了地图、视频、音频等组件能力。

常用的有 view、button、text 等。
相当于 HTML 中的 div、button、span。

项目中会详细讲解。

WXSS 样式

WXSS 具有 CSS 大部分的特性，跟 CSS 一样用来描述页面的样子。

小程序、在 WXSS 做了一些扩充和修改。

支持新的尺寸单位 rpx，对于我们来说可以免去换算的烦恼。
提供了全局的样式，app.wxss 作为全局样式，会作用于所有的页面。
WXSS 仅支持部分 CSS 选择器。

JS 逻辑交互

WXML 跟 WXSS 组成了了静态页面，需要用 JS 来和用户做交互。

在小程序中还提供了丰富的 API，我们会在项目中详细的讲解。

##### 总结
通过本章节我们可以知道：

小程序项目必须要有构建小程序项目，根目录下必须要有 app.js,app.json,app.wxss 这 3 个文件
构建小程序的一个页面必须要有.json、.wxml、.wxss、.js 这 4 种文件类型。
WXML 相当于 HTML , WXSS 相当于 CSS,JS 用于逻辑相互,JSON用于配置页面的背景颜色，顶部导航栏的文案，颜色等。