小程序项目结构

项目的基本组成结构

1. pages用来存放所有小程序的页面。
2. utils用来存放工具性质的模块。
3. app.js小程序项目的入口文件。
4. app.json小程序项目的全局配置文件。
5. app.wxss小程序项目的全局样式文件。
6. project.config.json项目的配置文件。
7. sitemap.json用来配置小程序及其页面是否被微信索引。

小程序页面的组成部分

小程序的页面存放在pages目录中，以单独的文件夹存在，其中有.js、.json、.wxml、.wxss文件。

1. .js文件：页面脚本文件，存放页面的数据、事件处理函数等。
2. .json文件：当前页面的配置文件，配置窗口外观表现等。
3. .wxml文件：页面的模板文件结构。
4. .wxss文件：当前页面的样式表文件。

小程序的JSON配置文件

JSON配置文件的作用

JSON配置文件对小程序项目进行不同级别的配置。
分为4种JSON配置文件：
（1） 项目根目录中的app.json配置文件
（2） 项目根目录中的project.config.json配置文件
（3） 项目根目录中的sitemap.json配置文件
（4） 每个页面文件夹中的.json配置文件

app.json文件

当前小程序的全局配置，包括小程序的所有页面路径、窗口外观、界面表现、底部tab等，例：

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

4个配置项作用：
（1） pages：用来记录当前小程序所有页面的路径。
（2） window:全局定义小程序所有页面的背景色、文字颜色等。
（3） style:全局定义小程序组件所使用的版本样式。
（4） sitemapLocation:用来指明sitemap.json的位置。

project.config.json文件

项目配置文件，用来记录小程序开发工具所做的个性化配置，例如：

• setting中保存编译相关的配置
• projectname中保存的是项目名称
• appid中保存的是小程序的账号ID

sitemap.json文件

用来配置小程序页面是否允许微信索引

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  //"action":"disallow" 不允许搜索
  "page": "*"
  }]
}

页面的.json配置文件

小程序中的每一个页面，可以使用.json文件对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项。

新建小程序页面

在app.json->pages中新增页面的存放路径，小程序开发者工具即可自动创建对应页面

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

修改项目首页

只需调整app.json->pages数组中页面路径的前后顺序，小程序会把排在第一位的页面当作首页进行渲染。

小程序的WXML模板

什么是WXML

类似HTML

WXML和HTML的区别

（1） 标签名称不同
div->view,span->text,img->image,a->navigator
（2） 属性节点不同
html:超链接>
wxml:"<navigator url="/pages/home/homne"></navigator>"
（3） 提供类似vue中的模板语法

• 数据绑定
• 列表渲染
• 条件渲染

WXSS样式

什么是wxss

类似于css的样式语言

wxss和css的区别

（1） 新增了rpx尺寸单位

• css需使用rem单位换算
• wxss在底层支持新的尺寸单位rpx，在不容屏幕自动换算
  （2） 提供全局的样式和局部样式
• 项目根目录中app.wxss会作用于所有小程序页面
• 局部页面的.wxss样式仅对当前页面生效
  （3） WXSS仅支持部分CSS选择器
• .class和#id
• element
• 并集选择器、后代选择器
• ::after 和::before等伪类选择器

小程序的.js文件

（1） app.js
整个小程序项目的入口文件，通过调用App()函数来启动整个小程序
（2） 页面的.js文件
页面的入口文件，通过调用Page()函数来创建并运行页面。
（3） 普通的.js文件
普通的功能模块文件，用来封装公共函数或属性