项目结构
![](https://img-blog.csdnimg.cn/img_convert/bcf7432c97a0ca41c87194932d8a6cb6.png)
pages 用来存放所有小程序的页面
utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
app.wxss小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信索引
pages 目录
![](https://img-blog.csdnimg.cn/img_convert/728d1a90ee46d2f10816ba0ccc582e1c.png)
.js 文件 (页面的脚本文件,存放页面的数据、事件处理函数)
.json 文件(当前页面的配置文件,配置窗口的外观、表现)
.wxml文件(页面的模板结构文件)
.wxss 文件(当前页面的样式表文件)
.json 配置文件
app.json
app.json 是当前小程序的全局配置,包括小程序的所有页面的路径、窗口外观、界面表现、底部tab等。
4个配置项的作用
pages:用来记录当前小程序所有页面的路径
window: 全局定义小程序所有页面的背景色、文字颜色等
style: 全局定义小程序组件所使用的样式版本
sitemapLocation: 用来指明 sitemap.json 的位置
project.config.json
project.config.json 是项目配置文件,用来记录对小程序开发工具所做的个性化配置,例如:
setting 中保存了编译相关的配置
projectname 中保存的是项目名称
appid中保存的是小程序的账号ID
sitemap.json
微信已开放小程序内搜索,类似pc网页的 SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
注意:sitemap的索引提示是默认开启的,需要关闭 sitemap的索引提示,可在小程序配置文件 project.config.json的setting中配置字段 checkSiteMap为 false
小程序代码的构成
WXML模板
- WXML 和 HTML 的区别
标签不同
HTML(div, span, img, a)
WXML(view, text, image, navigator)
属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>
提供类似 vue 的模板语法
数据绑定
列表渲染
条件渲染
WXSS样式
- WXSS 和 css 的区别
新增 rpx 尺寸单位
css中需要手动进行像素单位换算,例如 rem
WXSS 在底层支持新的尺寸单位 rpx, 在不同大小的屏幕上小程序会自动进行换算
提供了全局的样式和局部样式
项目根目录中的 app.wxss会作用于所有小程序页面
局部页面的 .wxss 样式仅对当前页面生效
WXSS仅支持部分css 选择器
.class 和 #id
element
并集选择器、后代选择器
::after 和 ::before 等伪选择器
JS 逻辑交互
- 小程序中 .js 文件的分类
app.js
是整个小程序项目的入口文件,通过调用 App()函数来启动整个小程序
页面的 .js 文件
是页面的入口文件,通过调用 Page()函数来创建并运行页面
普通的 .js 文件
是普通的功能模块文件,用来封装公共的函数或属性供页面使用
小程序的宿主环境
简介
什么是宿主环境
指程序运行所必须依赖的环境,例如:Android系统和 IOS系统是两个不同的宿主环境,安卓版的微信App是不能在 ios环境下运行的,所以,Android是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的。
![](https://img-blog.csdnimg.cn/img_convert/09d18920ae979843cce66979667da008.png)
小程序的宿主环境
手机微信是小程序的宿主环境,
![](https://img-blog.csdnimg.cn/img_convert/cb260d7579d89e82c0fc5b2a7a896c0d.png)
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫描、微信支付
微信登陆、地理定位等等
小程序宿主环境包含的内容
通信模型
运行机制
组件
API
通信模型
通信的主体
小程序中通信的主体是 渲染层 和 逻辑层,其中:
a. WXML模板和 WXSS样式工作在逻辑层
b. JS脚本工作在逻辑层
![](https://img-blog.csdnimg.cn/img_convert/3dc73dfd7d2241595c660165548b0e1b.png)
小程序的通信模型
小程序中的通信模型分为两个部分
渲染层和逻辑层之间的通信
由微信客户端进行转发
b. 逻辑层和第三方服务器之间的通信
i. 由微信客户端进行转发
![](https://img-blog.csdnimg.cn/img_convert/476097b0745ec6cad185ed2370a9d0be.png)
运行机制
- 小程序启动的过程
把小程序的代码包下载到本地
解析app.json全局配置文件
执行app.js小程序入口文件,调用 App()创建小程序实例
渲染小程序首页
小程序启动完成
2. 页面渲染过程
加载解析页面的 .json配置文件
加载页面的 .wxml 模板 和 .wxss 样式
执行页面的 .js 文件,调用 Page()创建页面实例
页面渲染完成
组件
- 小程序中组件的分类
小程序中的组件也是宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。9大类组件如下:
视图容器
基础内容
表单组件
导航组件
媒体组件
map地图组件
canvas画布组件
开放能力
无障碍访问
2. 常用的视图容器类组件
![](https://img-blog.csdnimg.cn/img_convert/a282346dea7869fdeb195672f73d0fc3.png)
![](https://img-blog.csdnimg.cn/img_convert/7b42bcbfd84c1d4d6c4749ad6b544779.png)
![](https://img-blog.csdnimg.cn/img_convert/0adacd4954cdb44941f6bb9df468a6cf.png)
WXML模板语法
- 数据绑定
2. 事件绑定
事件是渲染层和逻辑层之间的通信 触发方式
![](https://img-blog.csdnimg.cn/img_convert/02537f7397e2f0bba569a4889145517e.png)
WXSS模板样式
![](https://img-blog.csdnimg.cn/img_convert/6db19ce375f8d5208038e951428c99c1.png)
navigationBarTextStyle 标题颜色 可选两值 block \white
全局配置
window
3. 下拉刷新
![](https://img-blog.csdnimg.cn/img_convert/e587433dae83a4d929e6ec9c8cc01a64.png)
![](https://img-blog.csdnimg.cn/img_convert/dd7d8924964c84213fbfa2344524f1ce.png)
![](https://img-blog.csdnimg.cn/img_convert/9e3f7ad46fb2a80e44239866875ced7a.png)
![](https://img-blog.csdnimg.cn/img_convert/131368d7f48bb6ff143b0fa0c0836af8.png)
![](https://img-blog.csdnimg.cn/img_convert/ea912721e71364419ca1ac4674246bec.png)
页面配置
![](https://img-blog.csdnimg.cn/img_convert/e14cfa39564f8723d4cc6ed9086972d0.png)
![](https://img-blog.csdnimg.cn/img_convert/3a9fbec2f13b0ee92a4f39a7ffdde1c2.png)
![](https://img-blog.csdnimg.cn/img_convert/e629b3be5d12d82c96ef02033e1ace5b.png)
网络数据请求
![](https://img-blog.csdnimg.cn/img_convert/fc161e057f509d06d08564a334c48af6.png)
![](https://img-blog.csdnimg.cn/img_convert/eb1b7c88614eb74e1b1e8b1769b7dbc8.png)
![](https://img-blog.csdnimg.cn/img_convert/e08777361406bfeb68e3381e5431c05d.png)
![](https://img-blog.csdnimg.cn/img_convert/cbc558ad5065464824af5407e24e6913.png)
![](https://img-blog.csdnimg.cn/img_convert/25bb188efc1780ad253a30abe84a2df5.png)
![](https://img-blog.csdnimg.cn/img_convert/3f8c601ca4ad30495751bbe0328fa8ac.png)
![](https://img-blog.csdnimg.cn/img_convert/42e71efc0de4452aa37d8b5ce7e1d84d.png)
![](https://img-blog.csdnimg.cn/img_convert/14ae9a3f384c166e9b2abbf95f7a5450.png)
总结:
![](https://img-blog.csdnimg.cn/img_convert/4a2f25fff33443e8ec357cd1140af8df.png)
页面导航
声明式导航
![](https://img-blog.csdnimg.cn/img_convert/d8703180d6dbc359559629d052dc2b49.png)
![](https://img-blog.csdnimg.cn/img_convert/f7c1e5af558f3004d9d3d10fee84c4a7.png)
![](https://img-blog.csdnimg.cn/img_convert/2647b2664438fa40de8e2ce5d7899780.png)
编程式导航
![](https://img-blog.csdnimg.cn/img_convert/033b21aadebe5eebd27ef397d25498ae.png)
![](https://img-blog.csdnimg.cn/img_convert/5497a4fe64e98495911292dd21eaae43.png)
![](https://img-blog.csdnimg.cn/img_convert/33284bcf3ae224f4865e37d530b6ecd4.png)
![](https://img-blog.csdnimg.cn/img_convert/da0c8f5ea1b39baf9709747b0f166bda.png)
导航传参
![](https://img-blog.csdnimg.cn/img_convert/d96bd18daf34cd6e77274ac51bb814c1.png)
![](https://img-blog.csdnimg.cn/img_convert/fc9e348115abc7626319845046d182b2.png)
![](https://img-blog.csdnimg.cn/img_convert/8a3eceb7f5b502cea146cd4672450e17.png)
页面事件
下拉刷新
![](https://img-blog.csdnimg.cn/img_convert/726378f8c5b5d15fa603de274fe0c4fb.png)
![](https://img-blog.csdnimg.cn/img_convert/9e0190e1a45938cd23952859bcadd3b1.png)
![](https://img-blog.csdnimg.cn/img_convert/56218f93387815fa26489a020d1f3a8e.png)
![](https://img-blog.csdnimg.cn/img_convert/2b75481007e7580e3bad0879457a6491.png)
![](https://img-blog.csdnimg.cn/img_convert/f9a47dc0a426e7a8d09bfaea11a5e279.png)
上拉触底事件
![](https://img-blog.csdnimg.cn/img_convert/2376c8f58d767037c79f5c8a0275688b.png)
![](https://img-blog.csdnimg.cn/img_convert/39cb9e8bebcaa2f20be57015233c22ff.png)
![](https://img-blog.csdnimg.cn/img_convert/9a399ba7b8540eba8993b1ab48cececb.png)
![](https://img-blog.csdnimg.cn/img_convert/1051ebe4d799e847584750c47704544c.png)
![](https://img-blog.csdnimg.cn/img_convert/1e3364659ffb84978c3b5d1cec24e87d.png)
![](https://img-blog.csdnimg.cn/img_convert/1664d74810800a75809fbd2469352c10.png)
![](https://img-blog.csdnimg.cn/img_convert/d43df26c5ff46f461b63f1c2a311612c.png)
![](https://img-blog.csdnimg.cn/img_convert/5a26893cb8533360d17b8f5fb5277185.png)
![](https://img-blog.csdnimg.cn/img_convert/23dfc78d680662cbce5ece0417e51810.png)
生命周期
![](https://img-blog.csdnimg.cn/img_convert/f17fc4c081e04a6aefe775268942af0f.png)
![](https://img-blog.csdnimg.cn/img_convert/353358345774131bed8bc0b4189e7150.png)
![](https://img-blog.csdnimg.cn/img_convert/72b9666b219e5d7469e6b66e868504e8.png)
![](https://img-blog.csdnimg.cn/img_convert/52a3e1376ae5968a4c431715f0d0ee4a.png)
![](https://img-blog.csdnimg.cn/img_convert/c425bca8790073a6c24361d84b0860e8.png)
![](https://img-blog.csdnimg.cn/img_convert/5bbf1aa1e95b67948157d2434f63a56f.png)
wxs脚本
wxs简介
![](https://img-blog.csdnimg.cn/img_convert/92687d8cee2f591e1e948b9223f7c591.png)
![](https://img-blog.csdnimg.cn/img_convert/1382c983efd050e6f25dbf01f1675b4b.png)
![](https://img-blog.csdnimg.cn/img_convert/55b4ad082033e98deb991b9e8193fece.png)
基础语法
![](https://img-blog.csdnimg.cn/img_convert/65dad74f4a0abd208a9d06e3d672f20f.png)
![](https://img-blog.csdnimg.cn/img_convert/16cb35b162ce6549d49d7e847bd9fcfa.png)
![](https://img-blog.csdnimg.cn/img_convert/e4824b217efe9c1bd05f52e5f2368891.png)
![](https://img-blog.csdnimg.cn/img_convert/66d2c5ac65587f72a9cb74d1d5d1f453.png)
WXS的特点
![](https://img-blog.csdnimg.cn/img_convert/b50ea8cfa0b31835b0e7e2933bcfdd07.png)
![](https://img-blog.csdnimg.cn/img_convert/a1fa9f4d0d7d28e5cb1b75fb8e6211f6.png)
![](https://img-blog.csdnimg.cn/img_convert/8d1d820d1b7f5f2412fa5f2fe93fe455.png)
![](https://img-blog.csdnimg.cn/img_convert/98faab24414c35473e5fc3f9907b43de.png)
自定义组件
自定义组件引用
![](https://img-blog.csdnimg.cn/img_convert/ed120963e314d17a10fa3547ee2ce59f.png)
![](https://img-blog.csdnimg.cn/img_convert/47898a4f34057364663339986e7560c7.png)
![](https://img-blog.csdnimg.cn/img_convert/879e9239f702831f47b9988cbc26ed15.png)
![](https://img-blog.csdnimg.cn/img_convert/86715a55e042adf5bc9b280d4357aa27.png)
样式
![](https://img-blog.csdnimg.cn/img_convert/4861cd8b1f1551dc8e9f8068e9094499.png)
![](https://img-blog.csdnimg.cn/img_convert/35fadf45bec5f61d60e2b9fa7ca2cb4c.png)
![](https://img-blog.csdnimg.cn/img_convert/20fbe5798816c13ecc15665f1c3d1745.png)
![](https://img-blog.csdnimg.cn/img_convert/d07473b1b989f31bb6a0d1251aa857d2.png)
数据、方法、属性
![](https://img-blog.csdnimg.cn/img_convert/bd34dfd3819eb31fdf92c90248b03752.png)
![](https://img-blog.csdnimg.cn/img_convert/48c4efcbce9fb0086041acfb6b3823f3.png)
![](https://img-blog.csdnimg.cn/img_convert/d99c8cd4833917706d16ffc5136bc714.png)
![](https://img-blog.csdnimg.cn/img_convert/3b86dcc4d480df0b4f9fe3069cdca8a0.png)
![](https://img-blog.csdnimg.cn/img_convert/54aede62eeab2a81833141730578e9b4.png)
数据监听器
![](https://img-blog.csdnimg.cn/img_convert/cdccea41f59378eb443fb420ffa2b670.png)
![](https://img-blog.csdnimg.cn/img_convert/820857bdef05b1e6a95684f850817c9d.png)
![](https://img-blog.csdnimg.cn/img_convert/b53fff197d3b5804223aef8364049a87.png)
![](https://img-blog.csdnimg.cn/img_convert/8471ab10b7fd8831957953ecb71dc410.png)
纯数据字段
![](https://img-blog.csdnimg.cn/img_convert/1a2fb0b2e04abd4ed45f23d9977d2378.png)
![](https://img-blog.csdnimg.cn/img_convert/8c2c4cfd547b09fc30e58901b2c800ac.png)
组件的生命周期
![](https://img-blog.csdnimg.cn/img_convert/d8840e5c0bf139b5dd94945bc8282eba.png)
![](https://img-blog.csdnimg.cn/img_convert/0c52c6ddc1a343685b68b56674e02783.png)
![](https://img-blog.csdnimg.cn/img_convert/6aa4a442f4313e5107da97623cb5dfd6.png)
组件所在页面的生命周期
![](https://img-blog.csdnimg.cn/img_convert/ebb14f161782983e05651c59a11a4b23.png)
![](https://img-blog.csdnimg.cn/img_convert/b2849f8f70e09da48c491888b054bf3c.png)
插槽
![](https://img-blog.csdnimg.cn/img_convert/5b56e7b53d303973dfec32174fd920c3.png)
![](https://img-blog.csdnimg.cn/img_convert/ef512965aaddfd696a9f6c5d9ca9705a.png)
![](https://img-blog.csdnimg.cn/img_convert/d2cb0459df62841f4b98108fd40353cd.png)
![](https://img-blog.csdnimg.cn/img_convert/4cf726dd9ddd643f619544bc5865b671.png)
![](https://img-blog.csdnimg.cn/img_convert/239d84fa1642471584cb27c3a7bafb55.png)
父子组件之间的通信
![](https://img-blog.csdnimg.cn/img_convert/de832b57e1412df038a88c36cb5e1b49.png)
![](https://img-blog.csdnimg.cn/img_convert/35cc325d78b3e16fafe9ac66963f9d69.png)
![](https://img-blog.csdnimg.cn/img_convert/f1a346c5062a6f1095fef8469c706af9.png)
![](https://img-blog.csdnimg.cn/img_convert/fd57b371b5adfaf8274311b5a87e5000.png)
父组件定义事件,接受 子组件传过来的 值
![](https://img-blog.csdnimg.cn/img_convert/3ebf77e688496ab5fb241f4aebb6715d.png)
子组件触发 传值
![](https://img-blog.csdnimg.cn/img_convert/af9114b2aeb764ddacedfb40785dbf28.png)
![](https://img-blog.csdnimg.cn/img_convert/bc5f9f431ea652801424d727a29081c3.png)
behaviors
![](https://img-blog.csdnimg.cn/img_convert/52e399130a2ee80506b7572bd241aa45.png)
![](https://img-blog.csdnimg.cn/img_convert/7006d3119b0b168771dcc4b97d429ae8.png)
![](https://img-blog.csdnimg.cn/img_convert/d551b22ed9fbe9fca8d470bdea8b040e.png)
![](https://img-blog.csdnimg.cn/img_convert/8deec677f42059e162397614fb3d846b.png)
![](https://img-blog.csdnimg.cn/img_convert/3f8b7d4789eabd44b51dfa677e7e5f81.png)
![](https://img-blog.csdnimg.cn/img_convert/54c6fd60e9644f9fb6b09f5abe64fbf7.png)
![](https://img-blog.csdnimg.cn/img_convert/c419d9652c20f011278103465787f470.png)
![](https://img-blog.csdnimg.cn/img_convert/2a55e9083e95b453bf9068359fe11598.png)
使用npm包
![](https://img-blog.csdnimg.cn/img_convert/8170e5b697dce3fa95d5cd1671d6120b.png)
Vant Weapp
![](https://img-blog.csdnimg.cn/img_convert/19f5e572519a3d78107ba48316cee28d.png)
安装使用 官网 Vant Weapp - 轻量、可靠的小程序 UI 组件库 (gitee.io)
API Promise化
![](https://img-blog.csdnimg.cn/img_convert/25ea76c50cbaa5cbf6820be27400c80e.png)
![](https://img-blog.csdnimg.cn/img_convert/039913416c7e16a1288c254de0187105.png)
![](https://img-blog.csdnimg.cn/img_convert/7095036d6e43bda87435a9088342a8c2.png)
![](https://img-blog.csdnimg.cn/img_convert/b5bb30d73d8f8e7cce97fcc32af1cc19.png)
全局数据共享
![](https://img-blog.csdnimg.cn/img_convert/ba8bf2c7fc59f16525f374241bde6160.png)
![](https://img-blog.csdnimg.cn/img_convert/3336a610b3b7b4c7977ac369478f88c7.png)
Mobx
![](https://img-blog.csdnimg.cn/img_convert/2bf859bb256bf7fef7b82d06c6610811.png)
![](https://img-blog.csdnimg.cn/img_convert/c42c07a5a1eceb56a2cb4cc5f161abfc.png)
![](https://img-blog.csdnimg.cn/img_convert/823502cfd121a36d23e51ee82255b69c.png)
![](https://img-blog.csdnimg.cn/img_convert/21a868081466b20bb785bce5abcd97d2.png)
![](https://img-blog.csdnimg.cn/img_convert/a2ad43e94c08e2f172b112507cebb903.png)
分包
基本概念
![](https://img-blog.csdnimg.cn/img_convert/d312082f5f9c28099bb4091a3c71a679.png)
![](https://img-blog.csdnimg.cn/img_convert/d6a842032a6bc50e7355b75e76804d1b.png)
![](https://img-blog.csdnimg.cn/img_convert/d49835e4deadcd5f4abad929024009d2.png)
![](https://img-blog.csdnimg.cn/img_convert/89181113844578da72478a21d7cedb2d.png)
![](https://img-blog.csdnimg.cn/img_convert/78bbfd553cba8e74cd0b69e50fd2eb28.png)
![](https://img-blog.csdnimg.cn/img_convert/8e3f67b21632c63d097ffc5dfb9a4125.png)
使用分包
![](https://img-blog.csdnimg.cn/img_convert/acc91339eb444ab0df84b312dc3a7087.png)
![](https://img-blog.csdnimg.cn/img_convert/2f16dab4931495ae6ac814612d4a4641.png)
![](https://img-blog.csdnimg.cn/img_convert/ff9a5e13727e889096c5c8e11cc3ed35.png)
独立分包
![](https://img-blog.csdnimg.cn/img_convert/335cea197ee097f01cd460b61ceff4fe.png)
![](https://img-blog.csdnimg.cn/img_convert/438fb1d854e953ef59be4c81f907ca69.png)
![](https://img-blog.csdnimg.cn/img_convert/bcc038fb5deb18a858f9a21e1106b873.png)
![](https://img-blog.csdnimg.cn/img_convert/dfd079c8c14a627954aa3122cc1ecdf8.png)
添加 independent: true
![](https://img-blog.csdnimg.cn/img_convert/f57c3aef2c4316213fff0947c028bc71.png)
分包预下载
![](https://img-blog.csdnimg.cn/img_convert/b5a5599f94a44f4cfa2f4ac73a0887b2.png)
![](https://img-blog.csdnimg.cn/img_convert/cc594fb95de9723d3eea1b0af58b701c.png)
![](https://img-blog.csdnimg.cn/img_convert/f60a7234276e6e653f909182e62ea330.png)