00:00
接下来呢,我们要写一个综合性的练习,运用算前面所学的技术,以及这个可视化编程工具,我们来搭建一组静态界面,同时呢,我们也完成其中部分功能。我们一起来看一下大家的页面。整个页面呢,我们要搭建的是一个防模糊的一个网站啊,那么它上面呢,有三个可以切换的tap导航,想法推荐和热板,下面呢有四个啊这样呢可以切换的。那么分别是首页关注会员和我的。那么所以它对应的页面呢,至少有七个啊,首页关注会员我的这里有四个,以及上面想法推荐热榜这里有三个,所以说它至少有这样七个页面。但是呢,我们主要开发的是这个推荐页面的内容以及功能,而其他页面的话呢,我们用一个文本来代替就好了,只要你能够把这一个页面的功能开发出来,那剩下页面呢,都是类似的,所以我们主要开发这个比较复杂的这个推荐页面。
01:02
好,接下来我们来开发它啊。我呢把它截个图。然后呢,再贴到屏幕上啊,这样呢,我们后续开发的时候,就可以通过这个内容去查看我们的这个项项目的这个原型图了。好,第二个呢,我们要新建一个全新的项目,在全新的项目的基础上呢,进行开发啊,如果用之前的这个DEMO的话不太好啊,里面文件太多了,所以我们打开我们的这个aplo。STUDIO3种工具啊,我们新建一个新的项目。那么项目名称呢?我们就叫chapter。第四章节呢,差不多四四的一个练习。好了,选择native web空白应用,使用LJS开发,点击完成,这个时候它就会在远程创建这个项目,同时使用,把它解除到本地来,我们解除到桌面就好了。解除。好,检出完成旧窗口就没必要了,我们只要这个新窗口,OK,它这里开了老多了啊,我们把之前的都给关掉。
02:05
好了,我们只要这个CHAPTER4E这个练习。那么接下来呢,我们再去搭建这个用户界面。整个用户界面呢,首先要搭建的是下面这四个八。搭建好了下面四个太慢,然后我们在首页组建的时候完成这些功能就好了。好了,那么要搭建这四个tab之前呢?我们首先得新建四个静态组件,分别对应首页、关注会员和我的,然后再通过某种方式把它变成开发就好了。好,我们先把这四个组织定义好。来到配置下面定义我们的页面组件啊。这个man没用了,我们直接改名字啊,叫home就好了,然后里面的组件名呢,我习惯叫index。然后所有内容都拜拜,所有样式也不需要啊,所有功能都去拜拜啊,然后把组件名改成对应的home,所有样式都拜拜,我们呢只保留一个文本叫做home,代表是这个组件。
03:08
啊,不然的话呢,它什么都没有的话,那我切换的时候就没有效果了,所以我们至少有个文本代表这个主机的文本,接下来把后复制一份来,接下来呢,我们下面这个关注,我们叫follow。好里面呢,我们就是把它的名字改成follow就好了。掐的不动,继续复制,下一个呢,我们叫会员member。好,会员定义好了,最后一个呢,我们叫我的啊。就是卖。OK,到这里呢,我们就要定义好了这样四个组件是不是,那么下面呢,我们就要想办法把这四个组件的生成下面的这个TA8,那么要设成TA2的话呢,我们需要用上API对象的一个方法,这个方法就可以帮我们创建tab,然后我们就不需要去完成下面的功能了,非常的轻松。
04:12
那么这个时候我们大家去看API对象的文档。好,我们可以来到这个官网,点击这个文档处啊,然后呢,在下面会有一个端APIAPI对象的文档,就在这儿点击它。好了,那么其中它有个method的方法,往下走,高级窗口有一个叫open tab这个方法,这个方法就是专门用来创建这个tempb的。好,那么它这里呢,就会告诉你一些使用的一些方式,其中呢,如果我们一上来就希望用上这个table else的话,可以把它配置成一个JA文件,再指定con channel中的content的值为该文件路径就好了。下面就有个例子啊,下面这就是这个例子,我们需要新建一个文件放在这个梦想。
05:00
同时再把content con插这个配置文件中的content的属性改成这个文件的路径即可。我们来写一下,首先把文件内容复制一份。我们要做的就是在这个目录下啊,它是这个简写的这个目录啊,在这个目录下新建一个文件加app.ja当然你加别的名字也可以啊,然后复制我们前面的这些内容。内容的含义我们待会来说啊,然后第二个就是把我们的con channel中的这个connect属性的值设置成这个文件的路径。可的属性的值指的就是启动页,就是咱们启动页以哪个东西为基准,我们以这个APP的Json为基准,所以这里我们只要改成WGT啊,对应的这下面的D文件就好了。这样呢,整个项目启动的时候,它就会去读取这个APP里Jason的文件,以这个Jason文件中的配置来启动整个项目。所以是这样的啊,我们来到APP里Jason,所以关键点就在于APP里Jason怎么配置。
06:03
首先name呢,是整个应用的名字啊,你叫啥都行,一般就叫就好了。好tab就是我们要生成咱们的这个下面的这个导航。就是这个开的配置。这里不能写注释啊,所以我们给大家讲解啊,然后接下来呢,它里面有两个属性。这样呢,我们把它。呃,这样换个行啊,这样的话呢,我就可以收起来了。好,呃,这里我格式化一下,我使用我的格式化工具格式化一下,OK,这时候就可以收钱了,那么呢,下面有两个属性,一个叫frame,一个叫Li frame指的是TA8上面有哪些页面可以打开,就是frame页面,它会呢新建几个frame页面,然后呢,我们我们对应有四个导航,其实就对应的有四个页面,所以frame也有四个R的意思,这对应的就是下面有生成几个导航,那么你在这里要去定义你的导航。
07:03
就这样的意思啊,所以一般来讲,Frame的长度呢,和粒子长度是一一对应的,而且它们的值呢是有关联的。我们接下来就大家写啊,那么title title呢就是页面的标题,那我们就叫首页就好了,Name呢,就是页面的名字,一般来讲我就跟组件名字是叫一样的名字,Your呢就是组件的地址啊,这里呢,我们就采用它的这种形式啊,直接去pages下面找这个home目录下面的industry stml这个组件。所以我们就搭建了这样的一个页面了啊,这个页面当页面它一上来访不访问这个倒不一定,它默认会访问下标零,也就是第一个页面这个这个值啊。好,后面的页面的写法呢,都是一样的,我们把它复制几份,我们有四个页面要写啊。第二个呢是叫关注。Follow。那么它就是follow目录下面的这个组件啊,下一个是会员member。
08:05
然后再下一个是我的啊麦。好了,这样呢,我就定义好了四个页面啊,当我们去想尝试访问的时候,它就会加载这个组件,然后对应的显示了。意思呢,就是下面这四个按钮,那么我们也要对应的写test,就是按钮的文字。Icon pass和c select的icon pass分别对应的是选中的时候这个图标长什么样子和没有选中的时候这个图标长什么样子,其中icon pass对应的是没有选中c pass icon pass就是选中图标的这个效果。好,那这个图标怎么整呢?诶咱们这里呢,提前给大家准备好了,我们这个练习中的需要用的图标啊,都在这里,其中高亮的就是选中的图标,没有高亮就是没有选中图标。那么我们要做的就是把所有图标都放到我们项目中,而且图片必须要放这个image目录,不要放错位置的啊,必须要放这里,放这里它最终才能加载显示,放别的地方是加载不了的。
09:09
来复制粘贴。好了,后续呢,我们会把这些项目资料呢,都会上传啊,大家呢,到时候下载的时候就自然就可以有这些啊图片资料了,所以大家也不用自己去找了,那么这些图片呢,我们都是去那个阿里的史料图标库icon里面去找到的。好,呃,我把图片放进去了之后呢,接下来我们继续啊,继续,那么首页的图片地址image是不变的image目录,然后下面的这个叫home.png就是它。好,下面这个写法呢,就是home后面加一个ED啊。哎,这就是我们的这个写法了,接下来呢,我们也是复制。四分啊,第二个是叫。啊,关注。那我们就复制吧,然后下一个是叫会员,再下一个是叫我的,然后呢,接下来是follow啊,Follow的一个图片和follow的一个选中的图片,然后呢,会员是member这个图片和member选中的图片。
10:14
啊卖的话呢,我的就是卖这张图片和卖选中的图片。好了,那么这样的话呢,咱们就搭建好了咱们的这个tab,并且我们在点击切换的时候,它会自动加载对应的这个下边的这个页面,默认呢,它会第一个是高标,所以默认第一个是会被选中,且加在第一个首页。好,接下来我们可以看效果啊。宝宝们打开打开我们的手机啊,找到APP。然后呢,点击这个通过WiFi扫我们扫一下这个二维码,建立起咱们电脑和咱们的这个呃,手机的一个联系,建立起联系之后呢,我们再次点击啊这个扫描二维码,点击我们的手机,它就会把当前项目上传到咱们的这个手机设备上,此时我们就可以通过这个真机调试啊,给大家看效果。
11:06
来此时呢,我们看到下面是不是就生成了这四个type导航,并且一下一下载之后,我要点击关注,就会切换到follow,点击会员啊,它就会分别切换到对应的组件,是的吧,没有任何问题啊。这里最后一个小问题就是咱们的这个首页的颜色呢,它应该要跟图标的颜色要与之对应,这样的话呢,我们才会更好一些啊。好了,那么这个颜色我们又是怎么去设置呢?来一起看文档。找到我们的这个文档啊,在文档的下面会告诉你咱们的这些数配置,还有哪些可以配置的,我们往下走,找到TAP8这个配置项,其中ta r里面呢,它有一个属性叫s color,指的就是选中的时候文字的颜色是什么。所以我们希望颜色要一样的话呢,就以改这个c color的值啊,来到这里,我们呢,除了fair,除了list,在这里设置这个选择的颜色。
12:05
注意,这是个dress文件啊,所有引号都得用双引号,不然的话呢,会报错的。然后在这里我们填写选中的那个颜色。这个主题色呢,是井号00671啊,大家知道就好了,后续我们就复制就好了,这个就是我们目前用的这个主题色。好了,改了代码之后呢,我们又要重启咱们的这个,让它增量B啊好,这时候我们就会看这个效果,诶大家看这个首页是不是它就变变成蓝色的了。我们可以放大一点啊,大家可能看的清楚一点,点关注,关注也会变成蓝色,点会员点我的它都会变成相应的颜色,没有任何问题。OK,这里呢,我们就完成了第一步啊,搭建好了下面这个底部的一个导航。
我来说两句