00:00
大家好,我是上硅谷H5学科讲师,我叫闫志勇。在程序员节日到来之际,由我来给大家分享几道面试题。那么本次主要分享的内容呢是?小程序。小程序这个名词我相信大家并不陌生,尤其是从一七年,尤其是到今年火的一塌糊涂,各大电商或者说互联网企业呢,都纷纷去。投入到小程序的开发中。好,那什么是小程序呢?嗯,首先你得说它是一个程序,那么既然是一个程序,也就说它是一段可以运行起来的代码,那么可以跑起来的程序呢,它呢就应该具备一定的功能,那为什么叫它小程序呢?哎,就是小呢,对应的就是迷你的意思,就是说它是一个很轻量级的程序,很轻量级的程序。
01:00
好,那这个小程序里边的小呢?也正是张小龙,他当初发布的时候提出的一个小程序最大的优点就是说无需下载,即用即走,或者叫用完即走,那么是不是小程序真的不需要下载呢?其实也不是的。嗯,大家都知道我们手机上本来是没有小程序的,那当我们去点了别人分享的那个小程序的链接以后,你发现你手机上就有了,哎,那是怎么有的呢。好,比如说别人在群里发了一个小程序,你去点了一下,那么当你第一次点进去的时候,你会发现它稍微有一点点慢。好像在加载的过程,那么这个在加载的过程呢,其实也是它在安装的过程,哎,也是它安装的过程啊,那么只不过是因为它特别小,我们感受不到它安装的那个时间它就已经好了,那么小程序到底有多小呢?它在刚不刚发布的时候呢,要求我们开发完压缩包的体积不能大于一兆,否则的话是无法审核过关的。
02:18
后来呢,又做了改进,那么从原来的一兆呢,提升到现在的两兆,提升到现在两兆,也就是说你开发完的小程序呢,体积不能大于两兆,注意我说的是压缩的体积,但是呢,就是改身为两兆以后呢。也无法满足我们企业的一个需求,你会发现,你会发现实际开发当中,很多企业开发完的小程序都是大于两兆的。那这个时候怎么办?是不是就没有办法去使用它呢?当然不是,企业呢也有自己的方式,比如说我们的分包呀,哎,这些方法去应对该限制条件。
03:02
好,那这是小程序的一个概述,那么大家现在所看到的呢,这个呢,就是小程序的一个官方的开发文档,你在开发小程序的时候,主要参考的呢,就是当前这个开发的。稳打。因为小程序的更新迭代呢比较快,而它里面的一些API,包括这个文档经常会有一些变动,所以呢,给大家一个建议,就是你们在搜小程序相关的一些资料的时候,最好是查看这个权威的文档,不要去百度上面去搜一些,哎,别人给出的答案,那么他们给出的不一定是对的,也不一定是最新的,也不一定是最新的。好,这是对小程序的一个概述,那接下来呢,我给大家演示一下如何去开发小程序,要开发小程序的话呢,首先你得具备一个小程序的开发工具,又叫微信web开发者工具,那么这个工具呢,是在官网上可以下载到了,这个我就不给大家介绍了,当你安装完这个工具的双击打开以后,看到的就是这个界面。
04:18
我们要选择的呢,是小程序项目,好来到这个界面以后呢,需要你去选一个你项目的根目录,那这个时候呢,我去在桌面我新创建一个文件叫小程序test。好,那点击这个箭头呢,我来到桌面去找到该文件夹,当我选中以后,大家注意看,在这儿呢,需要一个APPID,那这个ID呢,是我们每一个开发者的。唯一标识,也就是说是你的身份标识,有了该ID以后呢,你才具备一定的权限,包括你的在线调试或者在线预览。
05:03
好,那这个APPID呢,在我呢,暂时呢,就使用我。好,这个apd呢,我呢就使用我的ID,好注意看下边有一个建立普通快速启动模板,也就是他会帮我们初始化一个项目,我点击一个确定。点击完确定以后呢,来我们看到的是这样一个页界面,首先呢,给大家说一下在。小程序里边你一定要会用当前这一个开发工具,那么这个开发工具呢,其实主要的功能呢,三部分,这三个模拟器对应的是下边这个我们看到实时的效果,而编辑器呢,对应的是右侧这一块内容,当哪一部分内容显示的时候,你会发现它对应的按钮是这个灰色的,而没有选中的是这个白色的,大家看我点击一下调试器,哎,那我们下边的调试器呢,就会被启动。
06:12
那这个调试器呢,其实很像我们Chrome的调试器,所以对于我们来说也并不陌生,好,那你不用哪个呢,你都可以给它关掉,但是呢,至少得留出来一个也是一下。那知道了这个基本的功能以后呢,我们来看一下他帮我们创建的项目都有哪些文件。首先我们能看到这有个project conflict,那么这个是一个文件,它是针对于我们整个项目的一个配置,通常来说该文件是不需要我们去修改的,你呢可以去改一下什么description这些描述。包括刚刚没有APPID的来人,你也可以把你的APPID写到这里,好,那这是我们项目的配置文件,那除了这个以外呢,我们能看到的是这三个文件,这三个文件。
07:14
首先说一下在小程序里边最重要的四个文件。其中我们已经看到三个了,其实还有一个叫点微信mail文件,那这个文件对应的是什么呢?是我们原本认识的HTML,也就是结构文件,而样式文件呢,是微信。SS。结构有了,样式有了,那么这个GS其实对应的是我们平时所说的什么行为的文件,而这个GS呢,是一个配置文件。现在我们看到的这个APP点。开头的这三个文件是属于我们整个项目的全局配置文件。
08:00
这是全局配置文件,这是全局的样式文件,包括这个GS呢,是用来去写我们整个应用的一些逻辑的。好,那上来我们能看到的这个APP调用里面传一个配置对象,那么它的作用呢是。注册整个小程序应用的,而里边这些我可以给大家收起来,那这个global data,一个是全局的数据,一个是呢,它里边的一个生命周期。这些内容呢,我们在官网上呢,其实都可以找到对应的内容,比如说我们刚刚看到那个注册程序,它对应的就是这个APP,那么里边这些呢,大家也可以看到,诶,这是生命周期的回调,生命周期的回调,好这个呢是全整个应用的一个。
09:00
GS文件,那么这个色呢,在这儿呢?这是整个项目的全局配置文件,在我们官方文档上选中框架以后,我们在左侧能看到这个全局的配置,里面的内容呢,都有说明,这个大家可以在官网上去查看。那么除了这个以外呢?这个不用说了,这是全局的样式文件,而在小程序里面写样式和我们平时写CSS样式是一样的,是一样的,所以对于我们来说没有任何的压力。好,那看完全局的这些文件以后,我们来看一下这个pages,那么pages里边有两个文件夹,这两个文件其实对应的就是我们。呢所看到的两个页面,现在我们看到的这个页面对应的是index这个文件,然后呢,上边这个头像这我可以点击,当我点击它跳转一个页面,那这个页面对应的正好是这个locks,好,而这个us这个文件里面放置的是一个工具类库,这个库专门用于帮我们去输出一些时间,其实正好是我们页面看到的这些内容。
10:18
OK,那我们来看一下index里边都有什么东西。右键关掉所有的标签,确定好,那在index这有三个文件,又是我刚刚强调的小程序里面四个文件的三个。结构。样式行为。那这三要素呢,正好是我们看到的一个页面,打开它的结构,我们可以看一下。在这里边也有一些类似于HTML标签的东西,那这些文件,那这些标签呢,它其实对应的就是组件,这个时候呢,正好引出一个。
11:03
概念是小程序,它是组件化开发,很方便于我们开发人员组件化开发,也就是他有自己完善的组件,这个在官网上对应的在组建这个选项,我们可以找到对应要使用的组件。看完这个以后呢,我们看对应的样式,哎,这。正好是我们平时写的CSS样式,那这些类呢,对应上在页面上你都应该提前去定义好,都应该提前去定义好。好。但是奇怪的一点是,你会发现我这个结构和样式文件,我并没有互相去引入,而对应的样式就能生效,那这个时候大家要注意,小程序是这样设计的。你的结构名和样式名必须起成同一个名字我才能找到,如果说他俩不同名的话,那么样式文件就会失效。
12:08
而在GS这一块,我们来看一下。我可以把这个收起来,这个配件。要区别于。刚刚app.gs这个papp这个方法是注册整个。应用的,而我们这个配件呢,它呢是用来注册当前页面的,那这里些都是他在初始化项目的时候帮我们写的一些内容,我们也可以把它全部删掉,全部删掉,那实际开发的时候,你就可以写你自己想写的内容,其中有一个叫data,哎,叫data选项,那么这个data呢,就是用来去写我们对应的数据的。
13:01
写数据的这个在官网上对应的可以在哪找到呢?点击框架这边有一个页面的配置,那么页面。嗯,不是页面的配置,再往下往下这有个注册页面。当前有个配置,这不是data吗?下边都有对应的说明,都有对应的说明,那这个data里边写的数据呢,和我们。在view里边形式是特别像的,特别像的,所以说懂view的同学再去写小程序的话,也是毫无压力的,好,那这是一个除了data的话,完了就是我们一些生命周期的回调,或者说是事件的回调函数来,那在这呢,我们可以去演示一把,把这个都删掉,它里边呢有一个主件叫view,那这个呢,专门是。
14:01
用来布局的,它只是一个简单的容器组件,比如说我可以写一个文本组件,叫text,在这呢,我去写一个,我是这是我第一个小程序,CTRLS保存一下,它就会自动去编译,自动去编译。包括我可以在GS这去初始化一个数据,比如好好,那么在我们页面中要用这个数据的话,我可以再写一个text,那这个时候你需要用到表达式好,Message。CTRLS保存,大家可以看这个,哈哈,就填充上来了,好,没有问题。那这是小程序的一个基本使用,那除了这个组件化呢,小程序也有自己定义事件的方式。他呢使用的是。
15:02
BY加世界名,比如说有个tap事件,比如说我这写个handle,我们叫它tip,好,那么这个对应的回调呢,就应该在GS里面去定义上,那此时呢,我给它做一个简单的输出cons.log,点击了一下。来CTRLS1保存,然后我去点击一下,此时我们想要看到输出的话,应该是打开调试器,哎,这个时候呢,我们可以看到我刚刚一点击它就会有一次输出,那么除了bed以外呢,还有一种方式呢,叫catch。来我切换为catch,那这个时候我再点击大家看它同样呢可以输出,那至于说bed和catch有什么区别的话,大家既可以查看官网,也可以访问上硅谷的官网去查找详细的资料。好除了世界这一块,还要再给大家介绍一个东西,就是小程序的适配方案,在小程序里边它是做了完美适配的,那这一点呢,解决了我们前端人员一个很大的问题,很头疼的问题就是去做不同机型的适配,在小程序里边是不需要你怎么去考虑的,而这个适配单位呢,要用到的叫RPX。
16:32
在这呢,要着重讲一下,在F6下边erpx。等于一个物理像素,相信懂移动端的同学应该能算出来我等于多少个CSS像素。哎,它呢,对应的应该是0.5CSS像素,为什么是这样呢?因为F6的DPR等于二,那么DPR指的是什么呢?
17:05
DPR指的是物理像,指的是设备独立像素比上我们的物理像素啊。如果说对移动端同学不了解的同学,也可以去看上硅谷的官网移动端移动端这一块的内容好,当大家知道了小程序的适配方案,小程序如何绑定事件,如何去书写他的。组件,那么此时你也已经具备了小程序基本的一个开发能力,好,那么本节课呢,就分享到这儿,想要了解更多更详细的资料的话,可以访问上硅谷的官网。
我来说两句