项目结构
1. 了解项目基本组成结构
- pages 用于存放所有小程序页面
- utils 用于存放工具性质的模块
- app.js 是小程序项目的入口文件
- app.json 是小程序项目的全局配置文件
- app.wxss 是小程序项目的全局样式文件
- project.config.json 项目的配置文件
- sitemap.json 用来配置小程序及页面是否允许被微信索引
注意：这里有个
project.private.config.json文件
2. 小程序页面组成部分
将所有小程序的页面都存放在 pages 目录中，并且以单独的文件夹存在：
每个页面由4个文件组成：
- .js 文件：页面脚本文件，存放页面的数据、事件处理函数等...
- .json 文件：当前页面配置文件，配置窗口外观、表现等...
- .wxml 文件：页面的模板结构文件
- .wxss 文件：当前页面的样式文件
json配置文件
json是一种数据格式，通过不同的json配置文件，可以对小程序项目进行不同级别的配置
小程序项目中总共有4中json配置文件：
- 根目录中 app.json （全局）
- 根目录中 project.config.json
- 根目录中 sitemap.json
- 每个页面文件夹中 xxx.json
app.json文件
app.json 是小程序项目的全局配置，包括小程序的所有页面路径、窗口外观、界面、底部tab等。
- pages 用来记录当前小程序项目所有页面的路径
- window 全局定义小程序所有页面的背景色、文本颜色等
- style 全局定义小程序组件使用的样式版本
- sitemapLocation 指明sitemap.json文件位置
project.config.json
project.config.json 用于记录我们对小程序开发工具所做的个性化配置
- setting 中保存了编译相关的
配置 - projectname 中保存的是
项目名称 - appid 中保存的是
小程序账号ID
sitemap.json
sitemap.json文件用来配置小程序页面是否允许微信索引，类似网页端SEO
当开发者允许微信索引，微信会通过爬虫形式为小程序页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功时候，小程序的页面将可能展示在搜索结果中
"page": "*"表示所有页面"action": "allow"表示允许索引"action": "disallow"表示不允许索引
页面中.json文件
注意：页面中的json文件配置会覆盖app.json中window全局配置项
新建小程序页面
只需要在 app.json>pages 中新增页面路径，会自动生成对应页面文件
修改项目首页
只需要调整 app.json>pages 数组中页面路径前后顺序，第一个会被当做项目首页渲染
wxml模板
wxml（WeiXin Markup Language）是小程序框架设计的一套
标签语言， 用来构建小程序页面的结构，类似网页开发中HTML
wxml和html区别
1、标签名不同
- html（div、span...）
- wxml（view、text...）
2、属性节点不同
<a href='#'>超链接</a><navigator url='/pages/home/home'></navigator>
3、提供类似vue模板语法
- 数据绑定
- 列表渲染
- 条件渲染
wxss样式
wxss（WeiXin Style Sheets）是一套
样式语言,用于描述wxml的组件样式，类似网页中css
wxss和css区别
1、新增了rpx单位
- css中需要手动进行像素单位换算（rem）
- wxss中rpx在不同屏幕大小自动换算
2、提供全局的样式和局部样式
3、wxss仅支持部分css选择器
js逻辑交互
在js文件中处理用户的操作（点击、位置获取...）
小程序中js文件分为三类：
- app.js 整个项目的入口文件，通过调用App() 函数启动整个小程序
- 页面js文件 页面的入口文件，通过调用Page() 函数创建并运行页面
- 普通js文件 普通功能模块文件，用来封装公共函数或属性供页面使用（如utils文件夹下的js文件）
