00:00
好的我们继续啊,那接下来呢,我给大家说一下小程序的开发工具如何使用啊,首先大家安装完了以后呢,能看到了,能看到这个启动的图标。那现在呢,我去点击啊,启动一下它。稍等。好,那么大家首次启动的话呢,看到的应该是这个界面,注意啊,我们接下来呢,要学习的呢,是小程序啊,所以呢,我们应该选择左侧的第一个好,然后选择好了以后呢,看右侧这一块啊,右侧这一块那这儿呢有一个加号来,我们点击一下这个加号,然后呢就弹出了这个界面。那因为我们第一次学习呢,所以我们需要的是新建项目,那新建项目如果说。你有写好的项目,那么你就可以去干嘛去导入。那现在呢,我们去新建这个项目啊,新建这个项目。那这个时候呢,我先在我的桌面呢,创建一个文件夹啊,我给它起名呢叫code的,那就放置我们代码的地方,然后在这个里面呢进来,我再去创建一个目录啊,目录这个呢,我们叫它CH是吧。
01:12
Wait的DEMO,好,那当前这个目录呢,作为接下来我们熟悉小程序项目的一个根目录啊根目录,那这个时候呢,注意啊,下边这儿项目名称你可以先不用填啊,你先去索引你的目录,点击右侧的这个箭头走,那么这个时候呢,我们来到桌面啊,找到我们的扣。选中它好,那这个时候选择我们的文件夹。啊,把你的目录索引对了以后呢,大家看一下上边这个项目的名称呢,就自动的换成了你当前目录的根目录的名称,哎,如果说你不想用这个名字,你也可以去换掉啊,那这里呢,我就不画了。好,那么再往下啊,这儿呢,要你输一个PID,那什么是APPID呢。
02:08
AAPPID又去哪找呢?来,来,到我们小程序控制台开发的主页,在这里往下翻,这里有一个开发。来,我们点击一下开发。然后看右侧来到我们的开发设置,往下翻大家看,这就是你个人的APPID,那这个APPID呢,是我们注册了小程序的账号以后呢,为我们每一个开发人员分配的一个ID。这个ID呢,就是你当前你自己的唯一标识。啊,可能有的小伙伴说我不想注册了,我有老师的行不行啊不行,那这个呢,不是说不给大家用啊,是因为这些呢,都是通过微信认证的,你们用不了好所以呢,我们最终啊开发项目的时候呢,应该是每个人用自己的APPID,那那这个时候呢,啊,我去说一下这个apd啊。
03:07
当然了,可能有的同学发现了啊,如果说没有的话呢,可以使用什么测试哈,泥底。啊,我点一下这个测试号,他就给你分配了个临时的游客ID。啊,这个呢是省事啊,但是吧,这哥们儿呢,他的权限很少,所以呢,我们不需要他给我们分配啊,我把它删掉,用我们自己的。啊,就是刚才啊,我粘的这个啊,确认一下没有问题。那输入完这个APPID,我们再往下来。开发的模式,我们选择的是小程序啊,不需要这个插件啊,因为插件的话,它不是一个完整的项目。那后端服务的话呢,现在我们不使用云服务啊,因为呢,我们接下来要写的项目呢,有自己的服务器啊,那什么样的项目适合用云开发呢?啊就是说假如说你没有现成的服务器呀,没有数据库呀,哎,你可以使用他们的云开发,就是有什么有云数据库对吧?有云函数啊包括呢啊有什么。
04:10
还有它那个,呃,刚才我们说到一个是数据库啊,一个是云函数,还有个云调用啊,就这三种东西啊,我们可以去玩一玩啊,之后呢,有时间我会给大家录一版小程序云开发的视频来,那现在呢,我们先去。点击这个不使用云服务,那么对应的语言啊,其实呢,有呃GS还有GS啊,那现在呢,我们选用的是我们的GS。好呃,大家在第一次啊,创建你的项目的时候,你最好是最后确认一遍,看看跟我的是否一样啊,OK,如果说啊没有没有问题了,那我们就可以去点击新建走。嗯,我点击了一下新建啊。嗯,让他去创建去。来,那这个时候呢,他会打开我们的微信开发工具啊,那这个时候我给他最大化。
05:08
稍等,他正在编译。好的,呃,大家现在看到的呢,左侧这是我们模拟器啊,对应的这个初始化项目的界面。而中间这一块呢,是初始化的代码。那我先给大家介绍一下这个工具啊,都有哪些,嗯,可用的地方,或者说我们经常要用的地方来。首先上边这个导航啊,那这个你玩任何一个开放工具它都有,那这个呢,我就不详细去说了啊,你自己点啊点一点啊,看一看就OK。那么这一栏啊,比较重要这一栏,呃,首先最左侧这儿呢,注意看我点一下这儿啊,那这儿呢,说是北方汉子,然后有一些通知等等的啊,这个呢,上来是需要我们扫码认证的啊,扫码认证的如果说你没有扫码的话,那这儿呢,不会显示你的微信头像以及你的微信名称的。
06:08
哎,那这是这个,这倒没关系啊,他让我们扫码的时候呢,我们拿微信扫一扫就好了,好,那这是这个,那大家看这这一部分区域啊。那现在呢,我们能看到他有什么模拟器?哎,编辑器调试器以及云开发。哎,我们说了,我们现在不用云开发啊,所以呢,现在我们关注的是这三部分区域,第一个模拟器对应的就是下边来编辑器呢,对应的是这一块,那编辑器大家看我要改哪个文件,我一点你看右侧这儿呢,就是我们的编辑区域呗。啊,是这个啊,那对应的还有个调试器啊,我一点调试器,你看他打开了我们的。控制台哎,就是三部分区域,这三部分区域你想用哪个,你就点一下,那它只要是绿色的,它就会让你去使用,你不想用了,你也可以再点一下,它就会帮你收起来。
07:05
比如说我不想用编译器,我一点,哎,正式的大家看啊,就剩一个模拟器了,注意啊,再关模拟器你就关不了了,因为这三者。至少同时要有一个啊,否则的话,下边我是没有可显示内容了。嗯,那现在呢,我可以把它再点开。好呃,再往右侧看啊,那这呢是小程序的模式,那我们就选它就OK啊,小程序的模式。编译的话呢,普通编译。那不用动,然后这有个编译的按钮啊,你也可以去点击,当我们点这个编译呢,它会重新的去加载我们整个小程序的应用。那后边这呢是一个预览,点击预览。它有两种啊,注意我先给大家看这个扫描二维码预览,这个时候呢,你看啊,它会把我们当前的项目呢,上传给微信的服务器。
08:07
然后审核通过的话呢,他会返给我们一个二维码,哎,那这个时候呢,我们就可以去扫码进行真机体验。当你用你的微信二维码扫码以后。它会自动的把当前的小程序装到你的手机上,你就可以直接用了。诶讲完这儿呢,可能有的小伙伴呢,已经拿起你的手机去扫这个码啊,在这儿我得说一下,你们扫码啊没有用啊,因为你们暂时没有体验权限。没有体验权限,因为这个码现在只能我扫。哎,你想让比如说啊,大家写完的项目,想让你的小伙伴去体验一下,怎么办呢?来来到啊我们小程序后台的主页。上面这呢有一个管理啊,这里面有一个叫成员管理,我们点击一下。
09:03
啊往下翻大家看啊,管理员呢,一定是当前登录账号的,这个微信账号的人是管理员,那再往下呢,有项目成员啊,就是说有几个人参与开发,那有他都有哪些权限,你可以设置。包括下边有一个企业成员。哎,你想让谁体验,你也可以把你的呃,这个微信好友呢添加进来,比如说我点这个添加,在这里搜索对应你想要让他体验的这个微信账号,然后点击确定就OK了,那这个时候呢啊,他就有体验权限了。好,那就是这个,那刚才呢,给大家讲的是扫描二维码预览,那其实还有更方便的一种形式叫自动预览。啊,这个自动预览呢,你看这儿已经给你显示这个图了,就是说你当前的这个账号啊,微信账号跟我微信的服务器可以连接上。
10:02
啊,点击编译并预览,那这个时候呢,它会自动的在你的微信上打开这个小程序。啊,那这个呢,更方便啊,更方便,嗯,只不过自动预览呢,只能是什么呀,只能是我们当前的开发人员去查看我们的项目。好,那这是这个。那后面呢,还有个真机调试啊,这个呢模式一模一样,扫描二维码自动真机调试。都可以真机调试,你看啊,那现在呢,大家看啊,它自动的打开了一个什么呀。控制台。那么现在。这个控制台显示的这个内容跟我手机上显示的一模一样啊,一模一样。哎,这个真机调试有啥好处呢啊,有啥好处呢?来我重新重新再真机调试一下啊。走。自动调试,稍等。
11:01
好了,现在呢,我的手机上呢,打开了这个项目,并且呢,这个时候大家看啊,真机调试呢,已经连上了,你看啊,他现在呢,连到了我的手机啊,包括手机的一些状态以及对吧,以及一些信号是否正常。连上真机调试以后呢,你比如说啊,我们真机上有什么报错,在这会同步显示。啊,因为现在你看到了这一侧呢,它毕竟是模拟器啊,它不能100%还原你真机的环境,所以可能有些时候我们开发过程中啊,我们的模拟器没有问题,在真题上会会报错。或者说模拟器有问题,真机上没有问题,那这个时候呢,都需要我们真机调试去查看这个报错的信息。同时大家看这有个微信吗。点击一下你看啊,现在这个啊,是可以查看我们页面结构的。
12:02
那现在你看我移上去某一个板块,它是没有反应的,那这是为什么呢?那这个时候呢,我给大家打开这个调试器,你看啊,这儿也有个微信吗?你比如说我移到这儿,哎,你能看到这儿是不是显示是这块区域啊。那这个呢,是用于模拟器调试的。而我们在刚刚这个真机调试的控制台,大家看我选中这那么对应的手机上。对应的板块会高亮,意味着我选中了哪一个板块。说白了,现在我是在跟我的手机在联调。啊,确实很方便啊,那这一点呢,做的很到位很到位,好,那这个呢,呃,大家要学会用啊,要学会用那肯定没问题呃。这是这个,那现在呢,我先把这个真机调试啊,我就关了,你不用呢,你就可以关掉。啊,再往右侧看啊,这有个切后台。
13:00
那这个所谓的切后台,你看我点一下啊,那模拟器就成这样了,我再点一个,那这个时候大家看啊,这又叫切前台了,我再点就回来了。啊,这个呢,其实就是模拟我们手机的home键一样。啊有有的手机呢,有home键没有home键的呢,也支持直接回到主界面对吧,就是把我们当前的小程序呢给它后台掉。哎,是这样的啊,那这个呢,用的不是太多。再往后看啊,这有个清缓存啊,这个清缓存的话呢,你看啊,点开里面有很多分类,什么数据缓存呀,文件啊,包括什么授权等等,当然了你也可以点一个全部清除,那这样的话呢,就是把我们所有的缓存全部清掉。哎,那就是这个来,呃,再往后看,这有个上传,呃,上传真正的上传就是说你开发完了以后,你点击。啊,他就会告诉你啊。
14:01
你需要根据你的当前的这个项目去添加你的版本号呀,备注呀等等啊,把你的项目去上传到微信的服务器,最终才能去发布,那这里呢,我们还没有写呢,我就不去上传了,这个呢是大家在写完项目以后啊有用的。这儿呢,有一个什么,有一个版本管理。点击一下这个版本管理啊,这个其实在去年的上半年还没有呢,哎,这个时候大家看,当我点击了版本管理,这就可以初始化一个给的仓库啊,说白了这个开发工具支持我们。对吧,和gate去绑定啊,这个呢,同我们平时用的这个工具Vs code呀,Web呀一样的,你看有什么工作区啊,驻藏呀等等。啊,你要习惯了,你可以在这儿用,你不习惯你也可以不用它,我们也可以自己通过命令行的方式去管理我们的项目。
15:02
来刚才呢,我点击了一下这个版本管理,大家看这是不是就多了一个点get的文件呀,啊,那这个呢,说明我们已经初始化了一个G的什么呀啊工作区。好,那这是这个啊,这是这个来,呃,除了这个版本管理的话呢,这还有个详情点击一下。详情里面呢,就是关于我们当前小程序的一些资料啊,你比如说我这个这是我的账户。哎,我在小程序后台主页设了一个头像。状态是未发布啊,这是APPID等等吧,这些应该是都能看懂,那下来大家可以自己去看一下。啊,包括一些本地设置,哎,你看这里我先说一下这个调试基础库,你看在这个开发工具里面呢,支持这个它有很多的版本啊,当然了,一般默认情况下呢,是用户占比最高的,也是最新的版本。
16:05
如果你确呃确认你的代码没有问题的前提下,你会发现它还有报错,你就可以来到这儿切换一下版本试试看。那这样的话呢,它会重新去编译啊,因为有时候呢,有的版本里面有bug,那所以呢,不一定是我们写错了,你就可以在这儿去切换。那么再往下呢,大家看啊,像什么ES6转ES5的默认就给选中了啊,那说明我们上来就可以用ES6的语法去开发。包括什么增编译使用N包等啊,那像这个N包也不支持在支持啊,我们项目中会给用。呃,后边呢,还有什么项目配置,那这些呢,我们暂时用不上,到时候用的时候再说。OK。以上呢,就是小程序这个开发工具的一个使用的一个介绍啊,使用的介绍,那这个呢并不难,大家多用几次就会了,就会了。
17:08
嗯,好的,那本节课呢,我们先讲到这里。
我来说两句