一文掌握 - 微信小程序基础（下半部分）

2020-12-26 472 阅读4分钟

接下来的要学习的有，详情请先阅读目录：

1:微信小程序组件和样式

所用到第三方依赖模块有：

Vant Weapp UI组件库：官网文档：轻量、可靠的小程序 UI 组件库
miniprogram-api-promise ：微信官方文档对 API的Promise化说明：- 和github地址
MobX相关的包 - 全局数据共享：MobX官方文档

`1.1:自定义组件`

`1.1.1:准备要用到的项目`

`1.1.2:创建自定义组件`

`1.1.3:局部引用组件`

`1.1.4:全局引用组件`

`1.1.5: 全局引用VS局部引用`

`1.1.6:组件和页面的区别`

`1.1.7:组件的样式隔离特性`

`1.1.8:组件样式隔离的注意点`

`1.1.9:修改组件的样式隔离选项`

2: 自定义组件 - 数据、方法、属性和数据监听

`2.1:定义data私有数据`

`2.2: methods方法`

`2.3:定义properties属性`

`2.4: 使用max属性控制自增的最大值`

`2.5:data和properties的区别`

`2.6:使用setData修改properties的值`

`2.7:什么是数据监听器及其语法格式`

`2.8:数据监听器的基本用法`

`2.9:监听对象属性的变化`

3: 自定义组件 - 数据监听案例：点击RGB按钮，改变盒子颜色

`创建组件并定义数据`

`渲染组件的UI结构`

`定义button的事件处理函数`

`监听对象中指定属性的变化`

`监听对象中所有属性的变化`

`什么是纯数据字段`

`使用规则`

`使用纯数据字段改造数据监听器案例`

4:自定义组件 - 组件生命周期和插槽

`组件全部的生命周期函数`

`组件主要的生命周期函数`

`lifetimes节点`

`概念`

`pageLifetimes节点`

`生成随机的RGB颜色值`

`什么是插槽`

`单个插槽`

`启用多个插槽`

`定义和使用多个插槽`

5:自定义组件 - 父子组件通信和behaviors

`了解父子组件之间通信的3种方式`

`属性绑定`

`实现子组件的count属性自增+1`

`了解事件绑定的4个核心实现步骤`

`了解事件绑定的核心实现代码`

`通过事件绑定实现count值的同步`

`使用selectComponent获取组件实例`

`了解什么是behaviors以及它的工作方式`

`创建behavior`

`导入并使用behavior`

`了解behavior中所有可用的节点`

`同名字段的覆盖和组合规则`

阶段小结：

6: 小程序中使用vantUI组件库和API的Promise化

`导入需要用到的小程序项目`

`小程序中对npm的支持与限制`

`了解什么是Vant Weapp`

`安装Vant组件库`

`使用Vant组件`

`定义和使用CSS变量`

`使用CSS变量定制Vant的主题样式`

`什么是小程序API的Promise化`

`安装并构建miniprogram-api-promise`

`三个步骤实现API的Promise化`

`调用Promise化之后的异步API`

7: 微信小程序全局数据共享

`什么是全局数据共享`

`小程序中的全局数据共享方案`

`安装并构建MobX相关的包`

`创建Store实例对象`

`定义计算属性`

`定义actions方法`

`了解将Store中的成员绑定到页面上的实现思路`

`将Store中的成员绑定到页面上`

`在页面中使用Store中的成员`

`了解将Store中的成员绑定到组件上的实现思路`

`将Store中的成员绑定到组件上`

`在组件中使用Store中的成员`

8: 分包

`了解分包的概念以及好处`

`分包前后项目的构成`

`分包的加载规则`

`分包的体积限制`

`了解如何配置分包`

`演示在项目中如何配置分包`

`设置分包的别名并查看分包的体积`

`打包原则`

`引用原则`

`了解什么是独立分包以及它和普通分包的区别`

`了解独立分包的应用场景`

`将普通分包改造为独立分包`

`独立分包的引用原则`

`介绍分包预下载的概念以及好处`

`配置分包的预下载`

`分包预下载的限制`

9: 自定义tabBar

`演示案例效果`

`了解自定义tabBar的实现步骤`

`在app.json中声明自定义tabBar的配置信息`

`添加tabBar的代码文件`

`基于Vant组件渲染出基本的自定义tabBar效果`

`自定义tabBar的图标和文本`

`循环渲染tabBar的Item项`

`渲染并美化数字徽标的样式`

`按需渲染数字徽标`

`把Store中sum的值渲染为数字徽标`

`实现tabBar页面的切换`

`使用全局数据共享解决tabBar选中项不准确的问题`

`修改tabBar选中项文本的颜色值`

小段总结：

至此，小程序基础，已经完毕了，可以开始动手完成自己的第一个小程序吧！