APP和小程序实战开发 | 基础开发和引擎模块特性原创

好，那我们现在就开始今天的课程，就是昨天的课程，我们给大家介绍了API cloud开发平台，以及API的2.0的版本，和咱们新推出的3.0版本的一些区别。啊，并且呢，给大家讲了一些，就是在创建应用的过程中，有那些应用类型如何选择，就是你可以根据你的需求啊，或者是场景的类型，嗯，昨天呢，就是给大家介绍了一些开发工具的使用，包括创建项目以及嗯，导入项目实时预览，以及还有这个增机同步这些功能，咱们今天呢就会。接着这个项目就是继续给大家。对API3.0有一个整体的认识，或者说还是一个快速上手的一个过程，今天的课程呢，还是比较偏向于基础的，因为还是有很多新的小伙伴刚刚接触的，或者第一节的话就是先从特性介绍开始。

先给大家看一张图啊，这还是那个发布会上面的那张图。我们来给大家。介绍一下跨平台的一个。真正的那个跨屏的原理。就是为大家讲解一下什么是跨平台的工作原理。在我在PPT上面，我们看到就是说在左边的这一块有一个虚拟盗墓数，我们通过。把页面上的一些组件和内容来抽象成一些虚拟的do，然后通过一些build的工具，比如说像外pack pack roll up，或者说drag clean to这些工具来进行转移和打包，然后将我们的一些抽象的一些组件的一些结构描述文件，然后转化为我们具体的一些对应的平台的一些渲染。就比如说我们的。

在页面上可能创建了一个结构，那么我们经过工具链的一些转移和编译呢，就能得到，呃，适用于我们目标平台的一些语法，比如说像APP，嗯，我们就可以可能会使用一些原生的一些方式来渲染，它实际上是通过最开始的定义的这样一个结构，然后到了最终的一个平台上的一个渲染，那很多同学就是说怎么就没办法操作到呢，我们这里看的话就是。因为do在一开始的时候，它已经就是一个抽象的一个对象，那么到了具体的平台，才会有具体的do的一个呃实现。我们再看到2.0和3.0的一个对比图，这里有一张图是2.0和3.0的架构的一个区别。左边的图片呢，是2.0的一个结构，右边呢是我们3.0，可以从这个图中呢看出，其实2.0和3.0的那个结构啊，还是非常相似的。

只不过呢，就左边会多出了一个web view的这样一个底层的一个引擎，那么右边呢，它没有了web view。这样做的好处呢，就是我们之前第一节也讲到过，就是可以去除外view，然后把这些差异性和一个比较消耗性能的一个部件移除掉，我们使用统一的一个引擎去渲染。另外呢，我们在3.0里面还引入了一个v model的一个概念，V model就是咱们后面要讲到的数据帮绑定的一个框架，也就咱们的A的这个，嗯，JS框架。在这个图片里面呢，就是能够很好的体现出我们API cloud的一个开发的一个架构体系，我们在做页面开发的时候呢，经常是使用了window和frame以及UI model的这样的一个三个三个组成，三个部件组成的。

嗯，我们使用window来创建一个，呃，比较。大的一个页面容器，然后页面容器里面呢，可能会出现很多的frame这样的级别的小的组件部分。啊，UI model呢，就是我们后面要讲到的模块部分，因为有一部分模块是肩负了那个UI的功能，2.0呢，我们因为我们是使用了HTML来编写界面的，所以我们是需要外部来实现页面的渲染，那么3.0呢，其实就没有HTML了，我们是用用自己定义了一个呃页面结构来去书写这个应用的界面的。这个页面的结构呢，我们先看一下3.0的文档。在立即体验这一栏里面呢，我们就能看到呃一个最基本的，或者说最呃最最基础的一个演示。

我们可以看到这个页面呢，它是叫做一个SFC的一个单文件组件，这个页面呢，其实和是和VI是很相似的。也是通过也是由三个部分来组成的，我们来下面看一下这个。页面介绍。一个STML文件呢，它是包含了三个顶级的语言块，就是有template script，还有STYLE3个标签，同时呢还可以支持引入web的GS和CSS。还可以引入其他的一些HTML组件。我们看一个典型的一个事例，这个SML文件的示例。在上面的部分是我们的template的部分，Template其实就是我们页面的一个具体的渲染的一个描述，我们可以通过temp类呢来说明页面中有哪些元素和组件。

在style部分呢，我们就会说明这个页面上所用到的样式。在script下面就是。该组件的一些数据和方法的定义，编译的过程中呢，还会通过解析这个文件啊，就就是提取出每一块的语言，比如说刚才提到的temp和CSS以及script不同的区块，然后编译成一个具体的一个执行页面，然后下面的文档上提到了有一个编译后的CSS代码。我们通过看这个代码的话，其实发现它其实是一个class类。啊，这个代码呢，对于我们来说还是非常。直观的就是可读性还是非常高的，但实际上呢，编译出来并不是这样的，因为这个可能还是属于一个中间语言的这样一个状态。因为这其实是一个临时代码。我们到最后编译的时候呢，啊，那个时候可能会包含了一些呃，兼容处理ES6的一些转移啊之类的。

最终呢，我们可能会编译的那个代码比这个更加的复杂，那么后面我们在调试的过程中呢，我们会为大家讲解最终的编译代码，以及就是说通过编译代码来排错啊，或者调试啊，以及书写一些高级组件。再回到这个目录结构里面来，因为我们那个所要创建的应用呢，是要适配于小程序，我们知道小程序呢，它是有一个目录，所以我们在使用3.0的时候呢，我们也需要建立一个配置目录。有哪些包呢？我们在下面可以文档上有体现。就是这是一个比较完整的一个3.0的项目的一个包的结构。其中呢，里面包括一些。像CSS component以及htl icon image lunch配置等这些文件，其中我们最主要用的文件夹就是一个配置目录，配置目录呢就是存放我们具体的一些am的页面代码。

我们如果说要去创建新版的STML文件，那么一定要把文件放在这个目录下面，这样的话我们才有机会就是说把它编译成小程序的，这样也会兼容小程序的一个编译过程。另外呢，我们要关心到的是一个component这个目录，这个目录呢，就是一些公共组件，在我们业务业务开发中呢，可能会把一些公用的一些。嗯，公用的一些文件组件提取成提取成组件放在这个目录下面，另外呢，还有CSS也是公用的一些样式目录。嗯。其他呢，就是最主要的还有一个就是config点叉ML文件，这个文件呢，就是咱们的一个应用的入口文件。

嗯，一会儿我们根据那个点餐的项目的源码，然后给大家做一个具体的一个分析。我们回到这个编辑器里面来看到这个点餐的源码。看一下是不是昨天那个项目啊，昨天这个地方改过一点，就是还是这个代码。这个代码呢，对应的就是嗯，我们在get up上面那个最新的代码，如果说没创建出来的话，就是可以通过get up上面去拿到这个代码。在这个代码里面呢，有一个道目录，然后这里面是比较详细的一个，嗯，技术要点的解析，我们今天呢也会以这个为主，然后给大家讲解一下。嗯，这个。新的这个3.0的一个项目结构。帮我看一下这个评论里面。

走。哈德同学说文档里面忽略了最重要的con阶说明啊，这个是一会我们要讲到的，就是在那个con文件里面。啊，对，不是那个卡菲格点接森，是APP点接算，然后是那我们那就从这里讲讲这个卡菲点X文件吧。我们拿到这个项目之后呢，就是如果说你是新建的项目，或者说从get up上面下载项目，嗯，首先第一点你就可能要去分析这个项目的入口在那咱们的所有的所有的统一的入口都在这个卡菲点叉ML文件里面，这个文件里面呢，它定义了这个项目的APPID以及呢。最重要的就是这个content，这个src属性里面的这个路径呢，就是代表你的入口文件了。这个PPID其实呃，有关系的，就在于就是你在提交代码的时候，以及你的在那个自定义load里面去同步的时候，他会去校验这个ID是否为统一的，那么我们上一节课讲到自定义load的时候，我们其实也是可以通过，嗯。

创建自定义load的，然后把代码去同步到自定load里面去，如果说你这个项目ID代码和load的不一样的话，你其实也是可以手动改那个ID，然后和你的I自定义load保持一致，那么你就可以在你的里面去预览你的代码了。其他的一些呢，就是关于应用的一些基本配置，这些可有可无，就是说它并不是必须的。你看像那个在act里面这个项目里面，就是那个组件文件里面啊。这个就是我手动创建了一个。嗯，咖啡格文件，那么这里面其实很明显就只有。三个要素在它外，外层呢，就是APPID。

第二个呢，就是它的那个应用名称，第三个呢，就是我要说明我是使用的A渲染。另外一个呢，就是康菲哥这个文件。那么我们再看到这个src里面。这些文件里面的一些配置，我们可以到那个文档里面。一定要注意我们的文档地址是do.api cloud do com，然后我们在这里可以查到我们所有想知道的一些信息。如果你能把这个页面就是说完全掌握的话，其实API已经就不在话下了，就所有的东西都可以掌握掌握掉了。在这里我们可以看到刚才提到的包结构，其次呢，就是看飞哥点叉ML应用配置说明。在这个说明里面呢，就包含了我们刚才提到的所有的一些必要的配置，里面包含了一些应用信息，或者是说一些第三方的一些密钥。

以及一些属性。为什么项目上面没有礼品介绍啊，这个就是为什么拿点餐给大家介绍啊，就是这里面有一个解析文档里边有一个。呃，有一个小结，就是说为什么需要一个APP点接上配置文件。因为这个项目呢，我们看到它是一个这种tab组成的。如果说我们在那个小程序上面，如果要写这么一个ta的话，那么我们就需要配置一个APP介绍，因为这里也有相关的链接，在这里去找到这一个说明。所以我们是需要使用APP来，就是做了一个兼容吧，相当于是就是把那个原生端的和小程序端的两个做了一个兼容。嗯，所以使用了一个对B接S文件，然后让他们实现这个type的一个实现，如果说你只需要去做那个。

APP端的话，不考虑小程序或者外部H5端的话，那么你其实是可以使用咱们原来的那个frame group来实现的，因为本身这个点餐这个项目在开始开发的时候没有还没有适配小程序的时候，就是使用了一个，嗯。Frame group的方式去实现的。我们还是回到这个STML文件上面来。在这个文件里面呢，定义了一些界面样式和方法。那么编译后的那个语言是单语言文件，因为其实咱们这个也是可以使用两种语言开发的，就是下面还有一种单语言的，什么是单语言的呢？就是整个页面都是一种语言，那就是GS语言。相对于咱们单文件来说的话，这个文件里面是包含了三种语言的，你看上面是一个类似于HTML的，下面是呃，还有GS的，还有CSS。

他这样的方式呢，就是。比较像view的那种单文件组织的方式。对，就是组件化。嗯。另外一个单元呢，我们可能会放在后面去给大家讲解，因为这个还是也比较灵活一点的，对于组建开发来说，或者说嗯，自定义渲染方面还是比较方便的。今天我们先就着那个。SFC这种单文件方式给他讲解咱们这个项目。我们在模板里面看到有一些发括号的一些绑定方式呢，这个其实就是咱们要一块儿讲到的数据绑定，在文档上面也写的非常详细，就是数据帮定呢，是同时支持大括号的和单大括号和双大括号都可以的，然后用于绑定文本内容或者说元素属性。

啊，这里就是一个例子，就是在这里我们在数据域声明了一个message的数据，然后在text里面就可以使用大括号或者小括号来渲染它。啊，同时呢，在括号里面呢，也是其实是可以使用表达式的。呃，使用大括号也还可以绑定属性，比如说一个组件上面可能还有一个text的属性，那么此时如果属性是动态的话，我们也可以通通过这样的方式去绑定上去。在事件处理里面，其实数据帮定和事件处理啊，他们两个都是基于指令来实现的，因为我们下面看到有两个特殊的指令，就是V和V办的。事件处理呢，我们来具体看一下，它有其实是有呃两种方式的，第一种是用使用on click的方式，这个比较原生一点，下面VM呢，就是刚才我提到的用指令的方式去当定的。

在这里面有一个特殊的一个标签，就是v for v for就是可以根据数组来便利循环元素，我们通常呢，就是使用v for来做一些列表的渲染，如果说嗯，你有一个数组，那么就可以将这个数组作为数据源，然后给它循环遍历这个列表。因为有支持威利服爱丽斯嘛，就是文档上是有提到的，那肯定就是支持的，你在使用的过程中是有什么问题的话啊，你可以在那个把你的例子，把你的用例可以贴上去，然后在论坛里面提出一些bug，然后嗯，咱们的。引擎就会根据你的提供用力，然后去测试，然后去给你修复这样一个问题。咱们还是回到那个项目里面啊，就是刚才讲到这个APP点接送这个文件。未结算文件，我们打开它。发现里面其实就是定义了这么项目的四个tab页和一些基础的一些属性样式。

我们的四个页面呢，嗯，在那个截图里面，或者上次运行的那个模拟器里面也看到了，就是。有四个太，有四个太液，首先它对应的就是。咱们这个闷闷开头的这个模拟夹里面的页面，在这个页面里面，我们详细的去，呃回顾一下，刚才讲到就是那些数据绑定和事件的处理方法。啊，在此之前呢，还给大家看一下，就是关于。呃，一些组件，就是咱们系统也带了一些系统的组件，像未有test，如果说之前开发过微信小程序的话，对这些组件是非常非常熟悉的，下面呢，还有很多的像image呀，Button呀，Input这些组件。嗯，我们回到项目里面来看到这些组件的具体使用。在这个上面呢，我们使用view标签创建一个容器，在下面呢，使用了一个image标签来渲染这个头图。

下面这个滚动的地方是使用了一个sc view，它是一个滚动容器，里面呢还有一些文本组件，使用来渲染咱们页面上出现的这些文字啊，这些文字呢，可能是来自于一些，呃，第三那个后端的接口。我们可以在data的数据域去找到这些数据的定义。这个地方呢，其实是写死的一个数据，如果说我们直接作为静态页面的话，其实就是可以这样去定义数据，然后在模板上面去使用这个shopping for呢，对应的就是上面的一个shop for。我们可以通过这个data下面的属性，然后直接使用它的属性画括号来绑定，就可以在页面上绑定出我们使用的那个啊字段。当然了，我们还可以在那个。

页面里面通过一些。网络接口请求，然后拿到服务端的数据，然后将数据复制给咱们的一个data，就可以让页面是渲染出咱们动态的内容了。上面的内容其实是非常简单的，就是我们介绍的技术组件的一些拼装，还有事件的帮定，像这里呢，咱们可能用到了一个微付，然后来循环这么一个列表，列表里面有三个三个分类，所以我们又使用了一个v for，然后对这个class，这个list进行一个循环，然后在这里面还有一些动态的一些style的绑定，里面呢，都是使用了一些GS表达式，通过一些特定的逻辑，然后让我们的样式和。类去做一些不同的一些处理。上面的模板介绍完了之后呢，我们看到下面的，嗯，这个脚本就是script的标标签部分，Script里面呢，大致结构呢，就是有一些生命周期函数，还有一个类目，呃，来。

来指明当前的一个组件的名称。如果说咱们是一个组件的话，在其他组件引用的时候，这个类目是至关重要的，如果是作为一个页面的话，其实类目是无关紧要的。下面的话就是一个data与就是我们刚才经常提到的如果如何要渲染这个data的部分。这边还有一个computer的这个字段，如果说使用view的同学是比较呃熟悉的，它是用来计算属性的，嗯，因为有一些数据可能是来自于data里面，然后是比较复杂的一个表达式，如果说我们想想要拿到这么一个数据，可能需要多次去编写这么长，这么长的代码，那么我们可以通过一些简单的逻辑封装，然后直接让它成为一个咱们的室内的一个属性。在下面的一个MY这个选项里面，就是一些定义了，咱们事件帮定的一些具体的实现，通过传参可以拿到这些事件员，然后在里面拿到，呃，事件里面所反映出来的一些参数，我们可以。

不给他绑定，然后可能就是点击事件啊，还有呢，就是我们可以主动的为他绑定一些，嗯，上下文的变量，比如说这里可能会有一些数据啊，就会在这里拿到，在下面呢，其实就是咱们的CSS部分CSS呢，还可以用使用这样的方式去引入外部的CSS，它这个不太类似于那个。嗯，Web上面的那个link那个标签啊，他是用这样的方式去引入，好的同学说。STL。最不好的是只支持flex布局。对，他现在是支持的lix布局，其实lix布局怎么说呢？如果说你熟悉了lix布局啊，还是非常强大的，因为之前的话，我最开始使用的时候也是不太习惯，或者说不太熟悉这个Lex布局，嗯，感觉有一些局限，或者说做不出想要的效果，但是最后如果说你熟练的掌握了flex布局呢。

嗯。可以说几乎百分之八九十的排版或者说样式都可以处理到的，因为雷布局还是非常强大的，它的API或者说组合出来的效果是非常丰富的。那当然除了那个flex布局呢，我们的am其实还支持在定位方面，其实也是支持绝对定位和。呃，相对定位的。Flex布局加上绝对定位，其实就是可以解决几乎99%的一个布局情况。我觉得是这样的，就是嗯，没有什么布局是雷加绝对定位做不出来的。至于如何安排觉得定位和那个福雷斯布局的结构呢，这个要根据你的那个页面结构，还有项目的一个嗯情况去具体安排呢。

呃，如果一直采用200这种变身方式，平台会一直支持吗？是这样的。平台肯定是会一直支持的，但是为什么我们会去做3.0呢？因为3.0的话其实是一个趋势。2.0的L方式有什么缺点呢？就是在政策上面会有一些风险，比如说像以前的，像咱们去年appleto上架的时候就会，呃，会去查那个有没有使用以前那个UI view那个组件的。嗯，他现在正在规避这方面的东西，就是因为外部的方式比较。太灵活了，他可能不太容易监测里面的一些东西，所以这个是政策方面的东西。嗯，图钉同学说涉及到没有定义的变量，你就直接闪退了，不友好是吧？那你为什么要写没有定义的变量呢？你你在开发代码代码的过程中，为什么要写没有定义的变量呢？

啊，这个后面看看能不能就是啊，直接给你提出一个编译的过程的时候，就可以给你报出一个报错，然后嗯，针对这个debug的话做一些优化，闪退的确是有一些不友好，但是闪退的话。你想想，那也是。APP应用他自己执行不下去了嘛，对吧，他是没有办法，他就闪退了。机智云的源码可以用进去吗？你说的机智云是那个模块吗？还是什么？即时云是咱们在咱们模块里面是有一些模块的，那模块到里面有模块，然后一会儿讲到模块的时候，会给大家讲解那个模块怎么使用的。对，一起开发的时候谁知道谁的问题啊，这个就是工程能力方面的问题了，就是可以引入一些像ES link呀这种的语法的。校验监测，比如说你提交的时候可以link一次，然后去看一下有一些微定义的变量啊，或者说不规范的代码，对吧。

是的，是的。嗯，的确刚才只是开个玩笑啊，并不是说为什么你要去写那个。嗯，冰凉的脚压缩，我们现在有几个1.0项目为规稳定，现在该用3.0，感觉比原来损失了，对吧，双引号单引号有什么区别吗？这个的话。是单摇双引号，我本来应该是要看一下大纲啊。本来这节课可能想想跟大家讲一下这个，呃，GSX，或者是说像。单语言那种，嗯，形式的就渲染，那我们在代码开发的过程中呢，其实需要注意一点，也不是一个必须的，那么你需要有自己的一个规范，或者自己的一个标准。你看像这个项目里面，我们事件帮定的话。

是用的艾特符号对吧。那么使用绑定这个。字符串的时候，用插槽的时候，那就是使用的双括号，那么这个风格呢，就是非常非常接近那个VIVO的，就是如果你是使用某一种风格的，那么你就嗯，最好是从始至终一直使用同一种风格。对，那么如果说你使用了。使用的不是这种艾特符号，或者说你使用的是这种昂，或者是说呃，你使用的是这种单括号的去绑定，那么你就是使用这么一个风格，因为现在平台做了一些读绑型，就是说兼容一些没有写的，它会自然的去识别为另外一种，因为刚才也讲到了嘛，就是这个这种语法，它还会做一层做一层转译和编译的。那么到了一个中间语法的时候，他会去处理一些上下文的数据作用域。

昨天的课可以回放啊，昨天大家一起看昨天的课其实是非常简单的，昨天的课就是嗯，关于。怎么快速上手开60，咱们有一个跟他咱们有一个项目叫做哈DDP。这个这个代码呢，其实是非常简单的，没有什么实质性的一个效果，但是呢，它的文档就是read me也是非常丰富的，就是这个文档上你可以去熟读，这个文档其实可以算作是昨天的课程的一个文字版，你在这个文档上面跟着做，然后下载代码，然后去下载工具，那么去调试和预览，你就完成了昨天的一个学习了。这个文档还写的比较详细的。其实是包含了昨天的一个，呃，整个的一个大纲。E叉可以直接下使用嘛，E叉的话就是它其实是底层是基于covers的嘛，对吧。

呃，看小程序现在是不是可以直接使用一叉，其实也不是，他是一叉是专门为小程序做了一个特别版，那说明什么呢？就是它在实现的过程中其实是有一定的难度的。那么我们在。实现一叉之前要实现叉，那么实现叉之前呢，要先实现cans对吧？嗯，据了解就是说can这个组件现在目前已经嗯要快出来了，就是已经已经快完成了，也需要做一些适配，然后他们，嗯，我们在做这个S方面呢，可能会做一些具体的，比如说柱状图啊，扇形图啊相么的这个封装，那么在常见的一些。图表的场景下，就是可以使用咱们的最后的那个插词去渲染出来。当然你可以还是。嗯，去做那个，如果说比较复杂，或者要求比较。

呃，比较高的话，我们还是灵活一点，并不是要那个跨平台走到黑暗，就是可以灵活一点，我们在APP上面其实可以使用那个。Frame这个组件对吧，可以使用frame，或者说使用那个。这里有一个这个这个组件，它是在APP上面是可以使用的。那如果咱们熟悉那个嗯，2.0的开发的话，其实也对这个参数非常熟悉，其实他就是一个open的一个标签式的实现。我们可以在APP上面去。嗯，对，我们在APP上面可以使用frame模，然后去使用web view来渲染这个图标，如果你的图标非常的炫酷或者非常漂亮的话，那么要求比较高的话，就使用这个frame，那么A45呢，对吧，不用不用多说，那肯定是支持那个原生的那一叉，原生是什么样的，那你可就可以算成什么样子。嗯，现在有上百个HTM文件要转成STML了，要手工重写。

嗯。转换的话，那么。转换得看你的底子。那个。基础就是好不好的，就是比如说你的页面之前可能是使用的像咱们未有那种大文件的方式。嗯，如果说你是那种的话，转的话还是非常好转的，咱为什么要支持这个VI呢？就是其实是照顾了一部分的旧项目，因为咱们以前的项目，很多项目都是使用那个VI的，引入一个script的标签，然后上面写写一些盗号，下面写一写那个有一个VI这个对象，嗯，然后上面的就是他那里的部分呢，就是可以直接移植过来的，然后做一些做做一些修改。嗯，所以这个得看你的那个HTML文件是什么样子的了，如果说就是。可能风格迥异的话，那么。

这个东西是需要一个非常强的一个人工智能，或者说一个语法复杂分析库去做这个处理，那么如果实现这一套，其实可能咱们这个项目就比较就不是API API cloud了，可能就是一个新的local的地代码开发平台了。对，我也觉得就是没有转化的必要。嗯，SML和STML可以混合，混合在一个项目中的，对。所以如果你没有跨平台的需求，那么你是可以混合使用的。S可以直接引用吗？就是。这里有一个的一个组件吗。这个其实就是替代那个外的。如果说你在这里有什有什么疑问，如果说你想想尝试问一个问题，A会怎么实现，或者可以引用吗？你可以对等的去在。

嗯。你可以考虑你如果这种方式在小程序里面是不是可以应用，因为其实他们的原理大致都是类似的，过程也是比较相似的，所以你在考虑A的时候呢，你也可以考虑一下小程序端是不是能使用。哦，有人还发图了。对，这个都是。硬伤的感觉，因为这个东西你的平台相关性太高了，对吧。嗯，第一点你的dot.gs这个首先你跟咱们的那个数据绑定是冲突的。Dot，呃，怎么说呢，这个东西之之前是是据说是非常轻量级的，我也使用过一段时间，但是它的高亮和语法提示实在是太差了，就是可读性比较差，我感觉那一一堆的建括号百分号啊什么的，呃，它是不是太太漂亮的，因为你的那个。

首先你破坏了那个作用域，或者说一些磁法的一些提示，当然你如果装插件的话，那其实是可以，但是我还没有发现比较好用的插件啊，嗯，另外呢，这个第一个pass掉，第二个就是一叉次的话，那么就是刚才我提到的，它是需要看去支持和实现的，第三个呢，HTML to看S，那第一个咱们HTML没有，第二个看S可能也那个如果说正在实现，或者说功能可能没没有那么丰富。还有一些。还有一些那个兼容性问题，如果你在使用HT HTML to看的时候，你其实也是会发现它官方文档会给你提示啊，有一些CSS不能用了，或者对吧，或者说什么background image需要使用什么尺寸了，它这些都是一个。转移的过程。对吧，说白了都是把你的页面到它去获取轮廓，然后获取尺寸，获取颜色，它是通过去做一个就像一个摄像摄像机一样，他把你这个去理解了之后，然后去在看上对应给你画出来它这样一个过程的。

所以这两个都是一个比较。跟咱们这个am其实是比较不太相近的一个东西，当然了就是cameras的话，那目的可能是为了输出截图，咱们可以使用模块的或者原生的一些方法去做一些截图，然后保存成图片。啊，最下面这个QRQ的QQ的原理是什么，还是看我对吧，所以看沃的话，这个频率还是比较高的，嗯，咱们也在尽力的去实现这个看S，然后让这个看S的话，呃，能够接近，就是外部要准的看S。但是。嗯，你要想到那个小程序里面也是有看S的，但是它看S是跟外部里面是并不一样的，并且呢，就咱们其实做出来跟小程序的其实并不是太好，而且看过本身就是一个非常庞大的一个API体系，它里面去需要去实现，呃填充啊，折现啊，曲线啊什么的，这个还是比较复杂的。

对吧。尺寸单位尺寸不支持RPX，对，目前是不支持RPX，现在支持的是PX。这是IM的球啊，就很好，就是IM的话。尺寸的问题啊，因为现在目前是不支持那个RPS和的，其实咱们说到这个问题的时候，也是可以顺便说一下那个样式的问题，就是通用CSS，它这里面提到很多的一些注意点，就是只支持某些选择器，然后不支持寄存啊，不支持通配符这些东西。那我们为什么不支持呢？如果说我们到时候讲到那个虚拟到或者是说呃，GSX那部那块的话，大家都会比较明白了，那现在也也其实也能够非常。

明白的就是我们刚才看到每一个组件，就是它是一个嗯层级关系，那么每一个组件具体是要怎么去显示，然后要显示什么颜色，它可能要考虑到继承的关系，或者是说呃一些共嗯共同共同作用的一些关系，最后最终出来效果呢，可能是非常非常的复杂的。这个你其实。不需要大惊小怪啊，如果说你了解了原理之后，你可能会给他加上的那个限制会更多，因为嗯，你要从这个具体的那个原理去出发的话，你会发现其实这些都是合情合理的。因为每一个组件，比如说我可能给HTML就是跟组件定义了一个样式啊，比如说color等于red吧，对吧，红色的一个文字，我们在HTML里面去做的时候就是那可能整个页面都是红色的，那如果说我们在原生里面，或者是说。

呃，在原生里面去渲染了很多层级的一个，呃出现了之后呢，它每一层包包在里面的现可能都要给应用到这么一个样式。所以到最后呢，可能就会挂载出很大一堆的一个样式，如果说你的那个组件。层级特别深的话，那这个效果可能就非常的复杂。所以我们最好是减少那个组件的层级，然后嗯，每一个样式给它单独写出来。我们把后面的部分。来继续讲解一下，刚才就是讲到了那个，呃，3.0的一些特性，还有一些嗯，绑定还有样式盗墓操作。另外这里面有一个盗API，这个是。这个我看了一下，其实我做这个文档的时候，我以为这个是那个咱们那个前端那个档，其实并不是啊，这个是为咱们那个原生的模块准备的，你比如说这里，它是在这个数据绑定和状态管理的基础之上呢，还提供了类似于那个document的方式，使用这种方式去获取这个组件。

对吧，比如说上面的那个temp里面有一个音input的属性。嗯，有一个音input的属性啊，然后通过Dollar符号，就是几块这种方式去拿到这个do，呃，这个对象。这个其实就类有点类似于view里面的那个ref那种引用嘛，对吧，然后我们可以通过这种方式去拉到具体的一个对象，嗯哈的同学说不应该加倒霉平，其实小程序不支事。对啊，我刚才不是提到了吗？它是这样的，就是它是为那个原生模块所准备的，因为像list view这种这种组件，它是基于原生去实现的，就是它需要给do上面去绑定这么一个。

比如说这么list view给他起一个名称，然后给他获取到这么一个原生对象之后呢，给他做一些list view的一些API，把数据给它漏进去啊，所以它这个do呢，其实是更加狭义的一个do，它是指的那个原生组件里面的一个对象。那么适用适配到这个input里面呢，他可能会拿到这个，通过这个盗对象拿到这个Y6的值。所以这个道我们要注意一下，一定要注意一下，就是它跟那个。呃，网页上面倒不是同一个东西啊，他只是说做一个标识。还是回到大纲里面，然后我们上面的这三个部分其实都讲的差不多了，最后我们看一下端API和模块的使用，其实这一块呢是给，嗯，相当于是一个复习的一个模块，这个模块里面的知识呢，都是介绍2.0的API和3.0的在三点里面的使用。

如果说之前接触过200开发的话，对这些东西是非常非常呃熟悉的，3.0的话也是也还支持原来的一个操作方式。就是一些端的API和模块的使用。我们先看一下端API吧，什么是端API呢？就是。咱们API提供的一个基础的能力，这个文档在哪找呢？还是到文档主页里面。之前我们开发的时候，其实我去的最多的地方就是这个页面，就是API对象，就下面端API下面有一个API对象。在这里面呢，就是提供了一些基础的对象，对吧，这个是咱们API的一个核心，就是说你如果要。在2.0开发或者3.0开发，你需要就是说能让你的应用。啊，非常的符合API的这种架构，那么你需要去熟悉和了解这些方法和属性，它其实分为四大块，但其实是三大块啊，一个是属性事件，还有方法，这个constant是一个，其实你可以理解为它是一个枚举，就是它是有哪些取值范围，我们这个的话，你到了一些文档里面，它可能会提到这个，你在这里面去查就可以了。

那我们还是重点关注的这三块，就HB词就是属性。属性的话就是，呃。就像一个对象一样，他有自身的一些属性，比如说一个人，他的名字就叫属性，对吧。姓名就是他属性，他的性别也是他属性。这就是属性，他通过属性呢，可以获取到一些项目的一些信息，比如说PID就是他的一个身份证号对吧，还有APP内就是他的姓名。并且呢，还有一些像那个。

Platform呀，UI model呀，这种去获取到咱们在端提供的一些属性，能够通过这些东西做出一些具体的判断，比如说我们可以通过这个。Ne connect就是能够拿到这个网络的连接方式，就是知道它是用2G网还是3G网啊，或者WiFi来连接的，我们有些业务需要做到，比如说呃，在WiFi下可能自动播放视频，或者说嗯，在2G网下或者4G网下，我们需要下载不同质量的图片，我们就可以通过这些API来做一些具体的业务逻辑。如果说在这这个操作在那个AA45里面其实是不太好拿到的，即使现在新的那个外部标准可能在慢慢的实现这些接口，但是呢，嗯，在现行的标准下可能还是比较困难的，所以这是针对咱们APP上面一些特殊的一些属性。那么说的再详细点，就是类似于像定位这种权限，它是需要用户同意的，或者是获取通讯录这样的一个权限，是需要用户同意，是需要在数组环境下有这样权限之后呢，你的外部才可以再再进一步去获取这些权限，那么咱们如果使用a cloud的开发呢，就是咱们就直接是和系统在打交道啊，咱们的API cloud那里面的网页和逻辑呢，其实就是直接就是相当于是一个数字的环境。

还有一些event的，就是一些系统事件。通过这些事件呢，我们可以嗯做一些反应，比如说像低电量啊，电量在这里呢。或者是说像网络断开啊。断网了对吧，有些页面的话，你会监测它是否断网了，比如你做的那个聊天应用断网了之后呢，可能这上面就提示一个似乎已经断开链接了，对吧，然后我们再监听它是否联网了。然后我们就可能会去刷那个刷新页面，获取最新的聊天记录，或者说聊聊天的一个会话。

然后下面就看到就是MYMY的话就是方法，那么通过这些方法呢，我们可以就是使用aap体系下，然后去创建这么应用的一个方式。方法里面大致分为了这么几类，一个窗口系统。窗口系统就是咱们组织代码的结构的方式，就是咱们常见的像open one open frame。Open和open frame呢，就是咱们最基础的一个窗口系统。不问就会打新，打开一个全新的一个窗口，那frame呢，就是会在窗口里面做一些小的一些布局。那可能会叠加在那个window上面，然后一个里面呢，会保持会开很多个frame，然后做这么一个生命周期的管理，当你的window关闭的时候呢，那么frame可能也会被。

回收掉。其实举一个恰例子，就是open就相当于是一个舞台一样，你把舞台打开了之后，那么frame呢，就是上面舞台上面表演的人，那么如果你把舞台撤掉的话，上面的人其实也是跟着他一块就。会去掉的。通过open one和close one或者是close to one这种方式来打开或关闭窗口和页面，其实有点类似于你们那个root的那个路由概念。除了那个最基本的问和FA的。概念呢，还有一些像。嗯。像一些slide layout这种的特别难啊，大家可以自己再点进去之后，然后对照使用这个。示例代码，然后做一些呃尝试，然后看一下他们到底是什么效果的，就像QQ那样的，或者是说像那个。呃，有一些弹出层啊这种的都是有有这方面的实现的。

啊，下面就是高级窗口，就针对于咱们之前的温加frame的形式呢，推出了一种更高效的方式，其中在这个table里面呢，有一种就是。咱们那个type type的布局就是通过这个实现的，所以呢，咱们那个之前提到的APP连接的文件里面的一些配置，其实是可以在这里面去找到的，这里面会有一些详细的说明，比如说状态栏点击了会怎那个不状态栏是那个底部的type栏点击了会有会是什么效果，然后文字大小，颜色什么的都会在这里去定义。并且它是否有阴影啊，或者说它的里面的一些哪些元素都是在这里可以去找到它相关配置。这里也有几行几个实例代码，你可以根据这个实例代码去做出不同那个页面效果。嗯，下面应用管理就是关系到一些应用安装和卸载的一些东西，网络通信呢，就是咱们用的比较多的就是API的贾克斯，就网络请求嘛，还有取消请求以及下载取消下载。

网络通信里面还有一个image catch，还有一个设置证书的一个选项，如果说你在嗯应用上面出现了证书有问题的话，你就可以在这里去设置。其实请求里面就包含了post get最常用的一些方法，并且呢，它就是一个原生的一个请求库，嗯，在小程咱们适配小程序的时候呢，也是兼容呢，也是使用API点。嗯，这个方法去那个去兼容了微信点request方法。并且在这个登录的方法里面去，可以去下载一些二进制的数据对象。数据存储呢，就是有提供了多种方法，可能会是写文件的方式去保存数据，也可能是使用原生的偏好数据去给他做数据存储，还有呢，就是使用这个global data，有点类似于那种session的那种全局数据，因为有些数据是需要在全局运行的，但是呃，使用完之后呢，可能就说就需要销毁掉啊，那么global data呢，它是比较。

性能比较高的啊，完了之后呢，如果你应用结束之后也是被回收掉的，因为它的数据是在内存之中的。啊，下面的消息事件呢，这个其实是咱们2.0里面的一个通信的一个方式，一个机制啊，在这里可以添加一个时间监听，然后这里可以送的一个译文字。在这个I event里面呢，我们可以看到它是监听事件呢，可以监听系统事件和自定义事件，什么所谓系统事件呢，就是刚才在第二个tab栏里面应该是第三个啊，在这里面提到的是这这些列表里面的事件都是系统事件，包括了一些像低电量，音量或者按键以及这个。

啊，摇晃手机啊，长按啊等这些操作。所以在这里面就可以监听到那些事情，然后在回调里面拿到一些具体的那个数据，比如说这是个网络链接里面他可能会有一些网络类型都会掉。那么这个事件管理呢，其实和那个web上面的很相似，就是使用的那个。At even listener，或者说remove listener。但是要注意一点，就是一个window下面的话，同同一个事件可能只能去注册一次，这个有点像那个we部里面的unlo的这种啊，如果你写多个lo的，可能会只会是有最后一个lo的去执行，因为它这个事件的话，可能就是拿这个事件的名称去做那一个啊。建制保存，然后去查询的时候呢，就会通过最后一个去拉到你注册多次的时候，你可以自己去实现一个封装啊，就是比如说你自己的一个一台内存的，然后去判断当前。

有没有这样一个数据，然后有没有这样一个事件，如果有的话，可以继续往这个事件里面去做一个数组，去把它保存起来，然后嗯。把所有的逻辑都放在这个回调里面就可以实现了。这个是很多时候会忽略的一点，就是事件为什么不生效啊，那就是因为你可能写的同同名事件了，在同一个页面里面啊，就是同一个window里面。啊，另外一个呢，就是刚才说到的是。呃，系统事件还有一个新的event呢，我们可以自己发一个事件，就是自己可以派发一广播出去，它的整个的一个应用里面，只要是啊，处于活跃活跃的区的那个页面，他都是可以听到的，比如说我自己创建的一个my event，然后给他追加一些附加数据。

然后在有监听这个事件的页面上面就会做出一些响应，我们这个一些常用的一些逻辑呢，可能就是像用户登录成功了之后呢，我们要通知其他的一些页面要做一些。啊，登录后的一些页面逻辑的显示。那么就可以通过这个来实现，在那个以前的那个2.0的里面就是。组件之间通信，或者说页面之间通信，都可以通过使用来实现。在3.0里面其实也是可以使用这个一词的，但是我们，呃，这个是基于系统的去做了一个实验总线，我们也在avm里面去提供了一个。提供了一个事件通信的一个机制，就是像子组件里面传值，或者说监听子组间的事件，然后通过这些肺方法，那这些方法具体的使用方法，我们可能会留在明天的课程里面去讲解。

嗯，因为这个组件化开发的话，其实另外一个要素就是组件之间通信嘛，对吧。下面呢，我们看到的是设备访问，这些就是一些关于比较原生和native端的一些方法了，嗯。看一些名名称吧，就大致就能知道它是什么意思了，就是我们可能升级到那个动态权限之后呢，可能会使用has permission去判断是否有动态权限，然后去通过请求权限去给用户弹出需要申请权限的一个按钮。另外呢，还有一些呃，获取用户风格，比如说你是黑暗模式啊，或者说你还是啊，你是一个白天模式。以及呢，像短信啊，打电话，还有这个开启这些传感器这样这样的一些API，这些东西是比较偏底层和原声方面的，所以这个叫设备访问啊。

如果我们要做的一些相关的一些，呃，需要的话，就是可以使用这些里面的一些方法。下面就是UI组件。其实这个UI组件就是。比较，嗯，比较像那个web里面的一些一带UI的一些。嗯，弹窗啊或对话框什么的，还有一些透，就是前提示，这些只是丰富咱们的应用交互的一些东西。下面多媒体呢，就是可能会有一些录音或者是说啊，获取图片或者播放播放音频啊，开始录制视频啊之类的。嗯，可能还会保存到相册，这些关于图片媒体方面的操作都在这里。嗯，这个呢，就是模块加载，其实咱们没有太多用到的地方，但是如果说我们用到模块的话，肯定是会用到这个的，我们在模块里面会看到这个代码的使用。

外部APP呢，就是咱们那个，呃，创建小程序的时候。呃，创建那个应用的时候是有YBAPP这样的类型的，嗯，YBAPP的话，通过这种方式来控制它的前景后退，这个如果用的不是太多的话，可以不需要了解它，下面就还有一些像滚动上页下页或者说设置焦点啊，这些都是一些辅助的一个方法。啊，我们能够把这些API。API的方法和属性能够过一遍之后呢，心里有有点数，完了之后就是如果遇到某些方面的需求，能够很快的在文档里面去找到，然后并使用每一个方法下面都有一些室内代码，然后就可以复制的代码就可以跑起来了。嗯，下面的话就是API的方法，我们再讲一下那个在这个应用里面就是体现的出来就是。

像API开头的这些东西都是咱们的。Set state style就是来设置这个状态栏啊，因为在H5或者说web APP里面是没有状态这这种概念的，所以状态栏的话是也是属于原生的，那么我们通过API的方法去给他设置。另外有一些跳转，咱们这个页面里面可能没有跳转。嗯，好像是组件里面就是通过open问的方式呢，打开新的窗口，这也是咱们那个呃，API的能力或者API的方法。最后一个。嗯，咱们模块的使用。在API的API cloud里面呢，有一个非常强大的地方，就是在于模块里面，模块里面提供了一些很多的模块。嗯，这里面就是补齐那个咱们前存前端对原生的一些拓展的方面的一个缺陷，咱们写前端的话，可能就对一些功能或者说一些需求，它是使使用原生来实现的，像蓝牙传感器啊啊，以及像这种布局啊，或者一些效果啊，可能咱们使用前端没法实现。

那么。就可以通过模块或者说自己去，嗯，有原生开发能力的话，可以去往里面设置自定义模块。在咱们这个点餐的应用里面呢，有两处的模块，其中一块就是在那个登录的时候。在登录的时候使用微信的，因为咱们使用微信登录的时候话，可能是需要使用一个模块的，因为因为这种它是。它是需要和第三方APP去交互的，那么咱们，呃，微信呢，也是提供了一个native端的SDK，所以我们就是封装了微信开放平台的一些分享登录的功能。那至于模块怎么使用呢？我们在这个登录的那个页面去看一下的具体的使用方法。

这每一个页面都是刚才我介绍的那种格式啊，其实还是非常好理解的，能找到具体的那个登录的点。我把这个实时预览先关掉。这里有一个on click，然后是微信登录的方法，我们看一下它它是具体怎么实现的。在下面微信登录的方法里面，有一个是否是微信小程序的判断，因为小程序的话，它是走的另外一套小程序内部的登录逻辑。呃，在APP端呢，可能就是使用的是微信模块这块是注掉的，因为这个是作为模板的话，因为可能那个K不正确，也没办法正常使用，所以给它注销掉了，大家如果在那个模块里面配置好了之后的话，就可以放开了，我们来看一下这个怎么使用的呢？其实打开这个模块，比如说你想使用什么功能的话，那么这个模块里面查看文档。

就可以到这个里面。有使用的具体的使用方法。那上面是简介，下面是方法，跟那个API方法那个文档是很类似的，你可以点击每一个方法进去，然后找到你所对应的逻辑，或者是说需要的一些功能。咱们这个功能就是很简单，先把这个模块引入进来，因为在识别代码里面就是。第一行就是需要这么引入一下。嗯，然后我们通过快的方法呢，引入到这个模块。然后我们会使用is install的这个方法去判断它是否安装了微信，如果安装了的话，那么我们就会再使再次使用它的一个授权方法，在文档里面都是可以找到的。使用授权方法，然后能够拿到用access token之类的一些用户数据，然后我们再结合后端或者是说存前端的拿到一些token ID，然后就做到用户登录了。

这里我们是使用的是呃。后端的方式吧，应该是然后给到。给到后端，他们去通过后端的SDK能够拿到用户的具体信息，像姓名或者说头像之类的。呃，另外一块呢，就是我们在那个应用里面，还有一个就是支付之后。呃，下单之后需要支付，那么支付能力呢，也是需要一个第三方模块的，我们在这里可以搜索一些支付，比如像我们使用的微信支付或者支付宝支付，那么使用模块的方法呢，也很简单，就是如果你想使用这么一个支付的话，那你就点立即使用。然后我们会找到我们所要添加的应用，然后就确认添加到。添加到了之后呢，就是咱们项目里面就有这么一个模块了啊，去APP里面你要看一下。啊，当然这个他是应该是个项目啊。

这个项目里面就是刚才咱们添加了一个模块嘛。就是刚才添加了一个支付宝模块，然后也是可以在这里通过模块库区那反向添加所需要的一些模块，比如说我可能需要使用到一个DB模块啊，或者说想使用到一个，嗯，其他的一些地图模块啊，都可以添加进来。注意到就是你模块有所更改之后呢，就是一定要去点击这个自定义load，如果你使用自定义的话，就是需要去重新打包一下，因为模块的话，我刚才提到就是原生的一些SDK一些代码，那它这个代码呢，是固化在那个壳里面的，就是native端的，所以我们需要把我们的壳更新一下啊，并且呢。呃，要配置一些密钥或者之类的，然后我们在我们的资金合作里面就可以体验到最新的那个模块了。嗯，官方没有微信群，目前。

就是QQ群的话是比较适合于咱们，嗯，学习交流进步的，因为呃里面可以传文件啊，或者是说发截图啊，对吧，而且QQ呢，就是比较广泛的，也非常容易的加进来了，像微信的话，它就会。可能还有一些时间限制，或者是说呃，传文件然后分享代码不是太方便，而且你发传短什么的也不是太太好，所以那QQ形是比较适合于啊技术交流或者这种互联网上面的一个交流的，对吧。啊，你们发的一些问题，或者说一些链接啊，或者讨论，他们应该有时候都会能看到，包括里面的开发工具啊，或者技术支持啊，都是在里面的。对QQ群的话看一下QQ群。群号是。339762594，然后在咱们的那个。

文档里面其实到处都有这种这个群号。对，这里这里也有。嗯，在这里都会有的。所以这个群还是啊，这里没有。项目里面我应该是加的有那个QQ群的一个链接。条件编译我看一下。条件渲染哈，这个时候漏掉了不好意思，但是实际上其实非常简单的，我们在那个代码这一块也已经已经看到了，对吧，有一个条件的逻辑方面的。就是我们找到这个AP对吧，我们其实是不是可以这是一个布尔值啊，布尔值放到。把我们的布尔子放到这个贝塔里面，是不是是不是就好了，比如说在这里给他一个MMP，这样也是可以的，然后比如说我们在这里去创建一个文本的时候，对吧，这里你可以就可以使用条件，这所谓的效经变异了，对吧，这里是是MP的时候。

下面就是不是的时候就会，这就是所谓的条件变异了。啊，页面都得改一遍。对，你的你的那个如果说不要改的话，那你就要考虑是不是设计方面的一个，呃，需要给他做一个整体的一个包装，或者是怎么样的，因为你看那个。像有一些的那个，你可以把它分成提取组件，然后把它整体的就可以啊拿出来，然后放在那个，嗯，你的公用组件里面，然后你改一处的话，到时候就可以改掉了，这个没办法，这个是要提前在开发业务的时候就得想好有些东西是不是需要适配，或者说需要去改的地方好。

还有其他问题吗？还有其他同学有问题吗？好，那今天就到这里了。