目录
认识小程序的基本组成
pages：存放小程序页面
utils:存放工具性质的模块
app.js:小程序项目的入口文件
app.json：小程序的全局配置文件
app.wxss:小程序的全局样式文件
project.config.json：项目的配置文件
sitemap.json：配置小程序及其页面是否允许被微信索引
小程序页面组成部分
小程序官方建议把所有的页面都存放在pages目录中，以单独的文件夹存在，如：
每个页面都由四个基本文件组成：
json配置文件的作用
JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。通过不同的json配置文件，可以对小程序项目进行不同的级别配置
app.json文件
app.json是小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。例：
project.config.json文件
project.config.json文件是项目配置文件，用来记录对小程序开发工具所作的个性化配置，例：
sitemap.json文件
微信已开放小程序内搜索，效果类似于PC网页的SEO。 sitemap.json文件用来配置小程序页面是否允许微信索引。
例：
” action“：”allow“代表允许被索引，不允许则改成disallow
页面的.json配置文件
小程序中的每一个页面，可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中的相同的配置项。
例：要求对顶部导航栏的颜色更改
1.在index.json中添加设置导航栏颜色的代码，则当前页面的导航栏颜色改变
"navigationBarBackgroundColor": "#DDD"
2.在app.json文件中的window更改则是全局更改
新建小程序页面
只要在app.json，pages中新增页面的存放路径后保存，小程序开发者工具可自动创建页面文件
例：
修改项目首页（页面顺序）
调整app.json，pages中页面路径的前后顺序即可。如：
默认第一位是项目首页。
了解WXML
WXML是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML
WXML与HTML的区别
1.标签名称不同
2.属性节点不同
3.WXML提供了类似于Vue中的模板语法
了解WXSS
wxss与css的区别
1.wxss新增了rpx
2.提供了全局样式和局部样式
3.wxss只至此部分css选择器
组件
小程序的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类，分别是”
可查看视图容器 | 微信开放文档微信开发者平台文档
https://developers.weixin.qq.com/miniprogram/dev/component/
常用的视图容器类组件
| 名称 | 功能说明 |
|---|---|
| cover-image | 覆盖在原生组件之上的图片视图 |
| cover-view | 覆盖在原生组件之上的文本视图 |
| match-media | media query 匹配检测节点 |
| movable-area | movable-view的可移动区域 |
| movable-view | 可移动的视图容器，在页面中可以拖拽滑动 |
| page-container | 页面容器 |
| root-portal | 使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果 |
| scroll-view | 可滚动视图区域 |
| share-element | 共享元素 |
| swiper | 滑块视图容器 |
| swiper-item | 仅可放置在swiper组件中，宽高自动设置为100% |
| view | 视图容器 |
基础内容
| 名称 | 功能说明 |
|---|---|
| icon | 图标组件 |
| progress | 进度条 |
| rich-text | 富文本 |
| text | 文本 |
表单组件
| 名称 | 功能说明 |
|---|---|
| button | 按钮 |
| checkbox | 多选项目 |
| checkbox-group | 多项选择器，内部由多个checkbox组成 |
| editor | 富文本编辑器，可以对图片、文字进行编辑 |
| form | 表单 |
| input | 输入框 |
| keyboard-accessory | 设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图 |
| label | 用来改进表单组件的可用性 |
| picker | 从底部弹起的滚动选择器 |
| picker-view | 嵌入页面的滚动选择器 |
| picker-view-column | 滚动选择器子项 |
| radio | 单选项目 |
| radio-group | 单项选择器，内部由多个 radio 组成 |
| slider | 滑动选择器 |
| switch | 开关选择器 |
| textarea | 多行输入框 |
导航
| 名称 | 功能说明 |
|---|---|
| functional-page-navigator | 仅在插件中有效，用于跳转到插件功能页 |
| navigator | 页面链接 |
媒体组件
| 名称 | 功能说明 |
|---|---|
| audio | 音频 |
| camera | 系统相机 |
| channel-video | 小程序内嵌视频号视频组件，支持在小程序中播放视频号视频，并无弹窗跳转至视频号 |
| image | 图片 |
| live-player | 实时音视频播放（v2.9.1 起支持同层渲染） |
| live-pusher | 实时音视频录制（v2.9.1 起支持同层渲染） |
| video | 视频（v2.4.0 起支持同层渲染） |
| voip-room | 多人音视频对话 |
地图
| 名称 | 功能说明 |
|---|---|
| map | 地图（v2.7.0 起支持同层渲染 |
画布
| 名称 | 功能说明 |
|---|---|
| canvas | 画布 |
开放能力
| 名称 | 功能说明 |
|---|---|
| web-view | 承载网页的容器 |
| ad | Banner 广告 |
| ad-custom | 原生模板 广告 |
| official-account | 公众号关注组件 |
| open-data | 用于展示微信开放的数据 |
原生组件说明
| 名称 | 功能说明 |
|---|---|
| native-component | 小程序中的部分组件是由客户端创建的原生组件 |
无障碍访问
| 名称 | 功能说明 |
|---|---|
| aria-component | 满足视障人士对于小程序的访问需求 |
导航栏
| 名称 | 功能说明 |
|---|---|
| navigation-bar | 页面导航条配置节点，用于指定导航栏的一些属性 |
页面属性配置节点
| 名称 | 功能说明 |
|---|---|
| page-meta | 页面属性配置节点，用于指定页面的一些属性、监听页面事件 |
API
小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力。
可查看文档：基础 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
