uniapp开发小程序/移动app---Two---页面布局以及页面跳转原创

哈喽，小伙伴们大家好，嗯，这个嗡嗡嗡的声音啊，依旧是电脑的轰鸣声，充斥着我们的机体。呃，让在座的各位美女帅哥们。充充满热些来学这门课啊，嗯，今天我们来那个动手开发前端页面，我们也不讲一些那些理论什么的，我们就来做。我们这里啊，已经创建好了一个项目哈，叫project，就是默认默认模板哈，我们怎么创建呢？我们之前已经讲过了，在这里给大家再讲一下，点开这个文件新建。酵母。用APP，然后在这里写一个项目名称，呃，这我our project，这是我们的项目和大家一起写的，嗯，你们怎么命名都可以，就默认模板就可以了，然后就创建，创建好之后就是这样这个样子了。嗯，在开始写这个项目之前，先给大家介绍几个东西。

第一个就是官方文档，那就是非常重要的东西。嗯，你有一些不懂的东西都可以在这边查到的，比如说怎么配置项目啊，然后这些项目文件是用来干啥的，还有还有它的一些组件啊，嗯，一些一些接口啊什么的。还有就是。另外一个图标库。叫阿里巴巴矢量图，就是大家在百度上搜阿里矢量图就可以搜到这个东西，还有一个就是低壳的插件市场。这个里面有丰富的东西可以看到吧，就是别人写好的一些组件啊，你都可以拿来用就省事了，对吧。嗯。在开始写之前，还有一个事儿啊，就是啊。大家说怎么这么这么这么就是，但是这一个非常重要的就是安装一个模拟器，这里我用的是逍遥模拟器，大家在百度上就可以搜索一下下载。

呃，运行好之后呢，还有一个配置就是在这里哈。有个工具设置。运行配置里面有一个。安卓模拟器端口逍遥安卓模拟器的端口是21503，如果你用的是别的那个模拟器，你可以在网上搜一下它的默认端口，或者你可以改一下它的端口。我们继续讲。大家看到这个，看到现在这个样子，我们先把这个项目跑起来，我们点运行。运行运行到这个。啊，对。一想到。看可以看到了吧，这是我们的模拟器的。把运行一下。先开始它编译产生的，产生的包，这个是不用管，大家不用理会。如果你是运营到微信小程序，它这里面也会有微信小程序的目录的。

看，这就这就是我们的。项目已经跑起来了，是就一个东西，这是官方的那个模板。首先呢。我们再加几个项目。至于那个。别的我们已经在这个准备过程中已经讲过了，你像安安装呀，这大家都知道了，所以我们就不再讲了。我们直接来开发，我们先新建一个页面，新建页面怎么新建呢。选中这个项目或者这块都可以新建页面，我们建一个我的页面叫man。建好了可以大家大家可以看一下，他这个在杰son里面，它已经给你自动加上这个了，你在这里加一个名字叫。我的这个这个东西就是是否开启下拉刷新，开启的话你就可以下拉刷新了。我们把这uip改成数列。

这个时候我们已经有两个页面了，但是还是不够的，我们再加再加一个测试用，因为这两个页面是我们的底部选项卡所需要的，我们再加一个测试页面啊，就是新建一个。Text。我们创建。嗯，他你看这个时候也加好了对吧。我们改一下名字，改的名字叫什么呢，改成。改成测试用例。保存CTRLSCTRLS会那个保存，保存之后呢，它这个是热编译，就是你文件有改变，它就会给你再重新编译嘛。我们来写那个。底部选项卡，底部选项卡怎么写呢？我们在这个框架里面，官方的框架里面可以找到这个。

Table table就是。看到也的解释，其实就是底下都会写下来大家就知道了。我们拉到底下，你看它有个用力，直接给它复制下来就可以了，复制下来就改成我们自己的，至于颜色什么的，慢慢调就是了，懒得写这么长代码对吧。然后你看这个，这是这是字体颜色啊，选中啊啥什么选中颜色呀，选选中的字体颜色啥的，这些都嗯背景颜色呀，在这个学过H5的大家应该都知道。嗯，我们来找几个图片用，嗯，毕竟。选项卡底下如果只是文字的话，没那么好看，我们在这里搜在安例十张图，当然你建的时候是这样的，我们先搜索。首页。然后你需要下下两个。就是找一个图片，就是点击下载下一个这个颜色，还有一个这个颜色我都下载好。

咱俩走一遍。这是第一个，就下载这个颜色的第二个。因为你选动的时候要变，要使这个使这个鲜艳的，这叫什么要。橙色。未选中的时候肯定是灰色的，所以我们需要两个图片，这也是在这里规定的，你看一个是没有选中，一个选中的图片。好，这里我们下一下。我们是两个嘛，两个页面，一个是首页，一个是我的页面，那就再下一个我的找个头像，哎，这个挺好看的，对吧，那就给他下下来。片子。然后同样的下一个灰色的。这里我们已经下了四个图片。我们选中我们这四个图片给它复制一下啊，复制之后。在这个目录下新建一个目录，叫image。

把这四张图片粘进来，我们要改一下那个名字，名字我们改一下名字，这个是我的是选中的对吧，那我们就改成。那这个肯定是没选中的了，我们也改一下名字叫no那。首页的话，选中是它，那就改成嗯，No，那就改成home。那没选中的话，那肯定是no。对吧。恩，配置好这些之后，我们就在这个。里面，然后来改一下。这个是页面的路径，页面路径肯定是。NDND上面也有的。在这个地方是有是有写的，然后你也可以在这里看。我们来配置一下它这个图片啊，这个是。

没有被选中的，那我们肯定写成no对吧，No home，那这个是选中的，那肯定是。因为刚才我们命名是这样命名的嘛，啊，同样这个。第二块我们先把这个名字改一下，这个是首页对吧，首页这个是我的。我的我的，我的错没有改。人家造成迷糊了。然后我们写一下这个页面这个路径啊什么对吧。然后同样这个图片第一个是没有被选中的，那就弄曼对吧。那这个肯定就是慢了，对吧。好，CTRLS保存一下，我们来看一下效果。看已经已经出现了吧，看到了吧，大家可以切换试一下，看首页我的。啊，我们继续讲啊，有点感冒了，最近河南那边天太冷了，我现在还开着空调呢，给我冻傻了都快。

嗯，我们来讲一下这个页面跳转哈。页面跳转，看官方文档，保证你不会后悔。点这个路由页面跳转那个我文不好就。这些东西你们都可以试着尝试一下，这里我们就就只讲跳转和传参。好了，我们先把它全部关掉。我们打开，我们从主页跳转，主页跳转，那就打开这个，嗯，首页。对比这个项目看一下，首先就它哈，我们给这个图这个logo加一个点击事件。点击世界，我们要go text，我们要去用用例那里text在里面注册一下这个世件。

Go。然后。根据文档哈，我们看文档它是用i.negative to object，你看它这里是有事例的，就是传参啊事例啊。都这就是传单的事例哈，都我给大家讲，然后接收参数啊什么，大家都可以看一下文档是非常有用的。就包括你学完一个新语言，比如说你学完Python之后，也最好看一下它的文档，虽然都是英文吧，但是真的是很有用的。好，我们来用。我们刚才。说到这个对吧，卡它里边都有有代码机型的。我们需要跳转URL。我们需要跳转到T对吧，然后我们先不传三，先看一下是什么效果啊。点一下看我们进测试用力了的对吧，我们测试用力就他对吧？嗯。

好了，我们。太单调了，也看不到什么东西。我们把这个。地方给它加一个test数据，让我们来展示一下我们传的参数。我们在这里注册，注册一个数据。叫name。这这这里是绑定，这里是绑定哈，然后。数据是没，现在是还没有用的，我们先来接受一下参数，看看他他传过来的东西到底是什么。我们在这里给他传参，就像我们那个请求网络，网络请求的时候传单一样问号。我传一个name叫。哈士奇。我是代码哈士奇好。我们来这个保存一下，在这个天使view里面接受一下，官方给出的说法是露的，对吧，他有说。

他又说这个no的里面，那就那我们就得用lo的。Ano的。我们来接一下，这个叫。啊，不是，我们打印看一下它到底是个什么，何方妖孽？Opa写外边op以前。好了。啊。他这里是默认在我们刚才看的那个测试用的页面，所以传的是空的，我们先返回一下，然后点一下这个图标看，我们传递了一个东西叫name。哈士奇这几个对象，我们来取出这个对象的内幕属性。打印一下内部属性。我们已经看到看到这个这个属性了，对吧，好，我们把这个属性。

复制给这个name。这是就是VE的写法，它和VE的写法是一样，它就是基于vuee的嘛，对吧。我们来看一下效果如何。好。等待是一个漫长的过程，我等着啊，还没还没卸啊，看车已经看出来了，哈士奇你看对吧？我们在这里面是没有写任何数据的，但是他就是传过来了，那没办法，人家就传，他就传咱就接嘛，嗯，一文传餐。到这里就到这里就完成了，还有就是再给大家拓展几个小小玩意儿，非常好玩的，你们一定会喜欢的。那就是我们在这个page介词里面打开一个找到这个东西，找到我的看到了吧，把这个fields改成出。

这个就是是否开启这个下拉刷新，我们开启刷新一下，看看它是什么样子的。哎。好慢好吧，然后我们在这个我的里面看一下，看我们可以下拉刷新了。看到了吧，然后嗯，他一直转圈转圈转个没完没了，那怎么办呢？我们来找这个官方文档，还是官方文档在这个界面里面。有个交互反馈。The。有个下拉刷新看到了吧，下在下拉刷新里面说错了。这个refresh就是看看它定义的监听用户的下拉刷新事件。然后停止当选页，苗侠传奇的stop refresh。

So po long refresh。我们我们我们怎么用呢。首先，我们。刷新的时候是触发了一个刷新事件是吧，它这里是监听，监听用户的下拉事件，那我们肯定要用它对吧。看他也这样说到了，在这个page杰森里面找到这个节点，找到节点。就是他，然后把这个开启。处理完数据之后，用用I stop down refresh可以停止当前页面的下刷新，那我来试一下啊。我们让它刷新三秒钟，就它就让它停止，我们找到这个慢。他这里说的是什么呀，是。to.po那肯定是监听的是on。

是吧？按down，减轻用户下压动作。然后我们让他停止。三秒钟后停止set time out。I'm out。处理什么呢？恩，三秒钟，两秒钟吧，三秒有点多。你好。打印不是打印停止，这写UN stop。So po。啊，报错了。帮我看一下哈。I pull down refresh。

他报了什么错呀？哦，这个一定要注意标点符号，每一块里边都要加一个逗号。好了。其实我也没有底气了，这应该是我录的第二个视频，来给大家讲东西。好快呀，一刷新就没了，那么让他检验一下他到底刷新没有啊，我们等会打印个东西。坎坷。Diallo。我是狗。啊。你看在这里出发了，就是我们，我们接听到这个时间了。这节课我们先讲到这里，还有就是给大家看一下我们的项目最终成型是什么样子的。

我这个已经部署到四个端了，但是那个还在审核中。好，我们先。我们来看一下。微信开发者工具。哎，我们来跑一下。稍等稍跑一下看看。他就是这个样子的。

然后在识别历史里面，这是我做的测试，然后清除历史啊这个。很容易的，这个页面，这个程序大概花了三个小时。就通过我给大家教这个教程视频，大家也能做出来，这是一个非常简单的东西。嗯，就这节课就讲到这里吧。谢谢大家的观看。还有就是。说一点就是。在开发的过程中，我们一定要就是多学习。就是以前你不的东西啊，一般各方面也都有讲的，你不要去网上搜啊，怎么实现怎么实现，先看文档，文档没有你再去搜怎么实现。搜完之后就要写博客来记录一下你今天做了什么东西，然后比如说你看我们。刚才没来得及写，主要给大家讲了。嗯，也可以，大家可以申请一个CSDN的博客，我们一起来学习嘛，一起开发都快乐吧。

对吧。双倍快乐，好吧。结束了。