00:05
现在我们开始第三节课。今天是系列课程的第三讲,然后前两节课呢,咱们主要讲解了API的3.0的介绍和开发工具。呃,第二讲呢,就是基础开发引擎和模块等一些操作,咱们第三讲呢,就是组件开发和跨端适配的一些讲解。呃,前两讲呢是比较基础一点的,因为要照顾到一些同学是新来的,所以我们要把API的平台的使用方法和一些基础入门的地方需要给大家讲清楚,然后便于他们快速上手API开发。然后今天的这一讲呢,是组件开发和跨端兼容适配。那么本次组建大赛呢,就是基于PR3.0,然后使用avm去开发组件。然后奖品是十分丰厚的,就是可以在那个大赛的那个官网上去看一下详细的那个列表,然后可以看一下时间安排和大赛的一些内容,这节课呢,就是主要讲解组件的开发和封装的一些呃教程,所以这节课学习完之后呢,大家可以踊跃的参与到这个比赛里面来,然后拿取这个丰厚的奖金。
01:22
AP3.0升级之后呢,是使用了A技术框架,那么这个框架呢,是一个组件化的开发框架。首先说一下组件化的好处和意义,组件化的话,就是可以让我们的项目一些复用的逻辑和一些界面功能等抽离出来,然后供我们二次使用,然后进行一定的程度的封装呢,就是让我们的业务高度复用,这样维护起来也方便。像之前的咱们的UI的话,传统UI啊,我记得最开始咱们做网页开发的时候,像类似于几query UI,几块mobile,或者是说像最开始的那种的,像Sui这种的,它都是只是单纯的CSS样式,然后并没有一些功能的封装。
02:11
自从react或者view这种呃前端框架出现了之后呢,可能就会有很多的那个呃,样式和功能结合在一块的,就类似于现在的一些组件啊,或者element UI这种的组件库。这就是咱们组件化的一个体现,就是很多越来越多的样式库呢,就是使用组件化的方式提供给大家的。所以咱们咱们如果支持的组件化开发的话,其实也是可以自己去实现一些组件库和一些组件的封装,还是要先看一下那个系统组件。打开咱们的3.0的文档。在这个页面上呢,我们在下面组件这一栏看到有很多的系统组件。
03:01
昨天我也给大家初次的过了一遍,就是有一些组件是咱们在小程序里面开发经常用到的,就咱们这个am也是比较类似这种概念,就是有。就是由这些呃系统组件提供给大家使用,然后进一步呃,搭建成咱们的高级组件,或者说封装的业务逻辑组件。因为有些组件我们可能用的次数不是太高,频率也不是太高,但是呢,有些组件呢,是咱们高频使用的,可能那就是一个布局的基石或者基础。呃,像view组件呢,就是它是一个通用的容器组件,然后它的默认布局方式呢,是flax布局。是,这有一点注意的是,不要在view里面直接放文本,添加文本是需要那个text组件的。那么T组件呢,就是咱们第二个组件,这里呢,是用于显示文本的。怎么理解呢?就是view,它是一个容器,那么test就是一个文本的一个容器,它是专门用于放放置文本的。
04:04
另外,咱们还新增了一个text文本。分本你们就会。像类似于那个小程序里面的副文本组件。可以用一些样式,然后一些节点来。嗯,展示咱们一些副文本的一些内容。就很多的那个文章啊,可能是后台生成的,然后后台里面的那些文本有加粗啊,或者有图片啊,图文混排,这种模式就是使用文本来实现的。下面就是image标签,Image标签就是对应的咱们H5里面的那个图片标签,然后使用这些。啊,它的一些属性呢,也是比较靠其微信小程序的图片的那个图片的一些属性,有一些拉伸的一些方式,或者说一些加载的一些事件。啊,加载错误之后,或者加载过后有些什么事件,并且呢,还有一些缓存的一些机制在里头。
05:03
那通过这些不同的属性,然后匹配出咱们最后的一个呃图片的显示样式,当成按钮组件呢,其实就是呃用于提交表单的,或者是说用于呃设置这个按钮的样式的。有些按钮的话,就是通过这个button来触发的,因为它有一些像submit或者这种方式,这种嗯,属性。另外一个就是咱们思路的一个影铺的组件。Input在表单里面其实是非常常见的,因为这是嗯,应用软件交互的一个最基础的一个方式,是用于收集用户的数据输入的,他的那个属性也是非常多的,因为这个咱们做一般表达的时候都是需要使用者之间的,呃,一些事件呢,其实和那个小程序上面是非常相似的,或者说咱H上面也是非常相似的,但是在咱们这个银步的组件上面还有一些特殊的点,像一些听过的APP,嗯,以及。
06:08
Type这些它是适用APP端的,就是用于定义咱们的键盘这些文字啊,或者说设置键盘类型对应的input组件呢,还有一个test l组件,它是它是定义一个多行输入框的。下面呢,也是跟上面有类似的一些焦点,是交输入的一些事件。啊,这个具体的使用呢,就是可以参参考这个文档,然后说的还是比较详细的。下面Switch啊,Slide啊,Peer或者check box,这些都是一些基础的,嗯,表单里面的一些组件,说白了就是说它只是另外一种形式的输入方式,多多看一些这组件的那个文档,然后你在使用的时候就可以非常方便的就去把它写出来。
07:00
嗯,咱们系统组件其实就是目前给的这些,然后后面根根据更新呢,可能还会加入一些像开S啊之类的这些组件,然后在看组件的时候,我们还要顺便看一下,这有一个通用事件的一个,呃,通用参考。通用事件里面呢,就是有一些click,嗯,Non price或者他start这些事件,这些事件呢,为什么通用事件就是它是在每一个组件上面都是可以去执行或者绑定的,所以这这个叫就叫做通用事件。那么你在不同的层级或者不同组件上面都是可以调用那些事件,然后它的一些回调的参数都是在这里已经写清楚了。对应通用事件的还有一个通用属性,就是每一个组件也可以定义一些这样通用的一些属性,比如说我们使用class style这个字是咱们常用的,嗯,然后使用ID呢,就是给他绑定一些ID。
08:00
然后使用hi的呢,这个其实是比较不常见的,就是其他端可能没有把它理解为就是类似于呃,给他加了一个display VLAN属性。然后还有一个data前缀的这样一个通用属性,咱们以前在小程序开发的时候,如果原生的小程序开发没有那个,呃,数据传递的时候。那么我们可能就会在节点上面去保存这个嗯,上下文的那个数据,然后通过点击拿到它的对的那个,嗯。私有数据,然后去做一些点击跳转啊之类的操作,这个是为了适配那个的,但咱们的框架里面其实也是可以在点击上参的,这个可用可不用。嗯,另外呢,就是有一些H5的兼容组件。要是那个兼容一些H5的习惯啊,就是有些开发者是习惯于直接使用div SPA或者标签,以及就是说有些同学的那个项目本身就是A5的,然后为了快速的转成咱们的,嗯,A的那个。
09:08
应用的话,其实有些组件并不是需要去改写的,他们是可以兼容的。这个空白同学问。阻子冒泡的话有说明吗?应该如何写?这个竹子冒泡是有说明的,其实是跟那个外部端的还是非常相似的,PD框架里面就是有一些组织冒泡的一些写法的一个示例的,因为比如说像那个。嗯,弹出层,然后有点击层的话,如果你不阻止冒泡的话,其实点你会点穿的。然后我们现在讲一下自定义组件,其实大致是分为三类的,就像一个业务组件,然后一个通用组件,还有一个页面场景的一些组件,但是实际上是分为两类。啊,因为页面场景和业务组件,它都是跟业务有关系的,他就是在上下文是有一定的场景在里头,它并不是说拿到这个东西别人也可以用,当然如果你们的业务场景是非常类似的,那么就可以用。
10:06
嗯,另外一个还有就是通用组件,通用组件呢,就是类似于咱们那个,呃,像这种技术组件就是属于通用组件。下面我有个例子,就是说业务组件就类,就是看到咱们那个点餐这个模板啊。那我给大家启动一下,还是CSS写的背景的,会转成小程序可用的话。嗯,是这样的,小程序里面它对背景有些特殊要求,咱们写的时候可能也是要需要遵循这些要求的,对吧?嗯,我们还是把那个点餐的模板打开,然后给大家介绍一下这个组件的一些划分。像在这个里面,咱们看到首页上的话,呃,像。这个商品列表就是一个业务场景的组件,因为比如说我可能就做一个外卖点餐的一个应用,那么我可能就一个商品列表,如果说我做一个在线教育的,我肯定就没有点餐这样一个列表出现了,或者说我要做一个游戏,那我肯定也更更加不需要列表了,因为业务组件的话,就是它跟你的业务强相关,它可能还保留着一些上下文的跳转啊这些信息,那就是属于业务组件了。
11:19
我们看到这个计数器啊,这就是一个通用组件,像在这个商品详情页,我们是有这么一个加减的一个计数器的按钮,这就是个通用组件,我不需要关心你上下文是在处理什么页面,或者我点完之后要去什么页面,这个不需要关心,因为我点完之后,我只需要保证我这一块的数据域是在做我所期望的一些操作,这就是所谓的通用组件。然后它通用性比较高呢,它还可以放在别的地方。如果说有这样的一个。场景,那么我们就可以把它拉过来,而且在这里面呢,可以做一些初始化,然后数据的保持和同步更新啊,存储啊之类的,所以这个就是所谓的通用组件。另外一个就是。
12:06
页面级的那个组件,就是我们在代码里面可以看到这几个泰国页,其实是就是可以算为一个组件,当咱们组件化开发的时候,页面级其实也是一个组件,因为咱咱们在代码里能够看到,在这个首页里面呢,其实它就是这么一个组件。它也是按照组件这个格式来书写的,然后往外暴露出了一个组件的名名称,然后我们现在了解了这个组件的一个概念和思想的话,就是我们可以把咱们以前写的业务,如果没有涉及到组件的一些嗯封装和提取的话,可以考虑一下哪些地方可以嗯改写成这样的形式。嗯,我们现在来看一下单文件的组件,就是嗯,文档上提到的这个,因为昨天我们讲的就是主要是讲的这个单文件的形式嘛。单文件的形式,其实就是包含了三个块,我们昨天也非常详细的讲解了三个块的作用和那个,嗯,它的一个工作原理。
13:11
我们需要在这里看一下,他有要补充一下,就是如果说要自己开发组件的话,我们需要去学习组件的生命周期的相关知识,我们在这里可以查询到组件的生命周期。一个组件呢,是有这些生命周期的,一个组件的生命周期呢,在组件的一些特定的场景下就会去执行,那么反映到咱们代码里面呢,就是像呃,Export default这个对象里面的一些。方法,呃,像ready或者是before render这些函数,你就都可以去拿来使用,然后在一些特定的地方去做一些,嗯,你需要的业务逻辑的一些处理。另外呢,就是这些生命周期是在什么时候执行的,或者什么时候开始的,你可以把这些方法都放到这个咱们的这个对象里面去,然后进行一个打印去调试,然后自己就可以知道他哪一步是先执行的,哪一步是后执行的。
14:12
然后这个文档上面讲解了一些生命周期的一些触发时机。嗯,另外呢,就是在这个生命周期里面,我还要补充一下,就是文档上面有体现出来的有一个on so和onhe的这样一个事件,这两个事件呢,其实和那个呃,小程序端其实还是很像的,昂寿和阿害的,昂寿的话就是。页面出现的时候它会去执行,嗯,二害的呢,就是页面关闭的时候它会执行,或者说页面消失的时候,被其他的一些view有去遮挡的时候就会执行,嗯,其实等同于昂数,就等同于那个系统事件里面的VIP,那么啊ahead呢,就是嗯,API下面那个嗯,Vodpi这个函数这个这个事件。
15:00
这就是那个组件的生命周期函数,嗯,在组件化开发下面还有两块,其实这个就是组件之间的通信了,嗯,组件通信呢,其实大致大致分为这么几个情况啊,就是从父组件向子组件传知。那么我们一般就会采用prop的方式,然后给它,呃,给子主界面传入一些属性,像下面这个例子就是。那就放大一点。在这里就是通过一个prop,然后来接收这个属性,然后嗯,在使用prop把它解析之后呢,就可以使用这个title,那直接去渲染这个字段了。另外呢,就是可以在这个画括号里面可以直接写prop.title也可以直接一步拉到,因为这样呢,就是有一些呃属性传进来之后,它的类型可能不一定是确定的,因为呃用使用那个tag的方式去传的话,像类似于这样,你并不能很好的理解它究竟是个字符串还是一个数字之类的,所以可以使用这样的方式去给它定义类型。
16:14
然后也可以通过数据帮定的方式动态传值,那么这个动态方那个绑定的方式呢,就是咱们那个微办的指令,也可以简写为冒号开头这样的方式。只要写了冒号的这种情况的话,或者当半的这种方式,那么后面的这个其实就是表表示了一个数据的那个字段,并不是那个字面量,所以如果是有冒号这种形式都是可以正确的获取到data里面的数据,然后它这里面是如果是数组啊,或者说数字啊,对象啊,这是非常明确和清晰的,下面看一下在子组件里面如何监听事件,因为刚才我们提到的是那个。嗯,父组件向子组件里面去传入数据,那么子组件里面呢,要向父组件通信的话,那么只能向上发事件。
17:03
代码里面呢,就是on result这个方法就是通过on的一个,嗯。函数前缀,然后表明它是一个监听函数。然后在子组件里面,就是通过fair的方式去点燃这个。Result对吧,就是前面把这个on去掉的话,因为on是咱们的一个指令嘛,就是它是一个监听的一个,嗯。有前缀,所以最后面的一个事件名称呢,那就是咱们这里需要去向上触发的一个事件。那么第二个参数呢,就是可以获取到它传过来的一些具体的参数。因为file方法是两个参数,第一个就是事件名称,第二个就是自定义那个数据,然后在副组件监听的时候,就可以通过的那个属性拿到所有的数据,就是如果这个地方就是在那个附属件里面通过嗯监听拿到的。
18:03
我们看一下这里就是通过on result,然后给它绑定的一个函数,因为这个监听的话,可能是需要一个函数去处理,那么在我们的白里面就可以去写这么一个方法,然后拿到这个自主键向上反馈出来的数据,那么这个1TIME就是整个数据的那个对象,就是下面这个detail,对,那这个上面1.detail,那么如果说咱们要输出那个message这个hi的话,那肯定就是一点detail.message当然还有一种方式呢,就是。通过,然后直接拿到那个数据,就是我们刚才提到的那个prop那个,呃,如果说你像这里按click执行一个事件的话,那么不需要去file,因为在这里this对象呢,是可以拿到那个prop里面的,我们可以拿到这个组件给他传的一个on result就可以执行了。嗯,而且还有一些数据也是可以这样改变的,不过这个不是不太符合那个数据流的规则的,就是我们在应用的做应用的时候,最好还是需要符合一个单向数据流的这样规则,因为这样的话数据可预测,好管理,像VI有react,他们其实都是使用了那个单向数据流的一个数据流向规则。
19:20
然后我们再整体回顾一下这个STML文件吧,就是我们使用这个。单文件的形式去那个组建模板的时候,它大致就是这个样子。至于里面的这些函数怎么写,或者说它代表什么意思,我们在前面的课程都已经讲的非常清楚了啊,需要注意一点就是这个内姆这个字段啊,它是非常特殊的,因为这个name里面,它就是代表了咱们这个组件的一个名称。嗯。如果你的那个STML页面,它是一个页面级的话,并不是一个组件,那么其实这个可写可不写,或者说你写个什么都无所谓,但是如果是你是一个。
20:04
呃,组件的话,那么你这个地方写什么名字,到了最后使用的时候。它是什么名,名称的话就是这个这个类目字段是起起了决定性的作用的。所以最好是不要重名,然后这样的话就会造成那个组件的一个嗯问题,或者说如果你在这个页面上,你这个页面就叫做API test,但是呢,你又在这个。页面内部有引用了一个API test这样的一个组件的话,它就会造成一些循环引用,然后死循环这样的一个情况。所以这是需要注意的一点。然后我们看到这个最后编译的一个效果是这样的一个效果。其实这个东西并不是咱们编译的一个效果,这个只是一个大致的描述,它这个还是比较接近于咱们的最后要提到的那个单文件的,单语言的那个方式的。
21:06
嗯,我们来看一下吧,大家打开一下那个。我们在这里可以新建一个页面,然后给大家演示一下,新建一个文件页面。嗯。这个页面呢,就是咱们先先简单的写一个。文本,然后显示一下。我们这里写个第三讲。我们进行一个实时预览,其实这个地方呢,就已经在编译了,我在点预览的时候,它已经做一次编译,对吧,你看它下面有一些,嗯,编译耗时。他这个最终编译成什么样子呢?我们在这个这个编辑器里面可能看不到,我们是需要在那个。
22:02
我们换一个第三方的一个编辑器。你在这个里面做吧,因为那个项目我暂时没打开,那么在这里面配置里面还是新建一个。一样的。这里就是我们新建的一个页面,然后这里写一个第三课,我们回到这个里面来实时预览一下第三课,对吧,那么在这里它的一个。下面有一个B目录啊,然后我们能够看到这里有一个M3的GS。这个呢,就是咱们的一个最终编译的一个效果,一个代码。可以看到上面是一个,嗯,是一个类的一个转移后的一个效果,然后创建了一个类,这个名字呢,就是咱们的那个类目的一个。
23:07
体现,比如说这里我们可以给他是应该不是这里啊,应该是这里的,比如说我们叫做。再编译一下。大家就能看到在这里它的那个类名其实也变了。所以说这个。类目是决定了咱们那个最终编译那个组件名称的一个最终的一个名称的,所以这个是需要非常谨慎的。在下面我们可以看到一些咱们熟熟知的一个API ready,或者说呃,一个软的函数。我们在这里再做一些新的一些东西给他看看什么样子的,比如说贝塔里面唯一就是默认是一。
24:01
然后我们做一下编,做一下编译啊。这里面就能看到它有一个相当于是这个地方是它的构造函数吗?因为它如果转移成这样的话,就是构造函数里面执行的,所以我们知道这个其实是构建数据最早的地方,因为咱们在代码里面。是这样的一个,但前面其实也是可以写写那个东西的,比如说我们这里打印一个黑板。在编译之后呢,它代码就是。这里能看到就是咱们打印的一个data,所以你在这里可以就是做一些数据的处理,然后给他,嗯,做一些预设或者说初始化,当然这也是比较,嗯。比较高级一点的,如果说你对这个比较擅长和熟悉的话,你是可以在这里去修改这些东西的。
25:00
在编译的结果的文件里面,它会有一些,嗯,有一些那个方法,比如说像ready,就是挂在咱们生命周期,然后有个re的函数,还有一些CSS,还有一些像那个。嗯,这些构造函数,然后给它定义了咱们这个最终组组建的一个GS的一个对象。在这里面最重要的就是咱们如果说要写组件的话,关跟咱们那个业务逻辑有关系的就是这个render函数了,Render函数里面有会暴露,会腾出这么一个东西。向a.H然后第一个是T名字,第二个是属性。第三个呢,是什么呢?第三个它又是一个。啊,H函数,然后第一个是text,第二个是none,第三是第三节课。那我们对应的代码里面看它是什么样一个结构呢?在代码里面template,我们知道他们会他会把这段的代码,然后提取出来。
26:02
提取出来之后呢,把它作为一个模板编译的过程,然后给它解析成咱们的一个虚拟节点,可以看出这里就应该是两个层级,第一个它有一个will的一个。它有一个配置的一个view,然后包括其这个第三节课这个文本在。代码里面呢,我们可以从这里分割一下。也就是说。它前面这部分呢,是那个class和will的一个定义,它就是定义了tag和它的属性,而第三个参数呢,就是定义了一个它的。它是因为它是它的子元素嘛,它的子节点,所以它就放在第三个,那么对于这个T的节点来说呢。它是标签,那么它现在没有属性,第三节课这个文本呢,又是它的一个子节点,所以它就使用这个方式去渲染。那么我们文档上面是这样的,一个是单语言的话,它并不是编译之后的一个情况啊,它是一个。
27:06
单语言的一个书写方式。咱们现在单元有一个专门的页面可以给大家看一下,在单元里面这个return这一块,熟悉react的同学知道,这个就是嗯,那个GSX的一个表达方式。我们可以把这一段拿过来,因为GSX是react,嗯,他发明的这样一个描述模板语言的一个抽象的一个方法,嗯,包括VIVO现在也是支持GSX渲染。呃,他是通过那个就是转移的八卦里面是给大家。能够把它编译成一个具体的一个执行函数的,看一下这个能打开吗?给大家看一下工具。比如这里我们把刚才的那段。这段GSX来粘到这个工具里面,看它具体会翻译成什么东西。
28:04
可以看到这里有一个react.create element这个方法。我把这个格式化关掉。可以看到它一个它的副容器是这个一个will,那么对应的一个属,它有一个属性叫做hier。它后面的话又是一个这样的一个节点,你可以把它又单独单独看看做一层,然后我们再做一些新的。改变,比如说复制多复制两个,有可能他会在后面无限追加,那说白了后面的从第一个主迹,第一个标签是把它认定为一个tag,第二个对象呢,参数呢,就是作为它的属性,那第三个已知来自后面的都是把它作为一个T。如果你写的再多,他就会往后排。那我们还是回到只一的时候,我们具体研究一下另外的一个呃属性,比如说我们这里会传入一个title这样的一个参数,就title叫做标题。
29:13
啊,这个地方它是一个转移成那个幽灵扣的,给他写一个英文的。就能看到这个,你在这里写的再多的一些属性,它都会放在第二位,这里就是它的一个属性。嗯,包括里面你可能会出现的像。嗯,可以这样的事件。对吧,它现在是作为一个属性字段,那么我们给他绑定一个方法的时候,比如像叫做类似点。This click。对吧,你能看到这个地方,它其实是能帮定能把它变成一个那个函数的引用的,然后这一段它会生成什么呢?就是GSX,它会怎么去执行呢?就是在这个代码里面,可能大家看到一个react create element是比不太熟悉的,回到咱们的那个最终编译的呢,有一个am.H这个函数大家可能也不是太熟悉。
30:17
嗯,我们可以借助一个方法来先写这么一个单语言的一个组件的一个文件啊,这里就有一个例子啊,我们就是写了一个原点函数,非常简单,非常纯粹。然后我们在DEMO里面把它引用进来。看一下这个类名,就是叫做simple。GS嘛,然后我们使用DeFine函数给它定义了这么一个组件,那么我们在页面里面使用的时候。可能就不会样使用。然后这个给他引入一下。
31:08
里面的内容是在哪呢?就是。点进去。就是这一块的内容,因为它这个地方是一个返回的一个函数嘛,我们是不是可以在这里给它做一个东西呢,给他把这一块给他保存起来,我们做一个编制V漏。这个是哪个,然后把这个微都反馈回去,然后我们就能加点东西,确保我们这个车修改过的。就是刚才我提到的,就是在这里我们做了这么一个。嗯,变量保存,然后我们在编译的时候,还是能看到咱们做的一个修改是没有什么问题的,在这里其其实就是能拿到这个数据了,能做一些事情的,我在这里打印一下这个V的对吧。
32:05
但是怎么看呢?这里注意重点来了,就是教大家怎么去调试这个。咱们这个编辑器使用那个studio,那个Vs code的开发的嘛,那么它也是有开发者模式的。咱们使用审查模式的时候,审查元素的时候,就能看到这里有一个y view的一个container。在这container下面呢,有一个src这个地址呢,就是咱们的那个。预览的一个路径,咱们把它拷贝出来。开会出来之后呢,我们使用一个浏览器给它打开。对吧,这个时候就能够在这个浏览器里面看到咱们的页面了,包括说咱们打印的那个日志都能看到了,对吧,就是咱们那个data打印的那就是那个漏的V漏对吧。
33:00
甚至说我们可以点到那,然后给他打一段点。然后我们在页面刷新的时候,他在未执行之前就会在这里去走到这个地方,然后咱们可以在断点里面去看当前这个组建的一些数据啊,或者说渲染函数啊什么的。就可以在这里看到了。这个是非常可以说是非常干货或者非常实用的一个东西啊,大家能够掌握就可以把它来调试,然后这个地址呢,给大家说一下,就是它是其实是可以简化的,就是说如果你是在这个地方复制出来的话,因为对应的就是咱咱们的那个。你的工作区间里面的那个文件嘛,然后如果你只要一进行编译,它就会生成这么一个这样一个文件。呃,打开这个文件呢,我们来看一下这个文件。在这里有一个provie这样文件,它下面有一行代码,就是get这么一个配置的一个参数,然后把这个配置呢给它加载到这个页面里面来,说白了我们只需要关心这个配置里面的参数就行了,然后我们看到他把这个GS加载进来了,这个地方其实没必要写这个全路径的,就是可以在这里直接把前面全部剪掉,然后只剩下下面的这么一个GS也是可以运行的。
34:18
这个地方是非常简洁的,就是以后咱们调试的时候,在浏览器里面去看它的一个样式结构,以及就是说打印日志这些东西都是非常实用的。咱们在那个开发的过程中,在这里进行一些通信啊,数据管理,或者说那个节点的操作,做完之后呢,有必要的时候可能再会同步到那个啊小程序或者是说APP端再去看一下最终的一个效果啊,大家有没有掌握到这个调试方法,掌握到这个调试方法有可能会提高咱们的一个开发效率,然后在做组件的时候呢,也是可以,嗯,利用到这个方法来调试咱们自己那个开发过程中的一些问题。
35:02
通过那个tag name转化成一个name,就是能让我们知道它是什么类型的,然后在下面呢,有个child。然后他还有一些K,然后有一些attribute。对于这个差,下面它是一个数组,数组的话就是刚才我们最开始演示到的,如果我有多行的话,可能就会多次创建,那么它的那个差呢,就会有多个。呃,刚才我们介绍到了,就是通过那个GSX,它能转化成一个漏的一个。描述语言我在开始之前就是讲到那个跨平台的时候呢,也给大家讲到一个,嗯,就是节省字符串来描述这个界面的一个概念,那么这里就是它最终转化成这么一个描述语言。至于里面呢,有一些属性和那个方法,我还给大家演示一下。比如说我这里有个太,就叫做。
36:04
然后这里还有一个我们的class。比如说类叫做一个可能有一个颜色这样的一个情况。然后可能还绑定了一个事件。Click。这里叫做test,那我们知道this test这样的一个函数绑定。然后进行一下编译。编译成功之后呢,我们在这个preview里面再去刷新一下。这个时候我们在看到这个HP的时候,发现它会多了几个属性。其实你会发现它那个属性都会在,呃,在这里面去,上面所体现出来一些东西,不管是函数方定,或者是说一些事件传递都会在这个。SP里面去显示出来,然后这里面呢,就是我们会拿到它一些数事件和属性,在这里面去做一些事情,嗯,在这里他在挂载的时候呢,也是可以通过一些,它这里有其实是会接受一个参数的,叫做prop。
37:11
我们在这里可以打印一下这个prop。还是回到这个浏览器里面来,然后看到这个prop呢,就是咱们从页面上级传过来的这个属性,就是在组件调用的时候,因为咱们这个组件是在组件内部,是在这个页面里面调用的,咱们什么都没有,这里我比如说加入一个style,比如说我们来给它个颜色background color是red。然后呃,这个地方呢,我们可能会给他一个子节点,比如说我们这里又传了一个文本标签。此时我们在编译的时候呢。他看到这个地方是没有什么效果的,因为嗯,我们是没有给他做处理,但是我们这个数据能不能拿到呢?在这个阶层里面,我们能够看到现在已经有这些数据了,我们能够看到有一个style这样一个属性,然后还有一个。
38:15
求准这样的一个数据。而且下面那个是咱们刚才提到熟悉的那个漏洞,就微漏的这样一个节点。而微的load里面呢,又是这样一如出一辙,所以呢,我们现在就能理解到它是如何把咱们的节点编译成那个接送对象的。然后在这个编译的过程中呢,就是。最终实现这么一个代码里面。能够看到每一次的一个创建,一个节点创建,都是使用这个APIVM.h的一个方法去实现出来的。
我来说两句