1:数据绑定
1:数据绑定的基本原则
![](https://img-blog.csdnimg.cn/img_convert/196f5236b8dd22671222fd89f5e1861a.png)
2:在data中定义页面的数据
![](https://img-blog.csdnimg.cn/img_convert/5eb78f92b3fc03bb7c233d3161b3fd4d.png)
3:Mustache语法
![](https://img-blog.csdnimg.cn/img_convert/e0e3440315be13dc3686948cbf269f69.png)
4:Mustache的应用场景
1:常见的几种场景
![](https://img-blog.csdnimg.cn/img_convert/cf03467a6d54ed44618fa8d753939954.png)
2:动态绑定内容
![](https://img-blog.csdnimg.cn/img_convert/b5938edd41e20d1f566677b190337380.png)
3:动态绑定属性
![](https://img-blog.csdnimg.cn/img_convert/d0daf5783d52c100b5ae69135218a163.png)
4:三元运算
![](https://img-blog.csdnimg.cn/img_convert/9a2a90add8b990e7b576fccae19f2ba5.png)
4:算数运算
![](https://img-blog.csdnimg.cn/img_convert/b352417345bd7eb2bdb534bbd10c7a24.png)
2:事件绑定
1:什么是事件
![](https://img-blog.csdnimg.cn/img_convert/3eb98d513ab3679bd143bd79130681c9.png)
2:小程序中常用的事件
![](https://img-blog.csdnimg.cn/img_convert/f2e33387a6e65f8e018369f3af225cce.png)
3:事件对象的属性列表
![](https://img-blog.csdnimg.cn/img_convert/58e768be30b03f940506bdfbc538acd6.png)
4:target和currentTarget的区别
![](https://img-blog.csdnimg.cn/img_convert/a17f9684a8d3b3812afea96a3b6ae33c.png)
5:bindtap的语法格式
![](https://img-blog.csdnimg.cn/img_convert/21016801e56a6c01c78f94fd5107b851.png)
6:在数据处理函数中为data中的数据赋值
![](https://img-blog.csdnimg.cn/img_convert/1b0f579160fd2ad09c9d1ace1fc1e2ef.png)
7:事件传参
![](https://img-blog.csdnimg.cn/img_convert/eadb21f5ad9427a4f16d4914a6e2bb44.png)
![](https://img-blog.csdnimg.cn/img_convert/9cbd343c5610e5f71ef80a04249039b9.png)
![](https://img-blog.csdnimg.cn/img_convert/11409a506085fe349ad0eae73cfa0496.png)
8:bindinput的语法格式
![](https://img-blog.csdnimg.cn/img_convert/dedc45ae07df6bae43251b5d0cd1096d.png)
9:实现文本框和data之间的数据同步
![](https://img-blog.csdnimg.cn/img_convert/5919e85cf3ec624a31216453ba4d59f5.png)
1:定义数据
![](https://img-blog.csdnimg.cn/img_convert/58ec065bfed93d8b507b027930aecde7.png)
2:渲染结构
![](https://img-blog.csdnimg.cn/img_convert/2294cc1e8e51c3f1f4988473935b56d1.png)
3:美化样式
![](https://img-blog.csdnimg.cn/img_convert/79f9af7b0be7626277b2b42389d54680.png)
4:绑定input事件处理函数
![](https://img-blog.csdnimg.cn/img_convert/955bf4130c116bb6d809b5627efe1e61.png)
3:条件渲染
1:wx:if与wx:elif和wx:else
![](https://img-blog.csdnimg.cn/img_convert/e0f1abd50abf29a1e9393a7354b7af28.png)
2:结合<biock>标签使用wx:if
![](https://img-blog.csdnimg.cn/img_convert/c30dfba861740cb7e0b5e257dd0935cf.png)
3:hidden
![](https://img-blog.csdnimg.cn/img_convert/689a6e2d1894f1fd5155251d57ebc0ad.png)
3:wx:if与hidden的对比
1:运行方式不同
![](https://img-blog.csdnimg.cn/img_convert/9b04210a9900bc951b55881aceda0f7d.png)
2:使用场景
![](https://img-blog.csdnimg.cn/img_convert/66970104430285698539c76866b59710.png)
4:列表渲染
1:wx:for
![](https://img-blog.csdnimg.cn/img_convert/0e63afdb615bb0a05099368d9d13457e.png)
2:手动指定索引和当前项的变量名*(*了解就行)
![](https://img-blog.csdnimg.cn/img_convert/4eaafb29f7647277e38b60c7f58dcc6c.png)
3:wx:key的使用
![](https://img-blog.csdnimg.cn/img_convert/b128829a3f773609e8bb15553d0a7199.png)
5:模板样式
1:什么是wxss
![](https://img-blog.csdnimg.cn/img_convert/660250dfdd57f8603ae4520a5a0bb646.png)
2:wxss和css之间的关系(wxss扩展的特性)
![](https://img-blog.csdnimg.cn/img_convert/57de8de5ad4e0158aa6d25da14f05080.png)
1:rpx尺寸单位
1:什么是rpx尺寸单位
![](https://img-blog.csdnimg.cn/img_convert/4e71fd071689579b1a46c852f5444719.png)
2:rpx的实现原理
![](https://img-blog.csdnimg.cn/img_convert/6488420bace3b1d3e2022275b443223d.png)
3:rpx与px之间的单位换算*(*了解就行)
![](https://img-blog.csdnimg.cn/img_convert/8c87995d8f57180cba33d4922b2e94a3.png)
2:@import的语法格式
![](https://img-blog.csdnimg.cn/img_convert/00f2871def5748b59e07e43b25eacd39.png)
6:全局样式和局部样式
1:全局样式
![](https://img-blog.csdnimg.cn/img_convert/cc7bff0f1e5eec206e67653730d27d6a.png)
2:局部样式
![](https://img-blog.csdnimg.cn/img_convert/b8e0a909bb4c385fdb542d1265ffe982.png)
7:全局配置
1:全局配置文件及常用的配置项
![](https://img-blog.csdnimg.cn/img_convert/8f93f86d76e49706c63457c155c4dd67.png)
1:window
![](https://img-blog.csdnimg.cn/img_convert/151a2050a42fa9c8424f3cab4afb75bc.png)
2:了解window节点常用配置项
![](https://img-blog.csdnimg.cn/img_convert/f2a37469c9b2d8f765f287461f76650c.png)
3:设置导航栏的标题
![](https://img-blog.csdnimg.cn/img_convert/94c2a77d2bd721ec8fe0c9c19fc6d5a0.png)
4:设置导航栏的背景色(只支持16进制的颜色--#ccc)
![](https://img-blog.csdnimg.cn/img_convert/1dcfc141c15ef25e4c260f743d410bef.png)
5:设置导航栏的标题颜色
![](https://img-blog.csdnimg.cn/img_convert/4129d87668d34263e4e6568ef1ceef16.png)
6:全局开启下拉刷新的功能
![](https://img-blog.csdnimg.cn/img_convert/0f04ef0c01b74b572fff959cfc0a00e5.png)
7:设置下拉刷新时窗口的背景色(只支持16进制的颜色--#ccc)
![](https://img-blog.csdnimg.cn/img_convert/40c9acc4e6dfced2e4710b174f4639d8.png)
8:设置下拉刷新时 loading的样式
![](https://img-blog.csdnimg.cn/img_convert/a3799311ecdddeea15b8eede268dc04a.png)
9:设置上拉触底的距离
![](https://img-blog.csdnimg.cn/img_convert/9eae0317c7e9fc1caae59ab73f1e6dc8.png)
10:什么是tabBar
![](https://img-blog.csdnimg.cn/img_convert/908d2ccefa5c3bfede3f40e22a5cd953.png)
11:tabBar的六个组成部分
![](https://img-blog.csdnimg.cn/img_convert/e728e900ed6a93d7c8c516b1bd51fa16.png)
11:tabBar节点的配置项
![](https://img-blog.csdnimg.cn/img_convert/8dbf00d65d25945fec01120a97e63c7c.png)
12:每个tab项的配置选项
![](https://img-blog.csdnimg.cn/img_convert/dd1378587b42042e7c1a57410d726b8d.png)
2:实例配置tabBar
1:需求描述
![](https://img-blog.csdnimg.cn/img_convert/d7c552408c5abb7201772553df70826d.png)
2:实现步骤
![](https://img-blog.csdnimg.cn/img_convert/d6a1689fe2e27e6623c131c5d6008995.png)
3:步骤1-拷贝图标资源
![](https://img-blog.csdnimg.cn/img_convert/81dd923f82b09f4bf0ea90c81c4829bb.png)
4:步骤2-新建几个对应的tab页面
![](https://img-blog.csdnimg.cn/img_convert/fa530b7092c215dd80697d9a8bbe3765.png)
5:步骤3-配置tabbar选项
![](https://img-blog.csdnimg.cn/img_convert/42bccd67028bdc671e62da9f2e327e3a.png)
6:tabBar 页面展示效果
![](https://img-blog.csdnimg.cn/img_convert/4c864812a6e949918775b3a2966602ae.png)
![](https://img-blog.csdnimg.cn/img_convert/a955eb54954be9254e57b29574ccc2db.png)
8:页面配置
1:页面配置文件的作用
![](https://img-blog.csdnimg.cn/img_convert/b7a1d95ed2abf129eec1b17493155512.png)
2:页面配置和全局配置的关系
![](https://img-blog.csdnimg.cn/img_convert/be7b3492ca56aa788f153895ec2917e7.png)
3:页面配置中常用的配置项
![](https://img-blog.csdnimg.cn/img_convert/f0d75855740f5bc22be5c74d358d1f8b.png)
9:网络数据请求
1:小程序中网络数据请求的限制
![](https://img-blog.csdnimg.cn/img_convert/c4f2bbfba780d8421140acc279fdf5ad.png)
2:配置request合法域名
![](https://img-blog.csdnimg.cn/img_convert/15ab0af5882899dac60d512fc9b0848e.png)
![](https://img-blog.csdnimg.cn/img_convert/244464dea5b31ec2ca7e166005d46a8c.png)
![](https://img-blog.csdnimg.cn/img_convert/d7953b0f144f8c6197a1fc9f1f84620c.png)
![](https://img-blog.csdnimg.cn/img_convert/1d0ade42b1c6cd17bb0bc4ae1c951cd4.png)
![](https://img-blog.csdnimg.cn/img_convert/16af75ed5ad6292bba3e80302ffbb34d.png)
![](https://img-blog.csdnimg.cn/img_convert/325f55b3fbe9e4315f9927b702519203.png)
![](https://img-blog.csdnimg.cn/img_convert/a12ed9103c9423f0eeebc06e1c757203.png)
![](https://img-blog.csdnimg.cn/img_convert/071e3ed34edc03d0801ef73e6f98a0b3.png)
3:发起get请求
![](https://img-blog.csdnimg.cn/img_convert/73df7369eec48954be790eb53a67281a.png)
![](https://img-blog.csdnimg.cn/img_convert/ee9fef74328970c4f301436384f4a370.png)
![](https://img-blog.csdnimg.cn/img_convert/5af9d0ddd977501436481fbedbc790cf.png)
![](https://img-blog.csdnimg.cn/img_convert/852b5d30510ffc6c83d5267774662d07.png)
4:发起post请求
![](https://img-blog.csdnimg.cn/img_convert/8a223237bd44e31859a504b74e583de4.png)
5:在页面刚加载时请求数据
![](https://img-blog.csdnimg.cn/img_convert/dbab2efab45bc69a0c501728322817bc.png)
6:调过request合法域名校验
![](https://img-blog.csdnimg.cn/img_convert/219938e7a3d82ca664f75913faa4c81d.png)
7:关于跨域和Ajax的说明
![](https://img-blog.csdnimg.cn/img_convert/66cb7a71fe1fccbf7049729dc41a899f.png)
10:实现案例--本地生活的首页
1:效果以及实现步骤
![](https://img-blog.csdnimg.cn/img_convert/d4601489fdc70962a34f2a9ed308cbd4.png)
1:新建项目并梳理项目解构
![](https://img-blog.csdnimg.cn/img_convert/99500c6a6acbe5d9af9a64370cd34acd.png)
![](https://img-blog.csdnimg.cn/img_convert/0911abb7a784f79f95f4fa50ed7b3aa8.png)
![](https://img-blog.csdnimg.cn/img_convert/cdca5fb53246611daed301e2e58e4888.png)
![](https://img-blog.csdnimg.cn/img_convert/4f1cde09ea578bd2a61e80117b89a6a0.png)
![](https://img-blog.csdnimg.cn/img_convert/e68a85868f6ef05d414673fdeb7dc7b8.png)
2:配置导航栏效果
![](https://img-blog.csdnimg.cn/img_convert/a27c8933021eb6b8df6334f003148d86.png)
3:配置tabBar效果
![](https://img-blog.csdnimg.cn/img_convert/23422c68b24965e7cac2634730410287.png)
4:实现轮播图效果
1:js部分
![](https://img-blog.csdnimg.cn/img_convert/dfc69cbb9c051cffdb5f477975ad1016.png)
![](https://img-blog.csdnimg.cn/img_convert/ce809445d7c9e7d0cbfd6c617366538a.png)
![](https://img-blog.csdnimg.cn/img_convert/3a6bfd0dc9ac1c34b55a9670c1e0013f.png)
2:html部分
![](https://img-blog.csdnimg.cn/img_convert/874a2548d3351866e9f116ec547c6f14.png)
5:实现九宫格效果
1:js部分
![](https://img-blog.csdnimg.cn/img_convert/c5192a877300bcab46ac4633b64a0148.png)
![](https://img-blog.csdnimg.cn/img_convert/dd37dd0194e08740f15267ba94114445.png)
![](https://img-blog.csdnimg.cn/img_convert/746a900d196a3890db1ddf525182b7b0.png)
![](https://img-blog.csdnimg.cn/img_convert/b0a43fe59b25104b08147128d33b2a71.png)
2:html部分
![](https://img-blog.csdnimg.cn/img_convert/875bf66c03959c5e231c54b27c311fcf.png)
![](https://img-blog.csdnimg.cn/img_convert/f4d9d50adc0971bf4f08e5f283f8c828.png)
![](https://img-blog.csdnimg.cn/img_convert/d4328426001e2a384c04502686c9a679.png)
6:实现底部两个链接
1:html部分
<!-- 图片区域链接 -->
<view class="flexE colorW marginTB20">
<view class="bgred W45 lineH200 flexCenter borderRa">
商家推荐
</view>
<view class="bgblue W45 lineH200 flexCenter borderRa">
交友论坛
</view>
</view>
2:css部分
.flexE{
display: flex;
justify-content: space-evenly;
}
.colorW{
color: white;
}
.bgred{
background-color: rgb(255, 128, 128);
}
.bgblue{
background-color: rgb(133, 133, 255);
}
.W45{
width: 45%;
}
.lineH200{
height: 200rpx;
}
.marginTB20{
margin-top: 20rpx;
}
.flexCenter{
display: flex;
justify-content: center;
align-items: center;
}
.borderRa{
border-radius: 8rpx;
}
2:总结
![](https://img-blog.csdnimg.cn/img_convert/389ce7f43fea035057e5280c0aa7af75.png)
11:页面导航
什么是页面导航
![](https://img-blog.csdnimg.cn/img_convert/5ef1f21ab018025818dd95b1b6ae9281.png)
1:小程序中实现页面导航的两种方式
![](https://img-blog.csdnimg.cn/img_convert/701f954ca0097c758a108d6e4d4b1968.png)
1:声明式导航
1:声明式导航跳转到tabBar页
![](https://img-blog.csdnimg.cn/img_convert/ea4d9ff0d8b875baff3cad0242ec9ca2.png)
2:声明式导航跳转到非tabBar页
![](https://img-blog.csdnimg.cn/img_convert/33cc2047cdbe8a1c489b3b7ade17ea49.png)
3:声明式导航--后退
![](https://img-blog.csdnimg.cn/img_convert/e6e6d1bf55e93275dc7d8a4596aef242.png)
2:编程式导航
1:编程式导航跳转到tabBar页
![](https://img-blog.csdnimg.cn/img_convert/9d588b492bc09501e48d2be6cd4e365c.png)
![](https://img-blog.csdnimg.cn/img_convert/a108bebea1a69befb18b0287c80b97d8.png)
2:编程式导航跳转到非tabBar页
![](https://img-blog.csdnimg.cn/img_convert/a0507aa34597ca98263c95536bc56672.png)
![](https://img-blog.csdnimg.cn/img_convert/8acb5c8ee396fa1c4cf484e0367975d4.png)
3:编程式导航--后退
![](https://img-blog.csdnimg.cn/img_convert/db5c0e3eeeb2924099e1ab560b2e6cae.png)
![](https://img-blog.csdnimg.cn/img_convert/e450befd6edc829001da130ea88ace8f.png)
![](https://img-blog.csdnimg.cn/img_convert/e82a7a86285b54d1a627381c92ed8b14.png)
2:导航传参
1:声明式导航传参
![](https://img-blog.csdnimg.cn/img_convert/a2af7c1d7d8b7816e685593c45b8bfa4.png)
2:编程式导航传参
![](https://img-blog.csdnimg.cn/img_convert/afd569b5f7566509fdf427a37ca07364.png)
3:在onLoad中接收导航参数
![](https://img-blog.csdnimg.cn/img_convert/cb6996454a29d4538963f0472b7ebdfa.png)
![](https://img-blog.csdnimg.cn/img_convert/dd37e72e4f15d5dba2c9ab0ac2a8359a.png)
![](https://img-blog.csdnimg.cn/img_convert/77f5e8ce1e8d3a30904f8ab557f2e0bb.png)
![](https://img-blog.csdnimg.cn/img_convert/e1481cf7d9f4ddb83629c53f26bf5e11.png)
12:页面事件
1:下拉刷新
1:什么是下拉刷新
![](https://img-blog.csdnimg.cn/img_convert/57bc2c635ece5e008c595903fe497897.png)
2:启用下拉刷新
![](https://img-blog.csdnimg.cn/img_convert/788a8b2efdbc2a1e56b1e1dc5852544f.png)
3:配置下拉刷新窗口的样式
![](https://img-blog.csdnimg.cn/img_convert/87ea9b79c01c53db164ba3ad05b5f727.png)
4:监听页面的下拉刷新事件
![](https://img-blog.csdnimg.cn/img_convert/0ebe6d287582855d450c9188f6ef8fef.png)
![](https://img-blog.csdnimg.cn/img_convert/05dd3d7df6f5f29475b0ed98716c4e07.png)
5:停止下拉刷新的效果(下拉后不会自己恢复,需要手动恢复)
![](https://img-blog.csdnimg.cn/img_convert/1b286085a7c088ff534b3ad7cc98ff1c.png)
2:上拉触底
1:什么是上拉触底
![](https://img-blog.csdnimg.cn/img_convert/305f398d6bd9f20c31ea698d27d0c863.png)
2:监听页面的上拉触底事件
![](https://img-blog.csdnimg.cn/img_convert/b4089e7e32ffbb06fcf2516d0e0e1bc9.png)
3:配置上拉触底的距离
![](https://img-blog.csdnimg.cn/img_convert/f209935beb328d08d48420ef4c027001.png)
4:上拉触底的案例
1:案例效果展示
![](https://img-blog.csdnimg.cn/img_convert/8b377eeeda084d82db13a1c350b512eb.png)
2:案例的实现步骤
![](https://img-blog.csdnimg.cn/img_convert/85180184c7aac1d3775751298764e74e.png)
3:步骤1-定义获取随机颜色的方法
![](https://img-blog.csdnimg.cn/img_convert/0dd6585072f96b8a02bd332a9219e6d6.png)
4:步骤2-在页面加载时获取初始数据
![](https://img-blog.csdnimg.cn/img_convert/2ecbc97282a99512087f74bbbd6576e3.png)
5:步骤3-渲染ui解构并美化页面效果
![](https://img-blog.csdnimg.cn/img_convert/53dc9bd32a048f89c89fe31b83beb414.png)
6:步骤4-上拉触底时获取随机颜色
![](https://img-blog.csdnimg.cn/img_convert/bc5d19ac6b7a8c4918cd345d88f04f12.png)
7:步骤5-添加上拉加载的样式效果
![](https://img-blog.csdnimg.cn/img_convert/4004e778ef293e649251a634567f98d9.png)
8:步骤6-对上拉触底进行节流处理
![](https://img-blog.csdnimg.cn/img_convert/445411f2560dcde5ebd584cb838131c7.png)
3:自定义编译模式
![](https://img-blog.csdnimg.cn/img_convert/5a7d853dfc44a3970c1ddc3ae453c863.png)
13:生命周期
1:什么是生命周期
![](https://img-blog.csdnimg.cn/img_convert/84dd360a28fa7307abe79c8fb58a9061.png)
2:生命周期的分类
![](https://img-blog.csdnimg.cn/img_convert/c8f170f256b0c900569b7a32baf1380e.png)
3:什么是生命周期函数
![](https://img-blog.csdnimg.cn/img_convert/bf154987ceab496c0f5a2d0f132b277e.png)
4:生命周期函数的分类
![](https://img-blog.csdnimg.cn/img_convert/41dd759303aa4502e17e4808898c0e17.png)
5:小程序中的应用生命周期函数
![](https://img-blog.csdnimg.cn/img_convert/20b0ef774a71d4bbc500280a69effa83.png)
6:小程序中页面上的生命周期函数
![](https://img-blog.csdnimg.cn/img_convert/f3fc2e52fd22c0c65f4b7e67e2e028b1.png)
14:wxs脚本
1:什么是wxs
![](https://img-blog.csdnimg.cn/img_convert/c47f0f1a1466e839214d02d258fc5a77.png)
2:wxs的应用场景
![](https://img-blog.csdnimg.cn/img_convert/7d476f09a06ae4725d47f1eeec3d5e9b.png)
15:实现案例--本地生活列表页