起步
目录介绍
建议每个页面都以单独的文件夹存放在pages中
JSON配置文件介绍
小程序中共有4种JSON配置文件
- 项目根目录中的
app.json
:包含小程序的所有页面路径、窗口外观、界面表现、底部tab等。 project.config.json
:项目配置文件,记录小程序开发工具所做的个性化设置sitemap.json
:小程序内搜索设置,类似于网页的SEO.json
:每个页面文件夹中的.json
文件用于对本页面窗口的外观进行配置,页面中的配置项会覆盖app.json
的window中相同的配置项
页面简述
- 首页设置:
app.json
中pages字段第一条即为首页路径 - WXML和HTML区别:
- 标签名不同:
- div == view
- span == text
- img == image
- a == navigator
- 属性节点不同:
- eg:
<navigator url=""></navigator>
- eg:
- 提供了类似vue的模板语法
- 标签名不同:
- WXSS和CSS的区别
- 新增了rpx单位(自动换算)
- 提供了全局样式和局部样式:全局样式
app.wxss
,局部样式.wxss
- WXSS只支持部分CSS选择器:类、id、元素、并集、后代、伪类
- js文件
- app.js:整个小程序入口文件,通过
App()
函数来启动整个小程序 - 页面的
.js
文件:页面入口文件,通过调用Page()
函数来创建并运行界面 - 普通
.js
文件:用来封装公共的函数或属性供页面使用
- app.js:整个小程序入口文件,通过
小程序宿主环境
即微信为小程序提供的支持
-
通信模型
-
渲染层(wxml、wxss)和逻辑层(js)之间的通信
-
逻辑层和第三方服务之间的通信
-
-
运行机制
- 小程序的启动过程
- 把小程序的代码包下载到本地
- 解析app.json全局配置文件
- 执行app.js小程序入口文件,调用App()创建小程序实例
- 渲染小程序首页
- 页面渲染过程
- 加载解析页面的.json配置文件
- 加载页面的.wxml模板和.wxss样式
- 执行页面的.js文件,调用Page()创建页面实例
- 小程序的启动过程
-
组件
-
视图容器
-
基础内容
-
表单组件
-
导航组件
-
媒体组件
-
map 地图组件
-
canvas画布组件
-
开放能力
-
无障碍访问
-
-
API
- 事件监听API:以on开头,用来监听某些事件的触发
- 同步API:以Sync结尾的API,执行结果可以通过函数返回值直接获取,如果执行出错会排除异常
- 异步API:需通过success、fail、complete接收调用的结果