00:00
哈喽,小伙伴们大家好,嗯,这个嗡嗡嗡的声音啊,依旧是电脑的轰鸣声,充斥着我们的机体。呃,让在座的各位美女帅哥们。充充满热些来学这门课啊,嗯,今天我们来那个动手开发前端页面,我们也不讲一些那些理论什么的,我们就来做。我们这里啊,已经创建好了一个项目哈,叫project,就是默认默认模板哈,我们怎么创建呢?我们之前已经讲过了,在这里给大家再讲一下,点开这个文件新建。酵母。用APP,然后在这里写一个项目名称,呃,这我our project,这是我们的项目和大家一起写的,嗯,你们怎么命名都可以,就默认模板就可以了,然后就创建,创建好之后就是这样这个样子了。嗯,在开始写这个项目之前,先给大家介绍几个东西。
01:04
第一个就是官方文档,那就是非常重要的东西。嗯,你有一些不懂的东西都可以在这边查到的,比如说怎么配置项目啊,然后这些项目文件是用来干啥的,还有还有它的一些组件啊,嗯,一些一些接口啊什么的。还有就是。另外一个图标库。叫阿里巴巴矢量图,就是大家在百度上搜阿里矢量图就可以搜到这个东西,还有一个就是低壳的插件市场。这个里面有丰富的东西可以看到吧,就是别人写好的一些组件啊,你都可以拿来用就省事了,对吧。嗯。在开始写之前,还有一个事儿啊,就是啊。大家说怎么这么这么这么就是,但是这一个非常重要的就是安装一个模拟器,这里我用的是逍遥模拟器,大家在百度上就可以搜索一下下载。
02:00
呃,运行好之后呢,还有一个配置就是在这里哈。有个工具设置。运行配置里面有一个。安卓模拟器端口逍遥安卓模拟器的端口是21503,如果你用的是别的那个模拟器,你可以在网上搜一下它的默认端口,或者你可以改一下它的端口。我们继续讲。大家看到这个,看到现在这个样子,我们先把这个项目跑起来,我们点运行。运行运行到这个。啊,对。一想到。看可以看到了吧,这是我们的模拟器的。把运行一下。先开始它编译产生的,产生的包,这个是不用管,大家不用理会。如果你是运营到微信小程序,它这里面也会有微信小程序的目录的。
03:00
看,这就这就是我们的。项目已经跑起来了,是就一个东西,这是官方的那个模板。首先呢。我们再加几个项目。至于那个。别的我们已经在这个准备过程中已经讲过了,你像安安装呀,这大家都知道了,所以我们就不再讲了。我们直接来开发,我们先新建一个页面,新建页面怎么新建呢。选中这个项目或者这块都可以新建页面,我们建一个我的页面叫man。建好了可以大家大家可以看一下,他这个在杰son里面,它已经给你自动加上这个了,你在这里加一个名字叫。我的这个这个东西就是是否开启下拉刷新,开启的话你就可以下拉刷新了。我们把这uip改成数列。
04:04
这个时候我们已经有两个页面了,但是还是不够的,我们再加再加一个测试用,因为这两个页面是我们的底部选项卡所需要的,我们再加一个测试页面啊,就是新建一个。Text。我们创建。嗯,他你看这个时候也加好了对吧。我们改一下名字,改的名字叫什么呢,改成。改成测试用例。保存CTRLSCTRLS会那个保存,保存之后呢,它这个是热编译,就是你文件有改变,它就会给你再重新编译嘛。我们来写那个。底部选项卡,底部选项卡怎么写呢?我们在这个框架里面,官方的框架里面可以找到这个。
05:03
Table table就是。看到也的解释,其实就是底下都会写下来大家就知道了。我们拉到底下,你看它有个用力,直接给它复制下来就可以了,复制下来就改成我们自己的,至于颜色什么的,慢慢调就是了,懒得写这么长代码对吧。然后你看这个,这是这是字体颜色啊,选中啊啥什么选中颜色呀,选选中的字体颜色啥的,这些都嗯背景颜色呀,在这个学过H5的大家应该都知道。嗯,我们来找几个图片用,嗯,毕竟。选项卡底下如果只是文字的话,没那么好看,我们在这里搜在安例十张图,当然你建的时候是这样的,我们先搜索。首页。然后你需要下下两个。就是找一个图片,就是点击下载下一个这个颜色,还有一个这个颜色我都下载好。
06:04
咱俩走一遍。这是第一个,就下载这个颜色的第二个。因为你选动的时候要变,要使这个使这个鲜艳的,这叫什么要。橙色。未选中的时候肯定是灰色的,所以我们需要两个图片,这也是在这里规定的,你看一个是没有选中,一个选中的图片。好,这里我们下一下。我们是两个嘛,两个页面,一个是首页,一个是我的页面,那就再下一个我的找个头像,哎,这个挺好看的,对吧,那就给他下下来。片子。然后同样的下一个灰色的。这里我们已经下了四个图片。我们选中我们这四个图片给它复制一下啊,复制之后。在这个目录下新建一个目录,叫image。
07:07
把这四张图片粘进来,我们要改一下那个名字,名字我们改一下名字,这个是我的是选中的对吧,那我们就改成。那这个肯定是没选中的了,我们也改一下名字叫no那。首页的话,选中是它,那就改成嗯,No,那就改成home。那没选中的话,那肯定是no。对吧。恩,配置好这些之后,我们就在这个。里面,然后来改一下。这个是页面的路径,页面路径肯定是。NDND上面也有的。在这个地方是有是有写的,然后你也可以在这里看。我们来配置一下它这个图片啊,这个是。
08:01
没有被选中的,那我们肯定写成no对吧,No home,那这个是选中的,那肯定是。因为刚才我们命名是这样命名的嘛,啊,同样这个。第二块我们先把这个名字改一下,这个是首页对吧,首页这个是我的。我的我的,我的错没有改。人家造成迷糊了。然后我们写一下这个页面这个路径啊什么对吧。然后同样这个图片第一个是没有被选中的,那就弄曼对吧。那这个肯定就是慢了,对吧。好,CTRLS保存一下,我们来看一下效果。看已经已经出现了吧,看到了吧,大家可以切换试一下,看首页我的。啊,我们继续讲啊,有点感冒了,最近河南那边天太冷了,我现在还开着空调呢,给我冻傻了都快。
09:05
嗯,我们来讲一下这个页面跳转哈。页面跳转,看官方文档,保证你不会后悔。点这个路由页面跳转那个我文不好就。这些东西你们都可以试着尝试一下,这里我们就就只讲跳转和传参。好了,我们先把它全部关掉。我们打开,我们从主页跳转,主页跳转,那就打开这个,嗯,首页。对比这个项目看一下,首先就它哈,我们给这个图这个logo加一个点击事件。点击世界,我们要go text,我们要去用用例那里text在里面注册一下这个世件。
10:02
Go。然后。根据文档哈,我们看文档它是用i.negative to object,你看它这里是有事例的,就是传参啊事例啊。都这就是传单的事例哈,都我给大家讲,然后接收参数啊什么,大家都可以看一下文档是非常有用的。就包括你学完一个新语言,比如说你学完Python之后,也最好看一下它的文档,虽然都是英文吧,但是真的是很有用的。好,我们来用。我们刚才。说到这个对吧,卡它里边都有有代码机型的。我们需要跳转URL。我们需要跳转到T对吧,然后我们先不传三,先看一下是什么效果啊。点一下看我们进测试用力了的对吧,我们测试用力就他对吧?嗯。
11:04
好了,我们。太单调了,也看不到什么东西。我们把这个。地方给它加一个test数据,让我们来展示一下我们传的参数。我们在这里注册,注册一个数据。叫name。这这这里是绑定,这里是绑定哈,然后。数据是没,现在是还没有用的,我们先来接受一下参数,看看他他传过来的东西到底是什么。我们在这里给他传参,就像我们那个请求网络,网络请求的时候传单一样问号。我传一个name叫。哈士奇。我是代码哈士奇好。我们来这个保存一下,在这个天使view里面接受一下,官方给出的说法是露的,对吧,他有说。
12:01
他又说这个no的里面,那就那我们就得用lo的。Ano的。我们来接一下,这个叫。啊,不是,我们打印看一下它到底是个什么,何方妖孽?Opa写外边op以前。好了。啊。他这里是默认在我们刚才看的那个测试用的页面,所以传的是空的,我们先返回一下,然后点一下这个图标看,我们传递了一个东西叫name。哈士奇这几个对象,我们来取出这个对象的内幕属性。打印一下内部属性。我们已经看到看到这个这个属性了,对吧,好,我们把这个属性。
13:05
复制给这个name。这是就是VE的写法,它和VE的写法是一样,它就是基于vuee的嘛,对吧。我们来看一下效果如何。好。等待是一个漫长的过程,我等着啊,还没还没卸啊,看车已经看出来了,哈士奇你看对吧?我们在这里面是没有写任何数据的,但是他就是传过来了,那没办法,人家就传,他就传咱就接嘛,嗯,一文传餐。到这里就到这里就完成了,还有就是再给大家拓展几个小小玩意儿,非常好玩的,你们一定会喜欢的。那就是我们在这个page介词里面打开一个找到这个东西,找到我的看到了吧,把这个fields改成出。
14:06
这个就是是否开启这个下拉刷新,我们开启刷新一下,看看它是什么样子的。哎。好慢好吧,然后我们在这个我的里面看一下,看我们可以下拉刷新了。看到了吧,然后嗯,他一直转圈转圈转个没完没了,那怎么办呢?我们来找这个官方文档,还是官方文档在这个界面里面。有个交互反馈。The。有个下拉刷新看到了吧,下在下拉刷新里面说错了。这个refresh就是看看它定义的监听用户的下拉刷新事件。然后停止当选页,苗侠传奇的stop refresh。
15:04
So po long refresh。我们我们我们怎么用呢。首先,我们。刷新的时候是触发了一个刷新事件是吧,它这里是监听,监听用户的下拉事件,那我们肯定要用它对吧。看他也这样说到了,在这个page杰森里面找到这个节点,找到节点。就是他,然后把这个开启。处理完数据之后,用用I stop down refresh可以停止当前页面的下刷新,那我来试一下啊。我们让它刷新三秒钟,就它就让它停止,我们找到这个慢。他这里说的是什么呀,是。to.po那肯定是监听的是on。
16:01
是吧?按down,减轻用户下压动作。然后我们让他停止。三秒钟后停止set time out。I'm out。处理什么呢?恩,三秒钟,两秒钟吧,三秒有点多。你好。打印不是打印停止,这写UN stop。So po。啊,报错了。帮我看一下哈。I pull down refresh。
17:01
他报了什么错呀?哦,这个一定要注意标点符号,每一块里边都要加一个逗号。好了。其实我也没有底气了,这应该是我录的第二个视频,来给大家讲东西。好快呀,一刷新就没了,那么让他检验一下他到底刷新没有啊,我们等会打印个东西。坎坷。Diallo。我是狗。啊。你看在这里出发了,就是我们,我们接听到这个时间了。这节课我们先讲到这里,还有就是给大家看一下我们的项目最终成型是什么样子的。
18:16
我这个已经部署到四个端了,但是那个还在审核中。好,我们先。我们来看一下。微信开发者工具。哎,我们来跑一下。稍等稍跑一下看看。他就是这个样子的。
19:00
然后在识别历史里面,这是我做的测试,然后清除历史啊这个。很容易的,这个页面,这个程序大概花了三个小时。就通过我给大家教这个教程视频,大家也能做出来,这是一个非常简单的东西。嗯,就这节课就讲到这里吧。谢谢大家的观看。还有就是。说一点就是。在开发的过程中,我们一定要就是多学习。就是以前你不的东西啊,一般各方面也都有讲的,你不要去网上搜啊,怎么实现怎么实现,先看文档,文档没有你再去搜怎么实现。搜完之后就要写博客来记录一下你今天做了什么东西,然后比如说你看我们。刚才没来得及写,主要给大家讲了。嗯,也可以,大家可以申请一个CSDN的博客,我们一起来学习嘛,一起开发都快乐吧。
20:00
对吧。双倍快乐,好吧。结束了。
我来说两句