00:00
哈喽,大家好,我是霍长亮,非常高兴和大家继续通过视频的方式沟通与交流,那么今天这节课,我们要带着大家以最简单的方式,最直接的方式来。在线小程序的搭建其实呢,如果说你之前已经自己完整的搭建过一个小程序了,那么这节课你完全可以跳过,不会影响后面的课程,不会影响后面的课程完全可以跳过,这节课就是给新用户、新学生、新手来看的。因为在很多人眼中啊,一说小程序,发现小程序火不火,非常火,但是他不知道怎么做的,两眼一抹黑,一点儿头绪都没有。一说谁能做,小时候就觉得特别高大上,觉得好高级,我告诉你其实非常简单,听完这节课你就会了,好吧,那么首先我们需要做的什么?你需要先下载一个微信开发者工具,这个工具呢,是微信官方推出的啊,那么你直接复制咱们的地址,然后打开浏览器进行下载就可以。
01:14
咱们复制。然后在这里进行粘贴。之后进入到咱们的微信官方文档找到工具,那么在这里呢,您可以看到有多个版本,那么我个人建议呢,是选择稳定版预发布版本,它可能会增加一些新的功能,但是不一定稳定。而且新增加的功能你也未必用得上啊,比如说你想看看都更新了什么啊。你点击这里可以看到得得得得得,那么这些呢,都是他所更新的,然后我们。直接选择你对应的系统进行下载,比如说你是Windows电脑,你就选择前两个啊,你是苹果电脑,你就选择第三个啊,同时呢,你要看你的系统是哪一个版本,是64位还是32位,那么这个怎么看呢?
02:08
也非常简单,我们我的电脑属性。然后在这里你就可以看到对吧,像我这里是64位的,对不对,然后我们在这里下载64,那你的如果是32的,你就下载42。好了,呃,120多兆啊,稍微有一点大,这个呢,它也是后期随着功能的增加,然后也变得有些臃肿了啊,因为前两年最开始的时候几十兆。好的,我们下载之后对它进行一个安装。啊,我们打开这个呢,就是咱们的。微信开发工具。然后打一步打一步,在这里呢,你根据你的电脑磁盘来选择,像我呢,我习惯性的将所有的程序我都放在E盘里面啊,你不一定跟我一样,看你个人的需要点击安装。
03:15
因为C盘呢,一般它默认的是C盘,C盘是系统盘,你有的时候你东西搁多了,它会容易卡死,蓝屏之类的,然后所以我们一般的分盘吧,把软件单独的放在一个磁盘啊,后期你清理垃圾啊,或者说是其他的都更放心一点。好的,我们现在呢,已经安装完成,然后我们点击完成。
04:00
首次启动之后呢,它应该会让你有一个登录的过程。对吧。会让你有一个登录的过程。我们直接拿出你的手机,打开你的微信,然后扫码。点击确认登录。OK,现在呢,已经登录成功啊,已经登录上了咱们的微信号。好的,到这里呢,因为咱们现在这节课主要给大家要演示的是关于小程序对不对,小程序,那么我们点选用小程序,当然你下面这节课都可都可以看一看,游戏啊,公众号都可以看一看,对吧?这个呢,它都是微信开发者平台的一个工具,对不对,我们都可以看一看,然后呢,咱们现在这节课主要演示的是小程序,所以说我回到小程序里面。
05:07
点击这里的小程序,然后我们点击这里的加号啊,同时呢,你也可以在这里进行导入,导入就是说你之前已经写过了,说你换了个电脑之类的啊,你可以再导入,那么我们第一次呢,就可以点击这里的加号进行一个创建。然后呢,项目名称你自己随便写目录呢,它跟上面基本上是匹配的ID啊,你可以自己注册一个,或者使用测试号自己注册呢,就是说啊,你有微信小程序啊,你或者说你有。有资质创建微信小程序的公众号,你都可以用自己的,然后我们这节课呢,主要是想带着大家看一下他的基础的逻辑,所以说我们直接选择测试号就好啊,然后呢,下面呢,开发者模式啊,就是小程序吧,没什么好说的,然后那个语言呢,就是GS啊,也没什么好说的,然后我们点击这里新建。
06:02
首次启动呢,会稍微慢一点啊,因为它会初始化加载一些东西。好的,那么我们现在呢,就已经进入到了一个对于新手来说是不是很高大上的一个页面,看着挺挺帅的,对不对,一个开发者工具的一个后台。好,那这个页面呢,嗯,说一些基础啊,你比如说我们想要最大化对吧,最不算最大化就算是啊窗口适中对吧,这些都可以在这里进行调整。然后呢,有些屏幕比较小啊,有些同学他可能说我是用的笔记本啊,或者我用ipad学习的,Ipad安装的啊,那么我想要调整一下它的大小啊,在这里可以进行显示,比如说像显示75%,那么这边呢就小一点,它占的位置小了,那这边就大了,当然说你像我这个屏幕,因为是电脑啊啊,就是用的是PC端啊,所以说台式机屏幕比较大啊,这个就无所谓了,然后如果说有些同学呢,是用的笔记本啊,13寸的,甚至说是用ipad,或者说是特别小的八寸九寸啊。
07:12
去写能不能肯定也能写,只不过就是麻烦一点,那这样的话,小屏幕的话,你就可以把这里调整到75%啊,或者说是其他的一个比例,因为这边就是一个预览嘛,右边才是正经800的写代码的字啊。好的,这是一个小的技巧,小的细节。OK,那么还有一个小的问题啊,就是你刚刚开始接触的时候,你可能会觉得,哎呀这这都什么呀,看不懂啊,都好好奇啊,对吧,你可能闲着没事点一下这个关闭啊,那这个时候你可说,诶这个怎么没了呢?我怎么能把它弄出来呢?我告诉你啊,非常简单,看左上角没点击一下调试器,它就出来了,那么咱们按照正常的思维逻辑,你照葫芦画瓢,你把它点一下。它就没了,再点一下就有了,这边呢也是一样,点一下没了,点一下有了啊,点一下没了,点一下有了啊,所以说呢,如果说你不小心把什么地方给关了啊,点了叉了,在这能够把它给展示出来啊,这是一个小的技巧,因为对于第一次使用的同学来说,他找不到,哎呀,为什么老师能够找到这个代码我写哪啊对吧,就是在这进行找。
08:23
啊,别笑话,你别笑,因为以前我都遇到过这样的问题,我刚学的时候也遇到。好了,那么我们继续看啊,这个位置是小程序啊,它有小程序模式跟插件模式,因为咱们这节课讲的就是小程序模式,所以说你保持默认选择小程序就可以。然后呢,后面是一个编译啊,我们点击往下拉一下对吧,它有普通编译啊,还有什么啊,添加编译模式啊,通过二维码编译啊,咱们正常来讲呢,就是普通编辑,因为普通编译它对应的就是首页对不对,那么如果说你想对应的不是首页。你比如说这样。
09:00
啊,我们点击一下确定。它所展示的这个就是一个logo,一个日志,对不对,那么你如果说没有特殊的需要。啊,咱们就选择普通编译展示的就是手印就可以了啊,这个就是关于特殊编译跟普通编译啊,你普通的它就默认就是手印就是这个意思。
10:47
这就是一个弹窗的公告啊,不用管它,嗯。PC小程序调研问题反馈的的,不用把它直接忽略就可以,然后我们只要知道说上面的这个这几个常见的对吧,普通编译的特点啊,普通是首页,你也可以自定义页,然后预览呢,就是预览跟调式都是看看在手机上的一个展现效果,清缓存就是字面意思,一般也用不上。
11:15
好的,那么我们回过头看看中间啊这一部分把它。碍事的关掉,给他搭一下。那么从上往下呢,配置就是页面的意思,所以说顾名思义它呢,主要就是存放一些页面对吧?啊,我们将来肯定会有很多页面啊。Index是首页对吧,这肯定不止首页,将来咱们。那么下面呢,这个是。它呢是一个GS文件,我们打开这是一个GS文件。我们在讲上一套课程的时候跟大家说过,那么GS是什么呀?啊,是做一些比如说是验证啊,特效啊,是这方面的一个功能。然后这里呢,这个APPJS啊,我们可以看一下,它是在根目录下的。
12:02
所以说它呢,通常呢,就是一些入口啊,对吧,像登陆啊,这是一个大的一个入,然后再往下呢,是一个。配置文件啊,Jason,你就记住这里的Jason,还有下面的Jason Jason Jason全都是和配置相关的。啊,然后再往下呢,啊,看到SS,你就想起了咱们上一段课程里边的那个CSS对吧,你就可以理解为是一种样式啊类啊对吧,或者说叫做化妆师啊,美容师啊,你可以调整它的背景啊,颜色啊,大小啊,字体啊等等,就是在这儿进行一个调整。然后呢,它是在根目录下,所以说我们又可以称之为叫做什么,你可以理解为像是语言里面的全局变量,对吧,你在这写的,那么整个APP都可以调用,那整个APP都可以调用一个类啊。然后下面这一场呢,我们可以带着大家看一下,其实呢,咱们这节课是暂时用不上的啊。
13:13
它呢是一个爬虫,其实这个爬虫呢,思维如果扩展一点,不仅说APP里面会有这个东西,小程序里面啊,不仅小程序里面会有这个东西,咱们在。写网站的时候也会有。对吧,写网站的时候也会有,他就可以理解为是一个叫做。所有样式,所有文章。对吧,你这样理解的话,可能更加好理解一点,咱们拿一个我的网站来对比来看一下。嗯,然后我们点击看一下,那么这里呢,就是我们的文章对吧,其实就是这些,其实就是这些,只不过呢,他就是把什么样式啊都给整没了,然后呢,对于搜索引擎来说,诶,看着就更加简单一点啊,看着就更加简单一点,从网页的角度来说,是利于搜索引擎优化离但然说我们现在讲的这个小程序呢,它肯定说跟百度搜索引擎不挨边,但是你呢,就可以先简单的这样理解,对吧,先简单的这样理解。
14:32
好,那么我们这节课呢?啊,现在多长时间了啊,时间还够,那我们再讲一讲。好,那么我们再回到这里啊,这个配置,然后里边是一个index,然后里边又有四个文件,那这个时候我们会发现,诶,这里有一个WSS,下面还有一个W叉SS,那么他们有什么区别呢。你记住了啊,下面的是全局的,因为它在整个根目录它是最大的,它是全局的,然后这个呢,就相当于是咱们E语言里面的叫局部变量,或者叫程序级变量,对吧,那么它呢,也是相当于是美容师化妆师啊调节CSS,但是它只是对这个页面有效啊,出了这个页面其实不灵了。
15:19
然后上面这个。呃,叉MLWML这个呢,你就可以理解为就像是咱们上一套课程里边的HTML对吧,你写代码的。测单的页面,然后Jason咱们就是这个页面的一个配置文件,你就记住了,Jason就都是配置文件啊,然后这个JS呢,这就是逻辑啊,运行逻辑的一个设置项。好,那么这个呢,是关于它的一些介绍,然后再往下是一个logs,这个就是一个日志,对吧,一般我们都是存放日志用logs。好的啊,咱们。截个图。
16:05
这样记录一下。全局将士啊,这个呢,是他。然后。这个呢是全局配置啊,就是APP配置。然后这种GS啊,都是做特效啊,做验证啊,或者做一些逻辑性的东西。写不开,写不开是不行,然后上面的这块呢,就是一个日志。
17:01
然后在这里这个是叫做局部CSS局部样式。这一行就相当于是模板啊,相当于是。啊,相当于是咱们上一套课程里面的HTML。这这就相当于是页面配置啊,也就是他是针对某一个页面,下面就是针对的是全部啊。然后最后一个解释。逻辑啊验证啊之类的对吧,大概呢,就是这样的一个逻辑,然后后面的两个咱们暂时用不上啊,等到用得上的时候呢,咱们再跟大家说。好,那么我们呢,在咱们的幻灯片里边也给他进行了相关的备注啊,后期你要记不清的话,可以看看这个幻灯片。
我来说两句