00:00
下面呢,我们开始正式去开发功能。我们要开发的功能呢,先开发这一个啊,打开原型图,找到这个首页。我们先开发首页的下面这部分,也说它有四个导航,对吧,然后每个导航呢,点击首页跳转到首页,点击购物车跳转到购物车,以以此类推,所以我们先开发这四个档案。这四个导航呢,在我们整个应用中呢,我们是叫tab。是一个导航栏。那么这个导航栏需要用一个特殊的方法去设置的,这个方法呢在API对象中有介绍。诶,所以我们大家看看API对象的这个文档。打开咱们的官网,咱们这今后呢,我们看文档啊,就尽可能去看官方的文档了,就不去看我们之前那个word文档,原因就是官方文档呢,它会与时俱进,未来万一发生了大版本的变化,官方文档永远能保证是最新的,而我这个word文档呢,可能是在我们现在对吧,它是目前最新的,可能过一段时间它就不是最新的了。
01:14
所以我们建议大家可以看官文档,官方文档呢,找到应用,点击这个文档即可跳转过去,在这里面有所有文档,其中端API这个里面就有我们API对象的文档,点下。除此之外呢,还有很多文档,未来我们都可以通过这种方式找到。来API对象呢,有一个方法method,其中有个高级窗口叫open table open tableout呢,在这里面它就告诉你怎么去设置这个tableout布局。它除了能设置time布局呢,它主要能设置这两个部分,一个是可以设置navigation bar,一个是设置这个tab。啊,Navigation bar呢,就是我们这个手机上的这个前面这个导航栏,对吧,我们经常看到这里有回退,这里的名称,这个就是navigation bar,而这个TA2呢,就是我们要设置的首页购物车,我的订单这个ta吧。
02:08
然后你要关闭页面的话呢,可以通过close me api.close命中方法去关闭。同时,如果我们希望首页中就要使用tablelt,那么我们可以把配置成一个address文件,并且在confiity叉ML中把这个文件设置成这个文件路径即可。下面就有个例子。我们就按照这个例子去写就好了。我们需要创建一个APP里address文件放在这个目录下,文件内容如下所示。接下来在指定con里插L这个文件,让这个APP里角作为启动文件即可。下面我们来做这个操作啊,首先呢,我们需要在这个VJ这个目录,就是这个WGT这录啊,新建一个文件叫APPJE,这个就是我们用来设置这个tab的一个dress文件,同时它也是作为我们整个项目的一个启动文件,文件内容如下所示。
03:05
其中呢,来我们格式化一下,可能会更好看一点。其中这个tab呢,它对应的就是我们整个的这个下面的导航内呢,就是我们整个应用的名称,你可以改也可以不改。对吧?Frames就是对应的type r对应的打开的页面,List就是对应的type r,它有哪些按钮,那么frames和list必须是一对应的关系。好,那么为了写这两个之前呢,我们还需要准备四个页面,分别是首页购物车,我的订单和四相应的这个图标,图标呢,我们已经引入进来了,所以就不需要再管了,那么我们准备四个页面即可。来到配置字幕下面啊,我们把不需要的东西给删掉。呃,把这个这个may的话呢,我们重复一下就好了,把它改成后。下面呢,就叫index stml,然后里面的内容呢,我们尽可能都删掉啊,只留一个test就好了。
04:07
因为我们不需要这么多内容,后续内容我们要自己一点点完成。然后呢,把这个组件名改成home。返回的数据都不需要,这里面一定要注意,就是data函数必须要返回一个对象,即使你什么数据也没有,联播也需要返回的对象,否则页面是出不来,会有报错的。然后下面这些样式呢,我们都都用不上啊,把它都删掉,OK,这样呢就完成一个最简单的一个组件。下面我们把home的复值计算。呃,好吧,复制有些小问题啊,我们一个个来吧,那么第二个呢,是叫购物车shop。STEM这里改成购物车。Shortcut,再接着下一个呢,我们是叫。负两份啊,下一个呢,是叫我的,我就叫卖了。
05:06
最后一个呢,我们叫做订单列表order list。因为将来还有个订单页面啊,所以我这个就叫订单列表了。好了,那么四个页面也创建好了,同时我们在很早之前这个图片其实我们用不上,可以把它删掉啊,我们在这里呢,它把下面呢,其实也准备了相应的图片home的。图片和home选中的图片,卖的图片和卖的选中图片都在这,图片和组件都准备好了,下面我们去APP里dress里面进行设置。是设置我们要对应的页面,第一个页面是首页啊,我们就叫首页,然后这里呢,就取它的这个名字,我们就叫home。Title是页面的标题,Name是那个咱们页面的名称,下面就是页面的这个地址,注意我们必须要使用这个were这个协议啊,然后后面就写这个组接的这个完整路径就好了,是pages下面的home下面的industry s tml。
06:12
好了,接下来我们需要继续写几遍啊。来第二个呢,是叫购物车。Shopcuts。然后下面这里我们就叫CAS这个地址。注意不要写错了啊,下一个是我的。加麦。好,还需要一个,所以我再复制一份,那么这文件是不能有多余的逗号的,所以大家不要在后面加逗号了。我的话呢,最后一个是叫订单,虽然我们最终是订单列表,但是我写还是写订单。注意是old,这个不要写错了。接下来呢,下面这里就是要放,我们到底要生成几个图标,一定要和上面的页面一一对应,所以还是首页。
07:08
图标的话呢,就是image目录下面的tab。把下面的home点偏距。再看后面的偏缀,好下面这个icon pass和这个斯拉的icon pass呢,我们都要给大家再介绍啊,包括上面这些内容,待会我们来分别介绍一下,现在来介绍一下吧,Ta呢,就是设置的是我们这个ta下面这个导航栏的一个设置,它其中呢有两项内容frames,就是对应的导航栏打开的页面。例子是对应的导航栏,它对应的下面的四个图标对吧?那么页面和图标必须要一一对应是不是好,那么页面的话呢,我们在这就可以进行相应的,呃,这个设置啊,Title的页面的标题name就是页面的这个名字啊,它在这里没有什么用啊,URL的话呢,是对应的这个页面的这个地址。
08:02
绿色的是图标,Test是图标下面的名称,Icon pass是图标的名字,Select icon pass是图标这个选中图标的这个路径。所以我们这个图标呢,没有选中和选中它是两个效果。来选中图标的这个图片呢,它这里写的很清楚,就是下面加一个selected啊selected好了,我们把这个呢复制复制几分。最后少一个逗号啊,接下来我们格式化一下。OK,下面这个呢,我们是叫购物车。Shortcut。再接着我们是叫。呃,我的。交易呢是叫订单。
09:03
好了,那么我们就配置好了这个文件啊,配置好了这个配置文件,同时呢,我们也创建好了相应的四个组件,到这就结束了吗?还没有,因为我们需要告诉他,整个应用需要通过这个APP上面的配置进行启动,它才会生成这个相应的temp,所以我们还需要在这个con channel中,在这里指定这个启动页的配置。我们需要把它改成咱们的这个WGT啊VJS,咱们的APP通过这个。去启动咱们整个项目,这样才能达到我们想要的效果。是这样的啊,啊在官网上面说呢,它是说啊需要将configu channel中的content设置成这个路径,其实当我们去设置了启动页的时候啊,打开源文件,它在这里面就会设置这个C的属性为我们这个APP的值。所以我们可以借助图形化界面,能够快速的完成,就不需要去改原文件了。
10:03
好,到此呢,我们就把整个功能写的差不多了,下面我们就会去打开项目验证看效果。好,如果你点击这个预览的话呢,这里我们暂时是看不到效果的,我们必须要真机的去调试,因为我们开发的是APP端。好了,那么我们整体调试的话呢,在这里啊,我已经提前。对吧,打开了一个S助手,方便大家看到我们整个过程。我们需要提前下载一个APP来帮助我们征集调试,首先点击这个征集调试的这个内容,通过WiFi去扫描我们打开APP啊。在这里呢,点击这个扫描WiFi的这个扫一扫,有时候它会出现一些加载中,没关系啊,像刚刚这里出现的加载中呢,我们点击这个绿色的小图标,再点击扫一扫啊,点击扫一扫,扫描这个二维码。好,扫描完二维码之后呢,再次点击这个真机测试啊,选择相应的这个内容,诶,那么我们在右手边就能看到它就出来了,诶这个就出来了啊下面就是图标,选中图标是个绿色,没有选中是灰色,点击购物车点击我的,包括这个页面你看也在切换。
11:17
默认呢,它会跳转到首页啊,默跳到首页,OK,咱们就完成了这项内容,这个内容呢,还差那么一点点,还差那么一丢丢,就是这个文字呢,它没有高调,文字都一直都是灰色的,不太好看啊,文字高调怎么办呢?我们往下走。下面会告诉你啊,这个open tapout相关的参数的详细的内容,而我们要看的是这个tap。对吧,呃,Tab对ta呢,它这里面有一个叫selected color啊,这里来看啊,就是标签栏这个选中的时候文字的颜色,所以我们可以设置这个C的color。
12:00
注意不要设置Jason文件,一定要用双引号C,它呢是那个我们的一个主题色是00CC99啊这样的一个主题色,一旦设置上去之后呢,我们再来看啊。对吧,大家看选中的时候,这个文字的颜色就是相应的这个绿色的。好了,到这里呢,我们就完成了这个底部导航的一个设置,借助的是API对象的一个open table layout的这个方法来去完成的这个咱们的一个下面的一个tab的一个导航栏的一个设置。那么将来如果你需要navigation bar的话呢,也可以用这个方法去设置navigation大的相关内容,那么在这个文档中都有相应的详细介绍。
我来说两句