00:01
好的,我们继续啊,那接下来呢,给大家看一下小程序开发需要准备的一些资料,呃,首先第一个啊,那这里呢,给大家贴的是官网的地址,呃,我需要呢,大家去访问一下官网啊,去注册一个小程序的账号,那我们去看一下这个地址来打开我的浏览器。然后呢,把我们的地址贴进来啊,那现在呢,大家看到这个界面呢,就是我们访问呃,小程序这个官方网页的主界面啊,那这里呢,我是已经登录过啊,现在呢,我点击一下切换账号,哎,你们如果说第一次访问的话,看到的应该是这个界面。诶,这里呢,需要输入我们的账号,还有密码啊,大家也看到了我们的账号呢,可以用邮箱微信号或者QQ号去注册。啊,这里呢,我是用邮箱注册的啊呃,如果是还没有这个小程序的账号的话呢,啊,需要大家去注册一下,那这这里这不是有立即注册吗?注册的话呢,也比较简单啊,就是下一步下一步就好了,呃,这个呢,跟我们去注册一个淘宝或者京东的账号它是一样的,并不难。
01:09
好,我这里呢,是用邮箱注册的啊,我给大家登录一下啊,输入完账号密码点击登录啊注意这里呢,需要我们去用微信扫码去确认一下身份,来我这里呢,用我的呃,手机微信扫一下。好,我这边已经确定好了,确认好了以后呢,它会跳转到我们小程序后台开发的主界面。嗯,只要说大家注册完登录进来啊,能够来到这个界面就OK,诶接下来我们需要使用里边的一些东西啊。好呃,我们继续往下看啊,那下面呢,我们说到了这个微信开发工具,那这个呢,是开发我们小程序啊必备的一个工具,呃,必备的一个工具,那对应的这个安装包在哪呢?在我们开发啊工具的IDE文件夹中获取啊这个呢,其实之前给大家说过啊,就是给大家发这个资料里面啊这吧,第一个就是开发工具I第一,那我建议大家呢,去安装这个版本啊,安装这个版本,那这个呢是我经常用的一个版本,它呢相对来说比较稳定。
02:21
然后呢,我也给大家下了一个当前小程序啊呃,官方提供的最新的两个版本啊,你能看到它的图标都不一样了,但是呢,我发现这两个版本呢,还是不太稳定啊,会有问题,就是它的环境呢,会导致我们的项目呢无法启动,或者说启动之后呢会报错,所以呃,建议大家先安装这个啊。安装这个好一点啊,那。啊,我们继续往下,呃,那再往下呢,这儿给大家贴的是这个啊,开发工具的下载地址,我们也可以去访问一下啊,我给它打开。
03:01
啊,在这里呢,你能看到啊,它有很多的版本,那我们下载使用的话,一定是安装的是稳定版。然后大家可以根据自己电脑的这个情况啊,去下载对应的版本就OK了,好以上呢,就是这个开发工具的安装啊,那我们再往下看啊,这里呢,我给大家贴的是注册小程序账号啊,如果说啊,你有账号的话,你登录进来就是看到的就是刚才我们访问的那个页面。没有账号的同学呢,也可以去根据它的提示啊,一直申请账号,下一步下一步。啊,也很简单啊,很简单,好呃,我们再往下看啊。除了大家需要注册一个小程序的啊账号,安装我们微信的开发工具,那么还需要了解一些这个开发小程序啊,需要储备的一些知识。第一个flex布局。小程序呢,特别推荐使用flex布局啊flax布局,那flax布局的话呢。
04:03
使用起来很方便啊,很方便,那之前呢,没有大火的原因呢,是因为啊早期我们说flax它有兼容性的问题。尤其是老版本的IE。那随着这个互联网的发展啊,老版本的IE呢,已经逐步的退出了历史的舞台,所以呢,现在你会发现flex用的越来越多了,而在我们的微信小程序开发当中,首选就是flex布局。啊,因为flax咱们之前接触过很多了啊,在这里呢,我就不去再从零到一去讲了。然后下边这呢,给大家贴了一些这个关于flash的东西啊,你们到时候可以看一下。好,可能有的小伙伴说,诶老师我还没有学习过flex,那怎么办呢?没关系啊,这里呢,我给大家贴了一个关于flex的一个学习地址。对应的网站呢,是菜鸟教程啊,虽然说叫菜鸟教程,但是我看了一下它里边啊,关于这个flax的东西呢,写的比较啊详细一点啊,也好上手,所以说如果有的小伙伴说我不会flash,你可以看一下这里,OK,那这是这个。
05:15
那除了flex呢,我们还需要去掌握移动端相关的一些知识啊,首先呢,我们要理解这三个像素的概念。一个叫物理像素,一个叫设备独立像素,包括我们的CSS像素,那我们先来看第一个啊,什么是物理像素啊,什么是物理像素。物理像素呢,我们有有时候称之为叫屏幕的分辨率。啊,分辨率。我们看到的一个完整的这个图像啊,它其实是由一一个一个小的发光点组成的,而这一个一个能显示光源的小点,它其实就是我们的物理像素点。
06:03
哎,那大家在买一些电子电子产品的时候啊,你比如说电视电脑,包括我们的手机啊,那销售人员呢,一定会给大家介绍一个它里面的参数,就是说诶我们这个设备呃,分辨率多高多高,那其实它是想表达什么意思呢?就是说当你设备的分辨率越高,意味着你屏幕越清晰。为什么这样呢?你想啊,同一个屏幕上。分辨率越高,意味着物理像素点的个数越多啊,物理像素点的个数越多,那它本身这个像素点呢,越小越精致啊,呈呈现出来的图像呢,越清晰,那这是这个,而且物理像素点个数呢,而物理像素呢,它是真实存在的像素。为什么要强调这个呢?因为设备独立像素和我们的CSS像素,它俩呢,是虚拟像素啊,是虚拟像素,那CSS像素呢,我们已经很清楚了啊,就是我们平时用的什么呀,PX。
07:09
对吧,那什么是设备独立像素呢?来呃,我给大家打开这个网页啊,在这个里面呢,我去来到我们的移动的,其实很简单,你打开你的控制台,哎,点击这一侧这个选项呢,它就会切换到移动的,那我我们通常默认使用的机型呢,是F6,那F6。在这里啊,说一个点,那假如说大家没有接触过前端开发,嗯,那当别人问你,哎,你这个手机多大了呀,那我们可能会跟他说啊,我们这个是多大多大,比如说4.7呀。5.5呀,或者是5.0呀,那这个。对应的是我们手机屏幕斜对角的对吧,长度,而他们的单位对应的是英寸啊呃,这是没有接触过开发的人去关注的一个事情,就是我的手机屏幕大或者小,而我们在前端开发里面,当别人去问大家,哎,你这个屏幕多大,那这个时候呢,我们再说这个啊,就有点门外汉的意思了。
08:17
啊,这个时候呢,它通常想问的就是设备独立像素啊,我们可以告诉他以ONE6啊为标准啊六的。物理像素啊,设备独立像素呢,是375乘以667,那这个呢,分别指的是它宽和高对应的单位是什么?还是P叉,注意啊,是这个单位,嗯。那这个值在不同的机型上它是不一样的,比如说我切换到IPHONE678PLUS,这个时候大家能看到啊,设备独立像素呢,就是414乘以736。啊是这个啊是这个好,呃,我切换到F678啊来我们回到我们的课件再说那。
09:03
设备独立像素我们知道了来,那为什么把它俩放到一起呢?那是因为在绝大多数的场景呢,我们的设备独立像素和我们的CSS像素是互相可以转换的啊,可以转换的。就相当于是对等。好呃,这三个概念大家要很清楚啊,那接下来呢,还有一个比较重要的呢,是我们的D篇。什么是DP呢?啊,我们通常称之为啊设备像素比啊,在下面这其实有给大家列出来。那什么是设备像素比呢啊,它其实指的是物理像素比上我们的设备独立像素计算出来的,哎,就是我们的DPR。好,那现在呢,以FO6的为例啊,那DPR是多少呢?是二,那这样的话大家算一下啊,你看。我们F6的设备独立像素是375乘以667对吧?而我们的DPR是多少呢?是二,所以我们是不是能够推出来它的物理像素,那就是在原有基础上再乘以二啊,对应的结果呢,就是750乘以多少呢?1334,这个呢,就是FONE6的物理向数点个数,同时呢,也是它的分辨率。
10:23
啊,DPI呢比较重要,大家一定要掌握了,而下边这个PPI还有DPI,那作为一个扩展给大家列出来啊,啊像什么这个屏幕上的像素点个数呀,或者说是个打印机的墨点数呀,啊这两个参数。啊,咱们用的不是太多啊,做一个扩展,下面呢,我也给大家截了一些这个不同机型的一些参数啊,参数的对比,哎呃,感兴趣的同学呢,你下来也可以把这个看一下,包括下面这些内容,这里呢,我们就不专门去讲它了。好,再往下看啊,还有一个比较重要的叫移动端的适配方案,呃适配方案,那么这个适配方案呢,不管说是在我们前端开发还是在面试的时候,都是一个比较重要的地啊,比较重要的点那一动呢,常用的设备方案,这里呢,我给大家啊列了两种,一种呢叫viewpointd适配,还有一种呢叫rem适配,那么这两个适配呢,其实我们之前都学过。
11:25
对吧,好,那哎怎么去实现viewpoint的视频呢?啊,实现的话很简单啊,我们需要用到这一个标签就好了,来我给它放大一些放到这。用到的呢是Meta标签啊,Name呢叫viewport,那对应的con呢是等于device啊,包括EL等于一。啊,那这些都是啥意思呢?要搞清楚这个啊,你必须要了解你为什么要做viewport适配。啊,我在上课的时候呢,有一个习惯啊,就是说我不希望大家只是会用某一个技术,在用的同时呢,我们一定要学会思考,我为什么要用它,我用它能干什么,或者说他当初为什么要这样设计。
12:16
那这里呢,我们先来看啊,我们手机的屏幕绝大多数默认的页面宽度,在从这个手机的流水线啊,就是它生产出来以后,它默认的页面宽度呢,是多少呢?是980,注意啊,这个是说的是页面的宽度。而我们手机设备的宽度,就拿刚才我们说FO6啊,设备独立像素,它的宽是375。那就意味着我们需要把一个九百八宽的页面。投放到了375宽的屏幕上,会有什么问题啊?啊对,它不能完全显示,这是肯定的嘛,因为放不下,那这样的话呢,必然是不会有滚动条呀。啊,肯定有问题,你想现在我们去看移动端的项目,什么时候我们看到过滚动条几乎没有了,有滚动条呢,还是什么年代,就是互联网刚兴起的时候啊,那个时候呢,我们用到的系统呢,还是什么塞班系统啊,对应的比较火的手机是什么,还是诺基亚。
13:19
什么摩托罗拉这些。啊,随着互联网的发展呢,我们对于这个前端的要求越来越高啊,现在的移动端是不可能出现滚动条的,那怎么办啊,有的人就说我去挤压这个页面,把九百八的页面挤压到375块,那这样的话呢,我们是不是就能把整个页面投放到我们屏幕上了?但是带来的问题是什么呢?你想你原本980,现在压缩到375,你的密度是不大了,诶里边的内容呢,肯定会随之变小。小到什么地步呢?就是会导致我们用户看不清楚,或者说是点不到对应的内容,容易误触。
14:01
所以光挤压肯定不够。哎,那这个时候呢,我们就需要用到这个viewport了,这里有一个呃,这个赋值语句啊,就是wise等于的,要搞清楚这个呢,我们还必须得知道啊,在我们移动端。啊,有一个视口的概念,视口的分类呢,又有什么叫视觉视口。哎,视觉视考还有什么,哎布局式考还有一个呢,叫完美视考啊完美视考也有人呢称之为叫啊理想视考,哎理想视口,那这个完美视口也好呢,理想视口也好呢,其实就是让你的视觉视口跟你的布局视口相等,那那就是一个完美的视口。那什么是视觉视口呢?很简单,所见即所得,就是我们看到的手机屏幕上窗口的大小。这个叫视觉视吼,那什么叫布局视口呢?啊,布局视口其实就是针对的,呃,我们网页啊网页。
15:05
那也就是说原本的布局式口是不是要大于我们的视觉式考呀,而现在呢,我们做了这样一个复制语句啊,大家看device,那其实指的是设备的宽度,那这个呢,映射的是我们的视觉视口。我们现在是拿视觉视口的宽度呢,赋值给谁啊,赋值给这个Y,那这个Y呢,其实指的是网页的宽度啊,对应的呢,是我们的布局视口的大小。所以通过这个我们能看出来,现在我们是让我们的什么呀,让我们的这个布局视口等于我们的视觉视口大小。并且呢,缩放比为一,也就是说它俩最终的比例是1:1,那是不是相当于是。一模一样的啊,那这样的话呢,就没有刚才我们提到的问题了,就是说我们的网页宽度跟你的手机屏幕宽度正好一模一样。
16:06
OK,那这个呢,是我们的viewpoint适配啊好,那我是大概给大家串了一下啊,我们之前学过的啊,有的小伙伴对这个函不是很清楚的话呢,你可以去看一下咱们移动端开发相关的视频。来再往下啊,这里呢,还有一个比较重要的叫rem适配。首先你得知道什么是re啊,它呢叫root em啊,就是根节点字体的大小,哎,根节点字体的大小。那为什么要用rem适配对吧?包括re怎么做适配,那你都得很清楚,首先啊,我们得说在我们实际开发当中啊,那UI通常给我们提供的是一套设计稿。啊,一套设计稿,而作为前端开发程序员,我们要保证这一套设计稿的内容在不同的机型上呈现的效果一致。
17:08
啊,这个仪式的最终目标是什么?是等比啊,就是比例。你在手机屏幕大的这个手机上呢,那你的元素就大一些,对吧?啊,手机屏幕更大的元素会更大一些,如果手机屏幕小,那你的元素跟着小一些。啊,那动态的去变化,那这个呢,是我们最终的目的。嗯,那怎么去做rem适配对吧,那这里呢,我给大家是用原生的JS去写了一下啊写了一下,那以上这种思想呢,是我们淘宝的适配方案,就是说将我们屏幕的宽度等分十份。等分十分以后的值呢,其实就是我们对应的啊,根节点字体的大小。啊,E的值。然后啊,我这是定义了一个函数,那接下来呢,是去绑定了两个事件,一个叫pd show,还有一个呢叫re啊,一个呢是页面显示,一个呢是窗口大小改变的时候触发在这里呢啊,我还对其做了什么叫函数防抖啊,为的是在窗口大小这个高频改变的时候呢,不会频繁的去触发我们的这个计算。
18:24
啊。而em值的这个功能函数提高它的性能。啊,你除了可以自己用GS去实现呢,下面呢,我也给大家列了一下,用第三方的库怎么用啊,用这两个库很方便啊很方便,那其实市面上针对于这个re视频的库呢,有很多啊有很多。不止是两个啊,那如果大家需要的话呢,你也可以用这两个啊去写适配啊,不能那github上面呢,都有对应的说明啊好,那以上呢,是我们开发小程序需要准备的一些工作啊,给大家总结一下,就是说第一个需要你们去注册一个小程序的账号。
19:07
第二个呢,需要大家去安装我们微信的开发工具啊,第三步呢,就是需要去掌握一下flex以及我们移动端相关的一些知识点,好,那这节课呢,我们先讲到这里。
我来说两句