00:00
好的,我们继续啊,那再给大家讲完这个如何用啊,我们这个平时的IDE呢,去开发小程序啊,那么接下来的课程呢,我就选择用这个web去。好,那呃,我们接下来的模式呢,就是我用web去写代码,然后呢,用这个微信的开发者工具呢,我们去看呃效果对吧?好,那这是这个啊,那再来来到我们的web里面。打开我们的页面结构,那我们写完图的话呢,我们可以继续往下写。对吧?啊,那下边对应的内容啊是什么呢?来大家可以看一眼,是这个板块,那么这个板块呢,是五个图标啊,对应的一个列表区域啊,对应的是一个导航区域,所以呢,我在这儿呢,给大家加一个标识啊,那这个呢是啊五个图标导航区域。然后呢,我们这儿来一个navy container。嗯,OK,那里边的每一项呢,就NAV item。
01:03
然后呢,它的每一项大家看一下啊,是上边有一个图标,下边是一个文本,那么这个图标呢,最终呢,我们是用icon fo啊去写啊,因为这个呢也在小程序里边呢,也经常用啊,所以呢,我就给大家设计进来了,OK呃,那既然呢呃要用呢,我们去在text。同时那下边的呢,啊,我们就写一下这个是每日推荐。好的啊,那这是这一个啊,这是这一个,那现在呢,我们去复制地方2345啊,一共是五个啊,那之后的这个名字呢,歌单排行榜电台还有直播啊来我们改一下啊,那这个呢是歌单。嗯,排行榜。
02:00
来把这个也改一下啊,那这个呢是电台,那最后一个呢是直播。好的,那现在呢,来到我们的项目啊,我们先来看啊,对应的文本内容是不是进来了没有问题,那接下来呢,我们去写一下它对应的样式啊,来来到这一侧,嗯,往下,那下边这儿呢,我们要写的是五个图标啊,导航区域的样式啊。当然也要养成这个习惯,规范一点,就是说你每一个板块的结构跟你的样式应该是对应的,并且呢,应该是加一个注释,那这样做的好处是你的结构分明,然后呢,后期维护的话也方便啊,也方便好了。首先啊,这五个5U现在呢,它是纵向排列对吧?呃,是纵向排列,而我们想要的呢,是水平排列,所以呢,接下来我们要做的第一步是什么呢?那就是找到我们这个navy container啊,就是它的包裹器对吧?那上来呢,应该是display啊,Fla一下,让它呢水平排列,来我们看一眼。
03:07
OK,没有问题,那现在是水平排列了啊,然后你要注意啊,这个text的测试的文本呢,跟我们后面这个每日推荐它呢,应该是上下布局。而现在在一行呢,是因为它里边大家看这意思,这都是text,也是内联元素,是不是在一行的呀。那如何让他们纵向布局?也比较简单,对不对,那首先我们找到我们的na吗?就是它。两个文本的包裹器,那你要注意啊,我们的f flagx可以嵌套,所以呢在他这儿呢,我也可以写一个face play flex,那这一版呢,因为是纵向布局,所以呢Lex select应该是column,并且呢,我们想让它的文本水平居中,以及center呗,然后呢,我们把它的宽度也写一下啊,因为一共是五个,所以呢评分完以后呢,应该是2%十来,这个时候大家再看。
04:06
哎,就成这样了,没问题,那这个对应的样式呢,我们写的差不多了,以后呢,我们去找一下我们的iconone图标啊,那这里呢,我们需要用到这个阿里的icon。来访问一下他。那这个icon这一块呢,首先比较简单,大家看这有很多的图标库啊,你比如你可以去搜啊,那这儿呢,有很多的图标啊,然后呢,你也可以去搜索,比如说我搜个评论。啊搜这个那对应的都是评论的对吧?哎,你觉得哪一个你要用你可以干嘛呢?你你看下边这呢,提供那个下载,但是大家想想看啊,我们一个项目里面不应该是只用到一个图标啊,这种几率很少。如果只有一个图标的话,我们就用用什么呢?用小图片代替了,那肯定是有很多个图标,所以呢,这个时候呢,我们可以先点击天涯至购物车。
05:03
这个时候呢,大家看啊,右上角这儿呢,就有一个对吧,购物车里面有一个商品一样,你可以再点击再添加一个,这里有两。有两个的话呢,我点击过来注意,呃,这儿呢,你可以直接去下载,也可以添加这项目。所谓的项目呢,就是我们最好是在当前的网站里面创建一个我们自己的项目去统一管理的图标,诶建议呢,大家使用上边这一种方式,你看啊,我点击添加至项目,那么这一侧呢,是我已有的项目列表,如果大家没有的话呢,你可以点击添加在这里呢啊去新创建一个,然后呢,它就会加入到对应的项目啊,比如说我这儿呢,来一个啊TEST3吧,我点击一个确定。那这个时候呢,大家看啊,这多了一个TEST3啊,那说明了之前有个TEST3啊,你看有俩。OK,那这是这个。
06:01
那呃,我们项,我们这个项目呢,我用的是这个啊叫硅谷银月,那这个时候呢,大家看啊,这里面的图标呢,是我提前加进来的1000。而我们接下来要用的就是当前这个项目下面的图标。那你要注意啊,我们的iconone使用形式呢,有三种啊,Unicode phone以及symbol。那么最好用的啊,最利好用我们前端的呢,其实是for class,就是用类的形式去使用的I克风。所以呢,需要大家点中中间这个啊,注意啊,这三个是可以切换的,你需要点住中间的phone。然后你会发现每一个图标上面呢,都有一个class类,那这个呢,相当于就是当前图标的标识啊,也是我们使用的时候哎,唯一的凭证。好的,那选中了它以后呢,这里我要说一点啊,在我们H5的项目,比如说view或者RA里边,那我们要用它呢,最好的方式呢,是直接用这个在线的链接。
07:07
嗯,因为在线的链接呢,有两点好处,第一点。你通过另一个标签直接引入就能使用,那么第二点,如果说我们的项目后期添加了新的图标,它会啊,你你看大家点击这儿,呃,比如说我这儿又多了一个图标,那我们去更新一下这个链接就好了啊来我们玩一个啊玩一个。哎,比如说我这儿随便搜一个吧,我这儿呢搜一个美女,嗯,走啊,那性感红虫是吧,那把这个呢,加到我们的购物车,然后我添加至咱们,呃,后退一下,添加至咱们已有的硅谷营业这个项目走。那这个时候大家看啊,这呢会给你一个提示啊,下方新IQ来袭,点击更新代码。比较简单的是你点击。它会自动生成一个新的链接,那这样做呢,如果说啊有更新的话,我们只需要把新的链接啊复制一份,然后把你项目之前的链接换掉就好了,其他的什么都不需要做,这是它的方便之处。
08:14
那么在我们小程序里边呢,没有办法直接引入啊,直接引入它是会报错的,因为这个后缀点CSS的文件,我们小程序里边不识,识别不了,我们小程序里面呢,是识别什么微信SS。所以我们可以怎么做呢?大家看啊,我呢复制一下这个链接,在我们的URL里面打开它,你看啊,这就是当前这个地址呢,为我们提供的这个啊字体图标库。那对应的呢,就叫icon。那现在我访问这个地址呢,能够看到这些源码啊,所以呢,我ctrl a ctrl c呢,我复制一份啊,然后大家看着啊,来到我们下面的sta下面,我呢在这里。再新建个文件夹啊,我就叫它什么呀,IPhone。
09:04
同时在它的下面呢,我去新建一个文件啊,就叫icon,点微信SS。注意啊,后缀呢是微信SS,然后呢,把我们刚刚复制的这一堆啊,自己图标的东西呢,拉过来就好了。那现在呢,相当于是我们把这个IO内容是不是转化到本地了呀。那紧接着我们可以怎么做呢?啊,你项目里面在哪用,你就可以引入这个文件使用就好。那其实按照场景来说,我们现在是不是应该在我们这个。主页用的在这儿引,但是大家要注意啊,那除了主页其他的页面呢也要使用,所以这一次我引入呢,我选择在全局引入。哎,在全局引入。那这呢,引入的方式啊。用到是at import,那这个呢,跟我们呃,像你比如说那个status啊,或者less呢,是一样的啊用at import去引,那这样呢,我去找一下这个路径啊,这个时候大家看用我们自己的IDE开发工具呢,它就有对应的什么呀啊这个提示。
10:12
好的,引入了以后呢,同时我们把另外一件事干了,这个呢,我们讲过了,那就是啊,这个默认标签的高度呢,给它设成100%。好,引入了以后啊,我们就可以在我们的这个页面中使用了,比如说第一个,那这个文本呢,我们就不能要了啊,我们要用字体图标代替,首先默认的字体图标库呢是icon。然后你要用水,你就去找它对应的类啊,比如说我们现在要找这个每日推荐,那么对应的呢,应该是哪个是这个。是不是吗?每日推荐,所以呢,我移上去啊,去复制一下,点击这个复制代码,复制一下它的class,然后呢,我们放到这里。放到这里C就好了。
11:00
那剩下的啊,用完了啊,一模一样啊,所以呢,我先把那个呢粘过来啊,把我们之前的测试全部给它换掉,然后呢,我们再去把对应的class类哎,给它换成不一样的就OK了,那么第二个歌单啊,我们看一下啊,对应的是这个有音符的啊,所以呢,来过来,呃,我们去找一下,那么对应的应该是这个复制一份。嗯,然后呢,把这个换掉第三个排行榜。呃,排行榜呢,有很多啊,有很多,那我们用这个吧,我就随便添加了几个啊,添加了几个来,呃,排行榜换掉,然后电台跟直播啊,呃,电台是这个呗。来复制一份拎过来啊,最后一个啊直播,呃,直播我们找一下,直播的话呢,下边这有两个啊,用哪个都行,我先复制一个吧。来把这个呢丢过来好的,那现在呢,我们五个啊字体图标呢全部更换完毕,然后呢,打开我们的项目,咱们看一下,诶你看对应的图标有了。
12:06
那图标有有了以后呢,接下来就剩什么了,我们要去写样式啊,那这个时候打卡我移上去看我移上去诶,我们看一下它的宽高。就这个呗,刚才呢,显示的宽高是多少呢?50乘以50对不对啊,没有问题,所以呢,我们去通过这个icon呢,去设一下它的class类来过来。呃,在这里啊,我们继续往下icon point,首先呢,它的宽高呢,应是应该是啊100RPS对吧,高的话呢,也是同时呢,它是个圆的,所以呢啊圆角呢是50%没有问题,那这样的话呢,Tax line。嗯,哎,Center水平居中行高的话呢,100那就垂直居中呗,啊并且呢,这来一个背景颜色啊,那这个背景颜色的话呢,我们去取一下它原来这个颜色。
13:00
这个呢,稍微会亮一点,好看一点,嗯,那对应的icon呢,我去找一下这边颜色啊,是我之前用这个RTB,呃,去设置一个颜色。嗯,没有问题,来就到这呗。嗯,是这个。嗯,保存一下吧,呃,还有个什么字体字体啊,字体得大一些。52PX咱们看一下咱的。长这样呗。好的,那现在不一样的,其实是这个字啊,应该是白色的,黑的太丑了,而且呢,这个图标上下的边距呢,挨的太近啊,所以呢,接下来我们还需要去设一下这个color应该是白色,然后呢,来一个啊,比如上下20左右为零就差不多了。再看。嗯,哎,其实跟我写好那个就一样啊,那下边这个字呢,其实有点大啊,有点大,那这个时候大家看啊,我们下边这个结构呢,就是一个text。对不对,那现在呢,我不想去通过class去控制它了啊,我能不能这样看着我呢,NAV iem下边的text啊,我设一下它的字体啊,比如说。
14:10
哎,我们来一个26吧,2PX。来,我现在还没有切换过去啊,我问大家一个问题,你看呢,我通过na item去找下边的text,你要注意它其实可以找到脸,一个是自己投标的,一个是它。那我们上面这个字体图标呢,我这儿写了一个50了,那现在呢,我又把字体降下来,请问对上面这个text有没有影响?想想。哎,没有对吧,啊,为什么呢?因为权重的问题,那下边这个咱们是不是用的class类的呃形式去控制样式啊,而下边呢,是用的标签选择性,那class类的权重要比它高啊,要比它高好的,那现在呢,我们再来看啊,你看这个字它就降下来了。OK,那这一节课呢,我们重点是去,诶稍等啊,那上边这个字好像有点不对劲吧。
15:01
嗯,上面的字好像跟着写了。来,呃,HM下边的text,那现在啊。现在为什么降下来,你看我这儿是不是前面用了na h嘛,所以啊,我这儿也给它加一个,那这个时候大家再看。是不是上来了,那刚才呢,我们说到这个权重呢,是你看如果说我就用它的话啊,那class内十,那这儿呢,假如说这是十,那这是一,那就加起来11了,所以我们上面这呢,也给它把这个na HM的class类一加,那最后一算它的权重是不是要比他们高。OK,那这是这个啊,哎,发现问题没有问题啊,没有关系啊,我们能及时的去解决这个问题就好了。好的,那这是这个,那这节课呢,我们重点呢,是去给大家说一下啊,在我们小程序里面如何去使用icon,就是阿里矢量图标库,好的,那这节课呢,我们先讲到这里。
我来说两句