四、小程序-基础加强

一、目标

image.png

二、目录

image.png

三、自定义组件

（一）组件的创建和引用
1、创建组件

image.png

2、引用组件

image.png

（1）局部引用组件

image.png

（2）全局引用组件

image.png

（3）全局引用 VS 局部引用

image.png

（4）组件和页面的区别

image.png

（二）样式
1、组件样式隔离

image.png

2、组件样式隔离的注意点

image.png

3、修改组件的样式隔离选项

image.png

（1）styleIsolation的可选值

image.png

（三）数据、方法和属性
1、data数据

image.png

2、methods方法

image.png

3、properties属性

image.png

4、data 和 properties 的区别

image.png

5、使用setData 修改 properties 的值

image.png

（四）数据监听器
1、什么是数据监听器

image.png

2、数据监听器的基本用法

image.png

image.png

3、监听对象属性的变化

image.png

4、数据监听器 - 案例
（1）案例效果

image.png

（2）渲染UI结构

image.png

（3）定义button的事件处理函数

image.png

（4）监听对象中指定属性的变化

image.png

（5）监听对象中所有属性的变化

image.png

（五）纯数据字段
1、什么是纯数据字段

image.png

2、使用规则

image.png

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

image.png

（六）组件的生命周期
1、组件全部的生命周期函数

image.png

2、组件主要的生命周期函数

image.png

3、lifetimes节点

image.png

4、组件所在页面的生命周期
（1）什么是组件所在页面的生命周期

image.png

（2）pageLifetimes节点

image.png

（3）生成随机的RGB颜色值

image.png

image.png

（七）插槽
1、什么是插槽

image.png

2、单个插槽

image.png

3、启用多个插槽

image.png

4、定义多个插槽

定义多个插槽

使用多个插槽

（八）父子组件之间的通信
1、父子组件之间的通信的3种方式

image.png

1、属性绑定，用于父组件给子组件传值
2、事件绑定，用于子组件给父组件传值
3、获取组件实例，是父组件调用子组件中的属性和方法

2、属性绑定

image.png

image.png

3、事件绑定

image.png

步骤1

步骤2

步骤3

步骤4

4、获取组件实例

image.png

（九）behaviors
1、什么是behaviors？

image.png

2、behaviors的工作方式

image.png

3、创建behaviors

image.png

4、导入并使用behovers

image.png

5、behovers中所有可用的节点

image.png

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

image.png

（十）组件总结

image.png

四、使用npm包

（一）小程序对npm的支持与限制

image.png

（二）Vant Weapp
1、什么是Vant Weapp

image.png

官方网址： https://youzan.github.io/vant-weapp/#/home

2、安装Vant组件库

image.png

官方手册：https://youzan.github.io/vant-weapp/#/quickstart

3、使用Vant组件

image.png

4、定制全局主题样式（原理分析）

image.png

使用css自定义属性（变量）
（1）原理是：定义和使用css的变量
定义：--名称： value
使用：var（--名称）

image.png

5、定制全局主题样式

image.png

less定义变量方式 @ 使用 @
css定义变量方式 -- 使用 var（--）

（三）API Promise化
1、基于回调函数的异步API的缺点

image.png

2、什么是 API Promise 化

image.png

3、实现 API Promise 化

image.png

4、调用 Promise 化之后的异步 API

image.png

分析：
1、异步回调，修改为 promise化
2、使用async await 获取后台返回的数据对象
3、再使用数据解构，重命名的方式 把res定义为返回数据里面的data数据

五、全局数据共享

（一）全局数据共享
1、什么是全局数据共享

image.png

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

image.png

（二）MobX
1、安装MobX相关的包

image.png

2、创建 MobX 的 Store 实例

image.png

3、将Store 中的成员绑定到页面中

image.png

4、在页面中使用Store中的成员

image.png

5、将Store中的成员绑定到组件中

image.png

6、在组件中使用Store中的成员

image.png

六、分包

（一）基础概念
1、什么是分包

image.png

2、分包的好处

image.png

3、分包前项目的构成

image.png

4、分包后项目的构成

image.png

5、分包的加载规则

image.png

6、分包的体积限制

image.png

（二）使用分包
1、配置方法

image.png

image.png

2、打包原则

image.png

3、引用原则

image.png

（三）独立分包
1、什么是独立分包

image.png

2、独立分包和普通分包的区别

image.png

3、独立分包的应用场景

image.png

4、独立分包的配置方法

image.png

5、引用原则

image.png

（四）分包预下载
1、什么是分包预下载

image.png

2、配置分包的预下载

image.png

3、分包预下载的限制

image.png

七、案例 - 自定义tabBar

（一）案例效果

image.png

（二）实现步骤

image.png

官方文档地址：
自定义 tabBar | 微信开放文档 (qq.com)

参考官方文档：
使用有赞的tabbar参考地址：
Tabbar 标签栏 - Vant Weapp (youzan.github.io)

image.png

image.png

image.png

徽标数据插值语法判断

info={{item.info ? item.info : ''}}

把页面的数据渲染到tabbar的徽标上，使用store

参考文档地址： GitHub - wechat-miniprogram/mobx-miniprogram-bindings: 小程序的 MobX 绑定辅助库

image.png

image.png

路径跳转

image.png

八、总结

image.png

• 人面猴

  序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...

  沈念sama阅读 205,386评论 6赞 479
• 死咒

  序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...

  沈念sama阅读 87,939评论 2赞 381
• 救了他两次的神仙让他今天三更去死

  文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...

  开封第一讲书人阅读 151,851评论 0赞 341
• 道士缉凶录：失踪的卖姜人

  文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...

  开封第一讲书人阅读 54,953评论 1赞 278
• 港岛之恋（遗憾婚礼）

  正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...

  茶点故事阅读 63,971评论 5赞 369
• 恶毒庶女顶嫁案：这布局不是一般人想出来的

  文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...

  开封第一讲书人阅读 48,784评论 1赞 283
• 城市分裂传说

  那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...

  沈念sama阅读 38,126评论 3赞 399
• 双鸳鸯连环套：你想象不到人心有多黑

  文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...

  开封第一讲书人阅读 36,765评论 0赞 258
• 万荣杀人案实录

  序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...

  沈念sama阅读 43,148评论 1赞 300
• 护林员之死

  正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...

  茶点故事阅读 35,744评论 2赞 323
• 白月光启示录

  正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...

  茶点故事阅读 37,858评论 1赞 333
• 活死人

  序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...

  沈念sama阅读 33,479评论 4赞 322
• 日本核电站爆炸内幕

  正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...

  茶点故事阅读 39,080评论 3赞 307
• 男人毒药：我在死后第九天来索命

  文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...

  开封第一讲书人阅读 30,053评论 0赞 19
• 一桩弑父案，背后竟有这般阴谋

  文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...

  开封第一讲书人阅读 31,278评论 1赞 260
• 情欲美人皮

  我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...

  沈念sama阅读 45,245评论 2赞 352
• 代替公主和亲

  正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...

  茶点故事阅读 42,590评论 2赞 343

推荐阅读更多精彩内容

• 小程序基础[05]-小程序框架基础组件(一)

  本文介绍小程序框架中为我们提供的组件，还专门对view、text、image等组件的基本使用进行了说明，还补充了为...

  文顶顶阅读 906评论 0赞 1
• 如何从Vant Weapp、MinUI、iView Weapp、Wux Weapp、Color...

  前言 发展到今天，手机端组件库其实已经大同小异，熟练的程序员甚至都能背过80%的组件名称，比如toast、cell...

  microkof阅读 21,177评论 4赞 25
• 小程序项目总结

  目录（各种框架通用套路） 一、静态页面 二、生命周期 三、获取数据 四、渲染页面 五、绑定事件 六、路由 七、页面...

  Grayly吖阅读 2,397评论 2赞 14
• 小程序promise解决地狱回调及封装请求

  1.promise解决地狱回调： vscode中： 小程序中： //pages/promise/promise.j...

  GGYY丶阅读 1,104评论 0赞 0
• 微信小程序

  微信小程序文件介绍 pages目录 用于存放所有的页面 utils目录 用于存放工具类文件 app.js是入口文件...

  绯泉阅读 536评论 0赞 1