00:01
接下来呢,我们来带大家修改项目。同时呢,我们会了解到咱们的这个AMJS的一些基本语法,诶,下面一起来看啊。上节呢,我们讲了在conity插L里面指定了一个启动页,所以当我们访问项目的时候,访问的就是这个页面,而这个页面呢,对应的是pages下面的man下面的man.STML也说就是这个。组件,所以这个组件呢,是我们目前应用的这个根组件,就是最外面最上面就能访问到组件。我们点开它。当你创建好一个模板项目的时候,它默认的项目就会有一些内容,当然了,这些内容呢,我们现在都不需要了啊,可以把它拜拜。拜拜,好,我们来分别介绍一下咱们整个页面的一个情况啊,把它隔开一点,它分为三块区域,Tablet script和STYLE3个区,其中tableate呢用来放页面的结构对吧?结构就是我们展示的那些H5的结构啊,对吧?Script呢,放的是行为J。
01:06
也就是说我们在这里面完成里面的功能,主机的功能。So放的是页面的样式,我们将来在上面的取得类名,下面就要给类名对应的样式,那么这样呢,我们的结构才会具备样式。所以这三个区域并不复杂,那么这里呢,我们又需要重点介绍一下,就是这些区域的内容,来把这些样式呢都删掉,后续我们自己写。首先第一个我们看到一个save area的一个这样的东西,它是一个组件用来定义安全区域的。这个组件呢,是我们AMJS的内置组件。用来定义安全区域。什么叫安全区域呢?这时候我们就要回顾到我们的一个移动端手机设备。
02:02
现在呢,移动手机设备呢,它越来越大啊,其中呢,有些设备上呢,会有一个刘海屏。是不是就这一块呢,是放摄像头的位置,所以它不显示内容,是个所谓的刘海屏,然后下面呢,有的有的手机呢,会有一些虚拟按键,有些按键它占了占了这个屏幕的一个指定位置,这样的话呢,就会导致呢,我们内容在展示的时候啊,如果你不做特殊处理,那么有些内容会被这个刘海屏所遮住,有些内容呢,会被这些虚拟按键或者是实体案件给遮住,这样的显示内容就不完整了。所以为了让写诗内容完整的,业界提出的解决方案就是我们让元素写诗的内容在这块区域就好了,在这块区域的话呢,它就不会被刘海屏挡住,不会被下面的一些按键挡住。所以这块区域就是所谓的安全区域,一旦你使用了这个save area这个组件的话呢,那么我们内容就会在这个安全区域中展示。
03:00
那么上面这块内容上面就不会展示,下面也不会展示,所以说是这个。所以我们在移动端写写内容,如果这个内容希望展示的话,那么请记得用C。好了,这是这个组件啊。除了这个组件以外呢,还有一些组件,就是我们接下来要用的view和test。来我们来写的注释啊,接下来还有组件啊,View和T这两个组件呢,在其他框架中呢,也是没有的啊,因为他们都是内置组件。啊,其中view呢,它就是一个容器。啊,就是一个div。相当于div。所以将来我们要一个一个组件来当做容器的话,就用这个view,它就是个D。P呢,是个文本组件对吧,用来显示文本内容的。如果我们有文本内容要展示,一定要用这个T组件,它才能够成功的展示,否则的话呢,展示会失败。
04:03
好了,所以我们呢,可以给上面一个标题,对吧,我们的一个标题,那么就test OK,那么在这里就可以写上你的标题首页啊,啥啥啥都行,那么这样呢,它就会形成一个标题。如果你要给标题加样式,你可以给他一个class对吧,在这里给他一个类比,比方说叫title。写好之后呢,我们就会在下面去CTRLC。在store这里面呢,我们来给它一个类名,在这里我们去完成它的样式,然后调它的风size。调大一点。否则加粗。啊等等,甚至可以挑color,可以挑各种内容。所以说这里呢,就是写好的一段文字啊,和它相应的样式。那么JS这里又需要写什么呢?我们一起来看一下JS的这个对象。JF对象里面呢,它有name name呢就是当前主机的名字啊,那么我们要保证它唯一就好了。
05:07
这是一个组件的名字API ready呢,是一个生命周期函数。如果你学过其他框架的话,那么你就会对这个概念非常了解啊,所谓的生命周期函数就是当我们组件在运行过程中呢,它会触发的一些函数,只要你定义了,它就会执行,对吧?其中这个API ready呢,就是当我们这个组件渲染完成之后,触发的一个这样的生命周期函数。所以一般来讲,我们在这个里面如果要干活的话,一般来讲就是要发送请求。
06:00
啊,设置定时器等这些任务啊,或者绑定事件对吧。这些任务呢,都是异步任务,我们都会在这里做。当然目前我们没有啊,未来我们发请求的话呢,首先考虑的就是API ready,这个是这个生命周期函数。好呢,就是定义主机用的动态数据。如果我们将来要定义数据的话,就在data里面定义,它必须写成函数形式,没有第二种写法,必须要有返回值。然后反馈值里面放置我们要展示的内容。我们可以随便写啊,随便写些数据,比如说我想展示一个number为零,对吧,那么怎么展示呢?来看,在这里我们又可以写一个新的test文本,要展示数据呢,可以用上咱们的一个语法。后面我们会专门介绍这个语法呢,就是一个括号或者两个括号都行。
07:01
一个或者两个都行。啊,都可以展示咱们的这些数据。这是这个na呢,是用来定义方法的,那么后续我们用得上会大家去做。好了,那么这时候我们发现访问的时候呢,只要写number就好了,只要写number,它自动的会去咱们data里面找对应的数据,所以我们只要写这个number即可。好了,那么这个就是我们整个这个代码一些基本内容。呃,我们呢,在temp里面写结构,结构上面呢有些内置组件,当然了这些内置组件还有很多,后续我们会给大家一一介绍,这里我们做些出基本了解啊,我们了解到有save area,对吧,它是一个第一安全区域的组件,那么有view,但是这个view呢,我们还没有用啊,用上其实也很简单,就包括view,它相对是个div。相当于是一个div,当然呢,我们因为没给样式啊,所以说它没任何效果,如果给个样式的话呢,比方说我们给他一个呃,Container啊,一个容器。
08:13
给它一个背景色对吧。我们来一个哎,辣眼睛的颜色pink,好了,端猫待会就会有颜色。其中呢,文本呢,用test来去展示,Test用来展示文本,可以直接写你要的文本,也可以用表达式的一些语法来展示一些动态的数据。那么这两个test呢,都是展示这个number,所以实际显示的内容都是零,都是零,然后在里面呢,我们要写咱们的JS代码,JS代码的话呢,一般来讲就是要考虑定义什么数据啊,定义什么方法,以及在API ready1上来我们要执行什么代码。所以就会考虑这些。三的话呢,就是写样式啊,就是你所有样式都可以往这里面写,但是要注意就是它并不是支持全部的CS样式,有些样式是不支持的,那么后续我们也会大家详细介绍。
09:07
好了,那么这个呢,就是我们基本上去改代码,就是这样一点点改就可以了。
我来说两句