项目结构
基本组成结构
- pages用来存放所有小程序页面
- utils用来存放工具性质的模块（格式化时间等）
- app.js小程序项目的入口文件
- app.json小程序项目全局配置文件
- app.wxss 全局样式
- project.config.json 项目配置文件
- sitemap.json 配置小程序及其页面是否允许被微信索引
小程序页面组成部分
页面建议都存放在pages文件夹
- .js文件（页面的脚本文件，存放页面数据、时间处理函数）
- .json文件（当前页面配置文件，配置窗口的外观等）
- .wxml文件（页面的模板结构文件）（如同html）
- .wxss文件（当前页面的样式表文件）（如同css）
Json配置文件
小程序项目有4种json配置文件
-
项目根目录中的app.json配置文件（全局配置，包括小程序所有页面路径、窗口外观、界面表现、底部tab等）
- pages：用来记录当前小程序所有页面路径
- window:全局定义小程序所有页面背景色、文字颜色等
- style:全局定义小程序组件所使用的样式版本
- sitemapLocation:用来指明sitemap.json的位置
-
项目根目录中的project.config.json配置文件（对小程序开发工具所做的个性化配置）
- setting种保存了编译相关的配置
- projectname种保存的是项目名称
- appid中保存的是小程序的账号ID
-
项目根目录中的sitemap.json配置文件（SEO优化）
-
每个页面文件夹中的.json配置文件（对单独页面外观进行配置，配置项会覆盖ap.json的window中相同的配置项）
WXML模板
WXML和HTML区别
-
标签名不同
- HTML（div,span,img,a）
- WXML(view,text,image,navigator)
-
属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>
-
提供了类似于Vue中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染
WXSS和CSS区别
-
新增rpx尺寸单位
- css需要手动换算，如rem
- rpx会在不同大小的屏幕上自动进行换算
-
提供全局样式和局部样式（类似vue的scoped）
- 项目根目录中的app.wxss会作用于所有小程序页面
- 局部页面的.wxss样式进队当前页面生效
-
wxss仅支持部分css选择器
- .class和#id
- element
- 并集选择器、后代选择器
- ::after和::before等伪类选择器
.js文件分类
-
app.js
- 整个小程序项目的入口文件，通过调用App()函数来启动整个小程序
-
页面的.js文件
- 是页面的入口文件，通过调用Page()函数来创建并运行页面
-
普通的.js文件
- 普通功能模块文件，用来封装公共函数或属性
组件
常用视图容器类组件
- view （类似div）
- scroll-view（滚动视图）
- swiper和swiper-item（轮播图）
