00:00
下面我们要将我们后面的一些东西一点一点的引入进来,包括什么UI组件库啊,路由库啊,大相关的库啊,这三个重要。来,先从最简单开始,这个on mobile这一个库,这是这个库非常有用啊,就由于有了它,我们的界面才会比较简洁,看起来也还行是吧,而且不用写太多样式不。这不你是想要的嘛,对不对,又手写又能出效果不挺好的啊好,首先呢,第一步你要去干嘛呢?下载这个咱用过一下的对不对,咱是用过的,所以说呢,这个应该也不是说特别难的啊,把它关了,把它关掉,把它也关了,关了。下载好,下载它了以后啊,这个过程咱做过了啊,咱再做一遍啊,先因为我们是一个移动端的一个应用,所以需要一个ma,需要一个是吧,找到我们的。
01:08
Index页面把这一个是不是换一下。能懂吧,好,能懂,还有一个我们移动端有一个啊小问题,就是点击什么延迟0.3秒的问题,需要用到一个插件,哎,这个也是大家面试时可以说的啊,其实用起来倒非常简单,就说一下哎,我们公司的项目,移动端的项目怎么样解决点击的延迟,就是用一个库fast click。啊,一句话说明了就知道怎么回事了啊,可能有的同学问老师,他要问我怎么用呢文档对吧?啊,很简单的事情。好在这里面呢,给大家就在直接在这考一下得了啊,就考到这上面,诶在这啊诶少写了一个,少考了一个东西是吧,Script没考是吧。
02:05
他的文档里面就是放在这里,我也放在这个了,好没什么太问题,这个简单的说过啊,不用再去强调了,好继续的往下看啊,继续往下看。下面呢,我们其实啊,就直接用啊,说最终是不是要实现组件的什么按需打包,并且样式我还不想自己对不对,能自动的打包样式,同时。这地方是不是要首先得下载一些工具模块是吧,大家看呢,我这个工具模块是杠杠C-DV,因为我运行的时候需要吗?不需要对吧,所以呢,我们需要用它来去搞一下,好那接着要写一个特别的配置文件。是一个覆盖的配置文件,主要是要说明那个自动引包的那个事情来啊,在根目录下面创建一个JS。
03:11
好,里面的代码也不要大写,因为文档里面写的很清楚啊,其实没有文档,因为这个就是个文档啊,没怕好,接着还有一个事情,修改拍阶层。把你的运行的命令换成另外一个包。本来是别的包的,本来是干script换成这个包,我这个包跟原来的包有什么区别呢?其实非常简单啊,他这个包做的一件事情就先去读这个配置。能懂吧,只有读这个配置你的这些,你的那个自动打包的那个按需打包才能实现呢啊这个前面也是讲过的啊,我们就照着这个做一下,这个是不需要你背的,背的也没什么劲啊好,这个地方需要把这个加一下,这个本来我们刚刚后来加的嘛。
04:07
看了吧,接着把这个上面的这个什么去掉吧。能不能看到好。下面我们就可以来去在应用中简单的用一下。Mobile的一个组件,比如说button。我们这个代码写写啊,很快index来吧,我就渲染一个button啊,Import首先肯定要import,它这是必须要import的,能不懂接着还需要去import,我们一个一个函数叫什么呢。叫render,或者你去mport这个react什么多也可以吧,也可以,好,我们刚才说过了,我们要去引入啊,一个组件从哪里引入啊,On mobile引入一个什么组件,But是吧?那下面事情很简单了,React dom.re渲染谁?Button button是不是可以给个名字,这叫什么呀啊?
05:30
这是什么呀?随便写个吧。好,这里面不知道还记不记得这里面有个什么type,我这里面不就不就不就翻去了啊,有一个叫primary,因为默认是一个灰色的,我希望它是一个,它默认是一个蓝色的吧,啊就这个加primary主色就蓝色啊,一个蓝颜色等我一看就知道啊。后面还有一个参数,谁为什么是root。
06:03
页面中啊,指定的div的ID就什么,因为我要找这个div。没问题吧,没问题啊好,那我们整个代码就写好了,这里面强调的是我有引入样式吗。没有引入它的样式吧,但是我们要看一下最终那个按钮有没有样式对不对?好吧,来,终于到了运行的时刻,到了NPM是吧,此时我们就要看最终启动的页面中啊。是不是有一个按钮,是不是有样式,我们切换到移动端的模式啊。来看一下,如果是,那就说明我们刚才的配置没有任何问题。是可对吧,啊,这说明央视已经有了,要么样式肯定不是这样子,好,那这样的话呢,我们就实现到这里,但是啊,还不够。
07:07
还不够,我们最终啊,最终还要去干嘛呢?我需要将我的主体被颜色从蓝色变为什么呢?绿色,因为上硅谷的这个图标主体是绿色和黄色。对吧,啊,我就想改一下。因为这种事情有可能要做,懂不懂啊,有可能要做啊,这个地方啊,这个地方大家按照我的这个就行,那时候为了去做这个事情,因为文档里面写的不太好啊,最后还花了一点时间,最后才找到一个解决的办法啊,啊这个办法就已经是现成的,你到时候万一你们公司要用。啊,你就照着这个做就行,好说一下是怎么回事啊,那个react就D里面它用的样式是用的nice写的,很懂吧,用的nice写的,所以呢,我们需要去下载什么呢?Nice的no来去对安定里面的有些部分进行重新打包。
08:10
因为我要修改它里面内置的系统里面指定的颜色。本来它默认是蓝色的,我得去改,那得对那个代码进行重新打包才行,所以需要这个nice啊,本来这个没有nice跟没有啊。呃,还有一个这个地方啊。啊,这里面同时要把这个把这个nice也下载下来,后来我还发现一个小事情啊,这都是中间踩过很多坑的啊,这个里面需要去指定这个nice的版本号。如果你不指定版本号用,也就是说默认最新的版本号肯定比这个大,懂吗?我就发现就整好以后就打包出问题啊,这我就不再一个跟大家演示了,因为这个演示了花的时间挺长了。啊,我就直接把它下载下来。
09:02
啊,这里面下载了两个包啊,一个是nice。这个包是去解去将nice转移成什么CSS的关键,Nice这个包本身外派是不是不能理解啊?所以需要有什么nice no的这两个包的作用要搞清楚。前面讲过类似的东西,对不对,好没问题啊来下面呢,我们需要去改一下这个配置,这个配置前面我不做了一个简单配置吗。那个简单配置不够啊,需要去换成这个配置,这个配置呢,里面代码比较多啊,也是在网上在他的这个官方配置里面最后找不到的,但他的写的位置比较隐蔽。我就不一个去找了,来在这个地方啊,关键点在这里。它的内部呢,定义了很多啊,那个颜色给每个颜色呢,这就是用用那个用nice的语法来去定义,定义一个颜色变量的。
10:09
能懂不,相当于我现在给了一个颜色,可以给他什么覆盖掉。懂吗?就本来它是一个蓝色的嘛,这里有两个颜色,为什么有两个颜色。能懂它也是两个颜色。默认没按之前是浅一点对不对?按的时候什么深一点就是两个颜色,而这两个颜色对应的两个面料是这两个面料。懂我的意思,我现在我是不是只用了新的值,最终将它什么覆盖掉?啊,其他的都不用管啊,其他的都不用管,还有一个事情,小事情,一旦用上这个以后,以后我们写样式,我们写样式也需要用nice去写,写nice就相当于用一下nice嘛,我们就不用CSS了,就用直接写nice,没关系,我们一共写的样式的函数不超过30啊。
11:10
好,来,下面我们为了最后来测试啊,如果通过了就说明我们整个。啊,自定义主题这里面有个概念叫自定义主题啊,其实就是修改它系统的一些颜色相关的一些东西,我们来看一下行不行,如果行就O了啊。哎,这个地方自己运行一下MPM是吗?是的。好看一下啊。按时来说是应该没问题的。是不是有一个颜色变化可以吧,可以,那后面我们整个应用的主体颜色就成为了绿色。
12:05
因为我们最终项目不是要一个绿色的一个主体颜色吗。能看到吧,啊行,那这个呢,上午我们就先讲到这里,中午的时候大家可以把这个把做到这里来啊,做到我这一步啊,如果有时间你可以继续往下做,就照着文档做都没问题啊,先参照文档去做,你就下载包啊,都没有问题,如果大家万一你觉得下载,大家一旦都下载包就慢慢怎么办,是吧,我也想好了办法啊,你给他去准备好了一些办法,其实办法很简单。诶,不是这个RA的项目。就这里面有个fields看到了吧,这个files呢,有最终版的依赖文件啊,给它打开,这一个呢,分为客户端的应用和服墙应用,你们就很简单的事情,把这个这个文件解压到你的项目文件夹下面去,这里面包含两个文件啊,应该有两个文件,一个是load-models。
13:08
是所以依赖对吧,同时应该把它也复制过去。懂不懂也就你光有考的这个文件不行,这样不太好。懂吗?因为这里面派介里面是不是有声明呢。还修改了一些配置,懂不懂都用最新的就行。没问题吧,啊没问题,大家把这个给搞一搞啊,这样这一步走完以后,你再也不用下载了,但是你要知道要下载什么东西就行啊。这个没关系,好,那我们这个就先说到这里。
我来说两句