一、JSON配置文件
1. app.json 文件
pages:[] 用来记录当前小程序所有页面的路径
window:{} 全局定义小程序所有页面的背景色、文字颜色等
style: 全局定义小程序组件所使用的样式版本
sitemapLocation: 用来指明sitemap.json的位置
默认如图:

2. project.config.json (项目配置文件,用来记录我们对小程序开发工具所做的个性化配置)
setting: 中保存了编译相关的配置
projectname: 中保存了项目名称
appid: 小程序ID
3. sitemap.json (小程序内搜索,类似于PC网页的SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引)
默认如图:

4. 页面的 .json 配置文件 (每一个页面可以使用.json文件对页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项)
二、 WXML 模板
1. WXML 和 HTML 的区别
1.1 标签名称不同
HTML(div,span,img,a)
WXML(view,text,image,navigator)
1.2 属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>
1.3 提供了类似于 Vue 中的模板语法
数据绑定
列表渲染
条件渲染
三、WXSS (样式语言,类似网页开发的css)
WXSS 新增了 rpx 尺寸单位;
提供了全局样式和局部样式(app.wxss是全局样式,局部页面的 .wxss 仅对当前页面生效);
仅支持部分的CSS选择器(.class #id element 并集选择器 后代选择器 ::after ::before等伪类选择器)
样式导入:@import "路径"
四、小程序中的 .js 文件(处理用户的操作)
1. app.js 是整个小程序项目的入口文件,通过调用App()函数来启动整个小程序
2. 页面的 .js 是页面的入口文件,通过调用Page()函数来创建并运行页面
3. 普通的 .js 是普通的功能模块文件,用来封装公共的函数或属性供页面使用
五、宿主环境(host environment)是程序运行所必须依赖的环境(Android 和 iOS 是 微信 的宿主环境,微信是 小程序 的宿主环境)
1. 小程序宿主环境包含的内容
1.1 通信模型(由微信客户端进行转发)
1.1.1 通信主体 渲染层(WXML WXSS)和逻辑层(JS脚本)之间的通信
1.1.2 逻辑层和第三方服务器之间的通信

1.2
1.3 组件分类
1.3.1 视图容器
view (类似于div)
scroll-view (可滚动的视图区域)
swiper和swiper-item ( 轮播图容器 和 轮播图的 item )
1.3.2 基础内容
1.3.3 表单组件
1.3.4 导航组件
1.3.5 媒体组件
1.3.6 map地图组件
1.3.7 canvas画布组件
1.3.8 开放能力
1.3.9 无障碍访问
1.4 API
1.4.1 事件监听API(以 on 开头,用来监听某些事件的触发)
1.4.2 同步API (以 Sync 结尾)
1.4.3 异步API
六、数据请求
1. 配置 request 合法域名
登录微信小程序管理后台 -> 开发管理 -> 开发设置 -> 服务器域名 ->修改 request 合法域名

2. get post 请求
wx.request({
url: '', //接口地址,基于 https 协议
method:'GET/POST', //请求方式
data:{ //发送到服务器的数据
name:"zs",
age:20
},
success:(res)=>{ //请求成功之后的回调函数
console.log(res.data);
}
})

七、页面导航
1. 声明式导航(在页面声明一个<navigator>导航组件,通过点击<navigator>实现页面跳转)
1.1 跳转 <navigator> 需要指定 url (页面跳转的地址,必须以 / 开头)和 open-type (跳转方式 tabBar 页面:switchTab;非 tabBar 页面:anvigate 或者不写 open-type )属性。
1.2 后退 <navigator>需要 open-type='navigateBack' delta='1'(后退层级,数字,只返回上一级可以不写delta 属性)

2.编程式导航(调用小程序的导航API,实现页面跳转)
2.1 跳转到 tabBar 页面,调用 wx.switchTab() 方法

2.2 跳转到非 tabBar 页面,调用 wx.navigateTo( ) 方法

2.3 返回上一级或多级,wx.navigateBack( ) 方法

八、导航传参
1. 声明式导航传参

2. 编程式导航传参

3. 在 onLoad 中接收导航参数

4. 使用参数 (存到data中,然后拼接到接口里)

九、页面事件
1. 下拉刷新
1.1 下拉刷新配置


1.2 下拉刷新窗口样式配置


1.3 关闭下拉刷新界面


2. 监听页面上拉触底事件

3. loading 提示框


4. 上拉触底 节流 处理




十、 自定义编译页面


十一、wxs 和 javaScript 的关系






