06. 尚硅谷_微信小程序_快速模板介绍.avi原创

好来，咱们接着上一课，咱们继续来讲，那么这一节课呢，我们呃，来就是开始实际的去来整这个小程序了，那么整之前呢，我看到有的同学想去找一下自己那个APPID是吧？呃，我去访问一下小程序这个官网，去登录一下，OK，那么大家应该是见到过这个界面吧，那么在这个里边呢，这有个设置，哎，大家点击一下这个设置，这有个开发设置。点一下这个开发设置，注意是不是有个开发者ID吗？哎，看这APPID，每个人的这个其实是不一样的，不一样的，哎，你们就可以在这去找，注意在设置这个界面找到开发设置。嗯，OK，那这是第一个事情，那么第二个事情呢，就是我们先去啊整一个界面，那么整这个界面之前呢。呃，我先给大家介绍一下我们当前这个开发工具如何去使用。

啊，首先上边这是一个导航，那么这里面呢，有很多的这个扩展性的功能啊，其实我们更多操作的第一个项目。是在这有新建项目呀，查看所有的，打开最近的呀，包括关闭当前啊，这个待会用的时候我给大家也是来，我先说一下这一部分。这一部分是三个部分。第一个模拟器。的模拟器，模拟器其实指的就是你写的当下小程序页面的效果。这个特别像什么，像我markdown里面，Markdown里面它左边不是写语法，右边不是有一个那个视图模式吗？啊，我们一边能看到那个样式，OK，这第一个，第二个叫编辑器，注意我点哪个的时候，它的颜色是这种灰色的，大家看我后边两个是不是没点啊，我点一下编辑器，哎，你看从这开始到右侧，这是我B级区域。

编辑区域，那么在这呢，这的结构其实这个比较简单，不管说是h build啊，Markdown这些编辑工具，他们都是这样的，是个导航对吧，然后呢，我在这里边，你比如我想看对应的文件啊，右侧就能看到，右侧就能看到，先不要管里面的内容，这有个调试器。啊，调试器那不用说了，是我可以去调节一些东西，那这个呢，是因为我们发起就丢了一个图片啊这个没有关系，因为我们这个接口是请求人家那个这个网站知道是什么。走吧，对吧，啊呃呃，这是一个这个调试器里面呢，是我们去调，呃调控当前这个项目的，哎，最常用的你们coolo在这，我们是不是能看一些打印输出啊，打印输出OK啊，这个用到了咱们都会去讲，我先过一下这个，呃再往这边看小程序模式。

稍等一下啊，这个时间长了，你不去动它的话，它就会黑屏一下，这个开发工具有点问题，在这呢，我们不需要去动它，上来选中这个小程序模式就OK啊，这有个编译模式，也是普通编译。啊，再往后大家看这有个编译啊，就是说当你写完一些新的代码的时候啊，通常来说我们需要去按一个CTRLS。啊，保存一下，一保存它会自动编译的，那如果说有时候啊，你比如说在这个界面我想编译怎么办？按CTRLS不管用了，因为我现在上面没有动任何的文件啊，那这个时候你可以去点一下这个编译，编译的话它会重新去加载你整个小程序。哎，再往后这有一个预览，这个预览是什么意思呢？就是你可以拿你的手机去测你的效果。而且我要和大家说一下，我拿手机去测这个效果远远比这看到的要好得多。

真机上显示的是最完美的一种啊，这个模拟器虽然说也是100%还原吧，但是效果还是不如我们在真机上去看啊，咱们接下来的课程当中大家写一点，可以拿你们的手机去测一下。测之前呢，我先说一下，如果说你们的项目没有APPID的话，你就没有这个功能，你会发现这是个灰色的，不能点。嗯，而我们有了APPID，你可以干嘛呢？你点这个预览走。注意看。正在上传，哎，你说这个上传是传给谁啊。微信服务器，对，传给微信的服务器，哎，他审核了以后没问题，然后呢，给你个二维码，那这个时候我们拿手机可以去扫这个二维码去看。你们就不用扫了，我看有同学拿手机你们扫是看不到的，只能我的手机去看啊，因为啥那这个里面有一个权限啊，我想让你看也可以也可以啊，这边有个设置，设置的话我记得应该是有一个用户身份。

这不有用户身份吗？管理员是吧？我哎下面这有个成员管理，这这是之前一个老师啊，我解释一下吧，人家男朋友将近两米，体重200多斤，所以我还是稍微离他有点距离比较好，当然你们可以互相测的时候点点哪呢？这有个编辑，这有个编辑，注意在这你是可以去搜，这不有添加成员吗？注意这个成员必须是你的微信好友。对，就是微信好友，然后呢，里面可以去给他设置一些权限，哎，这些权限呢，大家往下看。

是不是有个叫体验者之间啊，那他就能看你的，那他就能看你的，OK，那这是一个啊，啊，这是我们的预览。嗯，我声明一下，如果说有的同学不小心让你的相貌大于两兆了，你在这就不能预览。这会给你一个提示，说你的项目大于两兆了。懂吗？因为它最大不是两兆吗？哎，那再往后看这个，我们现在用不上这个切后台，远程调试用不上切后台什么意思呢。我们手机上都有一个home键。对吧，Home键你打开一个小程序，你按一下home键，它是不是能退回到你的手机应用的主界面啊，那就相当于是把我的小程序以及后台管理了。呃，是一样的，哎，这个清缓存不用我说了吧，我们可以清除缓存，哎这个到时候我也会给大家去演示一下，也是，哎这个上传测试腾讯云这些，那这些呢，是我们实际开发当中，你正儿八经的注册完你公司的账号去上传，最终的目的是啥？是发布你的小程序。

是发布你的小程序啊，这有个详情，这个详情这也能看到我们的APPID，包括下面这有一些功能，看到没。ES6转ES，注意我勾上了以后，说明我在我当前的项目是不是可以使用我ES6的代码。嗯，那下边这些呃，自动压缩啊，这些自动补全啊，哎，这个东西我先勾上它，最后我会给大家去讲一下这个，那这个呢，是我们开发工具界面上能看到的所有东西啊，接下来我们就去写一个自己的这个小程序。嗯，好，那写之前呢，我呢可以在桌面上去创建一个，比如说我们这这个我们可以就叫它这个大写吧迷你，然后呢，我们刚刚说的那个叫pro，呃，应该是brown对吧，OK，这有一个文件来，我呢把这个路径拿一下，现在我给大家演示一下如何去打开一个项目。

这不有个项目吗？大家点击它这儿是不是有个新建项目呀。OK，我们点击新建项目，然后出来这个界面，我看到刚刚有很多同学是不是打开到这儿了，然后呢，这有个目录，注意你可以去找我刚刚创建这个叫他，哎，这个作为我们一个项目的根目录嘛，选中当前的文件确定。注意你新创建的项目，这是没有PID的，你最好是输入上它，因为啥。这样你们就可以预览啊，找到我呢，找到我的APPID。走，然后呢，我拿过来来给它放到这儿。

对。那这个呢，是我们项目的名称，项目的名称它默认是使用的是你当前文件夹的。名字，我刚是不是起了个名字叫他呀？当然了，你也可以改成你们自己的。没有问题，那下面这有个叫建立普通快速启动模板。这个特别像RA和view的脚手架一样。他上来可以帮你快速启动一个应用啊，一些配置已经有了，而你是不只需要去改里面的原文件就可以。啊，我呢先给大家演示一下，注意啊，我们实际开发可以不用它，也可以用它来，我先选中它，我选中一下走，我点个确定扫你。注意看我这个开发工具是不是又开了一个界面啊，哎，那这个时候呢，来我们来看一下。

这是一个默认的界面啊，这是一个默认的界面，有那注意看啊，他这个默认的界面也说他这个程序又改版了，之前的话，这个上来是应该是拿不到我这上面的东西才对。就我的权限，有没有发现他上来把我的头像和微信名字就拿到了，嗯，其实在上一个班的时候还不能下一，这我要声明一下，小程序里边的东西一直在改版。一直在办，包括去年你比如说一七年小程序上线的时候，他程序里面有很多的bug。有很多的bug，它一直在升级，一直在迭代啊，所以说大家以后你们上班的时候，小程序的东西啊，参考的东西看哪了，其他的地方不要去看了，就看它的官网。因为你看网上的很多其他人给出的信息都是过时的。包括一些API，比如说有一些方法，哎，在前一个月还能能用的，你然后你去用的时候，你发现它一直报错，你去官网查一下，很有可能这个API它就废掉了，他不用了。

嗯，OK，那这是一个默认的小程序应用的界面，那我们重点是要看他给我们创建了哪些文件。首先这个pages我们先不去管，其实这个pages大家能想到里面放什么。配置单词是不是页面的意思呀，看在这里边是页面，我们待会来看，先往下看这UT什么意思，哎，工具这只是一个辅助类，其实要不要它是不是都可以啊，待会我告诉大家它是干嘛的，来往下我们重点先看这几个。最后一个，这什么意思？project.con杰森项目配置文件对吧？来，我先放到全屏，把调试器关掉它走啊，这就是description这项目的描述，Setting是一些设置。

啊，什么URL check检查ES6呀，那这些东西通常来说我们是不需要去改它的啊，那这呢是我的APPID啊下面这些大家可以看到有很多是不是都是空的呀，都是空的，嗯。知道这个东西。OK，这是第一步，第二个来看这三个文件，其实我刚刚已经介绍过，点GS点接S，哎，这个是干嘛来着，哎，样式文件，其实我们在这不应该说它是CSS，它什么样式文件啊。那注意他们三个有一个特点，是不是都叫APP呀。都叫APP，哎，而上来就有这个这三个文件，哎，其实能说明一个问题，这三个文件里面肯定是有必须的文件的，否则上来我是不会写它的。先来看第一个app.gs。这里面啊，他这是又升级了，又升级了，其实在上一版的时候里面根本没有这些，你会发现他写了很多逻辑代码。

逻辑代码，嗯，我告诉他我这上来为什么进入我我微信的信息了，看这。这一看就能看到获取用户信息，首先这很明显，这个对象点一个方法调用对吧，对象什么叫微信啊，啊，这是它分装的一个全局的对象啊，这个方法我们也能看的差不多，Get set什么意思？是不获取设置的意思啊，那获取设置的意思，OK，那这是他自己做的，待会我们自己去整一个。呃，这是一个，然后我们来看一下APP，我直接把它收起来。大家可以看最外边是不是有个方法调用。这个能看懂吧，方法调用，而这个方法调用传了个参数是不是一个对象啊，那这个方法它是干嘛的呢？啊，那这个时候我们就需要去看一下官网。

来。首先我们来到这个界面啊，我告诉大家去哪去找小程序开发的文档，这这是不是有个文档，大家点击一下文档，注意我们现在是不是要开发。注意，我们要学的是小程序开发，而不是小游戏。那我点击一下小程序，那在这呢，呃，这几个是需要你们去看的东西，而最重要的其实是这三个。框架组件API。啊，我待会儿告诉大家什么东西去哪找，第一个找一些配置性的东西，通常去框架找。啊，那这个时候我点击一下框架，注意看左侧这个导航这一块，这是不是有一个配置。

再往下逻辑层，逻辑是什么意思啊。我们一说到逻辑是不是涉及到GS了，哎，那在这呢，这有一个东西叫注册程序。来，我点击一下这个注册程序，大家看。这上来是不是就有个APP调用啊，来我们来看一下它的作用是什么。用来注册一个小程序。啊，那也就是说当前这个里边这个它的作用是干嘛的，他什么就是注册我们的小程序的。至于说里边写什么，那是因你的相貌而异的，哎，第一个我们要知道，上来你先不写，其他的也应该写个大写的，也是首字母大写的APP调用，它呢，用来去注册你的小程序应用的，这第一点。

其他的我们现在不需要换新，那再往下看，这有个APP的接。哎，这是一个接色文件，我强调一下啊，我们通常看到的APP是不是指的是整个应用啊。而这里边写的所有内容，相当于是我当前小程序的全局配置。全局配置。嗯。什么叫全局配置度？什么叫全局配置，什么叫局部？一说到全局，对应是不是有个局部啊啊，全局的话意味着在任何一个地方是不是都能看到它，而局部的话是不是就是它私有的东西啊。啊，那这个APP的接色是干嘛的呢？来看官网来，我要切换到浏览器的，走这是不是有个全景配置，点击一下。

好，他全局配置，这上来是不是有个APP上接S哎，用来对微信小程序进行全局配置，后边是他配置的内容设置，页面的路径啊，窗口表现啊，网络超时以及多tip等。那我们来看一下第一个pages，注意看它是一个数组。它是一个数组，哎，这里面这放的是什么东西啊，这很明显是个路径吧，啊he下边index index，那这是什么呢。这边有个配置是吗。这不有个index吗？这不有个log吗？哎，这两个其实代表的是两个页面，而我们现在看到的这个正好是index这个主页面。那logs是哪个页面呢？你看我我点这个地方。或者点，诶他不让我点。必须得点头像。

这是不跳转的页面啊，这个页面是干嘛的log日志啊，这正好是不是响应这个文件名，就是说你每次进来的时候，它有个时间，而这个时间啊，应该是注意看线，这个是10.02对吧，看我现在的。时间是不是不对啊，你说他这个是什么时候的时间，哎，对，我打开当前这个应用的时间，嗯，好，呃，这是配啊，我们先来看到这，那下边这个window呢，是配置窗口表现，什么叫窗口表现呢。这叫窗口。哎，你你们打开你们手机上肯定也有这个，呃，最简单的例子啊，呃，那我不说，我看下大家能不能认识这个是干嘛的，Navig background color背景颜色这什么呀，那我们换一个吧，F0F，我CTRL保存一下。

这不就是窗口的背景颜色吗？啊，你们可以根据自己的兴趣爱好或者癖好去设置一下啊，OK，那我就先先介绍到这，介绍到这，那这个呢，其实是个样式的，这这个样式其实就可可有可无了，来我重点要说一个东西，有没有看到这个是不flax布局啊，那小程序里面他推荐使用这种布局方式。OK啊，刚刚给大家介绍的这些文件呢，是我们全局的一些文件，那现在我们重点来看一下这个页面。首先这是个文件夹，我点开它。这是什么？结构对吧，样式行为。

这不一个页面的三要素吗？OK，来，我们先从结构看起啊，先从结构看起，那我可以收起来，上来有个view啊，然后下面还有什么button啊，BLOCK1位置，那么这件东西我们先不管其他的，最起码它看上去是不是像一个H码的标签。当然了，我问你这个是HT标签吗？不是，哎，让大家想一下它是什么东西，回想一下我刚说了一句话，小程序里面是组件化开发啊，其实我们看到的这些标签其实就是什么组件。那我们在维修里面，咱们组件的使用形式不也是有标签的形式吗？对吧？哎，这一个一个都是组件，哎哎，大家以后要找组件的话，去哪个找去这。这不占有一个总监吗？嗯，行，那这是我们现在需要关注的，里面这些东西先不要去看啊，先不要去看，好这是一个，那呃，再往下看，这是样式，这些样式就跟我们写CSS一模一样，哎，但是有没有发现我这里边都是class呀？

有ID吗？没有，在这统一都用class去定义，类名找的话也是通过class去找。嗯，那下边这还有个比较重要的文件啊，也是我们以后要操作最多的一个文件，GS文件。啊，在这里边。我把它收起来。刚刚在全局的APP的GS文件，这是有个APP调用啊，而在我们页面的JS文件里面，这是不是有个配置调用。刚刚的ab.GS是来注册整个小程序的，你说这个配置是干嘛的？

哎，很好，配件是用来去注册什么当前页面。写上它就可以让整个页面先注册一下，至于说里面写什么内容，随便。先有个了解啊，注意啊，大家不要犯这个错误，我这些首字母是不是都是大写没有问题啊，那下面这个log呢，这就不用说了，来注意这其实是一个页面，完整的一些文件，是不是四个文件都有了，嗯，你操作来操作去，也就是这四个文件。这个UT是干嘛的，这是个工具类啊，这些东西你们应该懂。干嘛的，这是不是就是获取那个时间呢？啊，其实对应的是哪呢？就是这个log日志，日志里面这些东西。对了吧，啊，没有问题啊，大家了解了这个以后啊，了解了这个以后，我们要自己的，我们要自己去写。

啊，不需要用它的，那这个时候我要说一下，呃，你要删除的话，注意在这儿删的话，你看啊，我点击这个删除其实还也比较麻烦，也比较你看他不让我删，那怎么办。看着右键，这是不是有个叫硬盘打开啊，硬盘其实就是找到你本地了啊，其实你知道的话，我我可以直接来这。这不这些文件吗？右键删除。呃，有一个哦配。下塔山的。来看这这是不是有个关闭当前项吧，我先把这个项目关了它。这不就删了吗？删了OK，那现在这个项目没空了啊，我们重来一遍，那我们接下来就要自己去写。