文章目录
- 项目基本组成结构
- 基本组成结构 - pages
- 代码构成 - json
- app.json
- project.config.json
- sitemap.json
- 页面的.json
- 新建小程序页面
- 代码构成 - wxml
- 代码构成 - wxss
- 代码构成 - js逻辑交互
- 宿主环境
- 通信模型
- 常用组件
- 组件-视图容器类
- scroll-view 滚动视图
- swiper/swiper-item 轮播图
- swiper常用属性
- 组件-基础内容类
- text
- rich-text
- 组件-其他常用
- button
- image
- navigator
- API
- 事件监听API
- 同步API
- 异步API
项目基本组成结构
| 名称 | 作用 |
|---|---|
| pages | 存放所有小程序页面 |
| app.js | 项目入口文件 |
| app.json | 全局配置文件 |
| app.wxss | 全局样式文件 |
| app.json | 全局配置文件 |
基本组成结构 - pages
小程序所有页面存放入pages，以单独文件夹存在
| 名称 | 作用 |
|---|---|
| .js | 脚本文件、页面数据、事件处理函数 |
| .json | 当前页面配置文件、外观、表现 |
| .wxml | 模板结构 |
| .wxss | 样式表 |
代码构成 - json
json是一种数据格式，以 配置文件 的形式出现，小程序有四种（前三个是根目录的）：
- app.json
- project.config.json
- sitemap.json
- 页面文件夹的.json
app.json
小程序 全局配置 ，包括 页面路径、窗口外观、界面表现、底部tab 
| 名称 | 作用 |
|---|---|
| pages | 页面路径 |
| window | 背景色、文字颜色 |
| style | 样式版本 |
project.config.json
项目配置文件，对开发工具做个性化配置
| 名称 | 作用 |
|---|---|
| setting | 编译相关配置（详情-本地设置） |
| projectname | 项目名称（不是程序名称） |
| appid | 账号id |
sitemap.json
配置小程序页面是否允许 微信索引 
不允许：
“action”：“disallow” –
project.config.json中setting “checkSitMap”：false
页面的.json
配置本页面窗口外观，会覆盖 app.json 的window中相同的配置项
新建小程序页面
在 app.json 中的 pages 添加路径
默认首页在第一行 （index）
代码构成 - wxml
标签语言 类似html
代码构成 - wxss
样式语言 类似css
代码构成 - js逻辑交互
处理用户操作
| 名称 | 作用 |
|---|---|
| app.js | 整个项目入口文件，用App()函数启动 |
| 页面.js | 页面入口文件，用page()创建、调动 |
| 普通.js | 功能模块文件，封装公共函数或属性 |
宿主环境
小程序宿主环境：
- 通信模型
- 运行机制
- 组件
- API
通信模型
主体：渲染层（wxml、wxss）、逻辑层（js脚本）
常用组件
组件-视图容器类
| 名称 | 作用 |
|---|---|
| view | 普通视图 |
| scroll-view | 滚动视图 |
| swiper/swiper-item | 轮播图 |
wxml写结果 wxss写样式
scroll-view 滚动视图
滚动效果
wxml加 scroll-view
wxss给scroll-view加固定高度/宽度
swiper/swiper-item 轮播图
swiper常用属性
加在class后面
组件-基础内容类
text
文本组件，类似于span，是行内元素
| 名称 | 作用 |
|---|---|
| selectable | 长按选中 |
rich-text
富文本组件，把HTML字符串渲染为wxml结构
组件-其他常用
button
按钮组件
| 名称 | 作用 |
|---|---|
| type | 指定按钮类型 |
| size | 小尺寸按钮 |
| plain | 镂空按钮 |
image
图片组件，默认宽300px，高200px
mode属性
navigator
页面导航组件
API
- 事件监听API
- 同步API
- 异步API
事件监听API
以 on 开头，用来监听事件触发
同步API
以 Sync 结尾，执行结果通过函数返回值直接获取。异常报错
异步API
需要 success、fail、complete 接收调用结果
