00:00
好的,我们继续啊,那这节课呢,带着大家去看一下我们小程序里面的啊,这些文件的构成,那现在呢,我们看到这个项目呢,是小程序啊,微信开发者工具默认为我们生成的一个项目,这个呢,等同于我们VIVO还有rap中的脚手架默认生成的项目一样啊一样好的,那我们要去快速的熟悉一个项目的话呢,我们嗯,应该怎么去看,先看呢。首先建议大家先从外边向里边去看,向里边去看,那在这个外边呢,我们先来看一下这个文件吧,啊第一个叫project.conflict点杰森啊直译过来呢,就是项目的配置文件。那么在这个里边呢,你会发现啊,它有很多的配置选项。那么这些配置选项呢,是不需要我们去动的啊。那绝大多数的配置呢,都是我们呃都我们都可以干嘛通过这种图形化的方式呢,去呃设置它,然后这里边的对应的内容自动就更新了,大家看啊,比如说我点一下这个ES6转ES5,我不勾选它,诶你会发现这一块没false。
01:12
比如说我再再来啊,我勾选上,那这个时候答这就是处啊,所以说大部分的配置呢,是根据我们开班人员的选项来决定的,那在这里啊,我们可以直接在这儿改的啊,是这个就是我们经常要可能呃有这个需求啊,要改这儿,比如说你的APID哎,你在开发的过程中要换一个,对吧,你可以换一下它,而项目的名称呢,我们也可以在这去换。那么剩下的东西呢,不建议大家在这儿去改啊,因为这里面改容易出错啊,你最好是在你的开发工具中啊,去选择你想要的选项。好,那这个呢,是我们的项目配置文件,那么再往下看呢,这有一个site map点杰森。啊,这个STEM点色呢,最开始都没有啊,这是后来新加的啊,因为它是新加的,所以大家看啊,这多了一个叫呃,DEC啊,就是description的缩写,就是描述的意思。
02:13
啊,说了关于本文的更多信息呢,你可以参考文档啊,这个人家把地址呢,也已经贴出来了啊,那现在呢,我们去复制一下啊,看一下这个地址。好的,那现在呢,我去访问一下这个地址啊。呃,在这里它有一些说明啊,只不过这现在这个说明大家看啊,它对应的呢,是在哪,在这个指南这一块啊,你也可以去访问另一个地方去找到这个啊,正好呢,给大家说一下,看着我们现在呢,来到了小程序后台开发的主页,那这右侧呢,这儿有一个文档,你点击一下啊,那小程序的开发文档写的很详细,而我们要把小程序啊,说想要学好的话呢,那官方的文档你一定要去看啊,一定要去看。
03:03
为什么要看这儿呢?很简单嘛,因为首先我们学的所有技术呢,来源于这个文档对吧,给出的,还有就是小程序的技术更新迭代的特别快,呃,很有可能你去网上去搜啊,说看别人用的这个这个,然后你自己用呢,你会发现它不能用了,那是因为这个API或者这个语法可能过时了。好,那这是这一个,那来到官方文档这一块呢,我们可以点击框架啊,在框架这小程序的配置里面有一个STEM。啊,这里呢,有针对于s map的详细说明,那上面这呢列了呃一段话比较长,我们挑关键的来看。首先呢,微信小程序呢,已经开放了这个小程序内的搜索啊,我们可以通过这个配置。去干嘛呢?去决定啊,我们当前小程序的页面是否能够被这个搜索引擎以爬虫的形式呢去爬取到,说白了提高你小程序页面的一个曝光率啊,下面这一句话呢,是精简的啊,就是说用于配置小程序及其页面是否允许被微信索引。
04:17
啊,那这是这个,如果没有STEM点节省呢,则默认所有的页面都允许被索引。啊,你也可以去配置它啊,我们看一下在这个STEM的配置里边呢,注意啊,它这个阶层有以下的属性。那这个呢,是rule,呃,Ruler。他的。复数形式啊,或者叫若啊,若的话它是规则啊,加S复数对吧,那么它对应的呢,是一个数组,数组里面存存放的是什么是对象。那每一个对象呢,有以下这些属性啊,有以下这些属性,那么在看这个属性之前呢,我们先去思考一个问题啊,你们开发完的小程序是想曝光率高一点呢,还是不高呢?
05:08
对吧。哎,是高一点呢,还是不高呢,当然是高一点更好呀,就是说我们曝光率越高啊,我们访问的用户量越大,对吧?啊,那你你这款应用呢,就越挣钱。所以大家看看这个项目默认给到我们的Rose里面啊,那这个数组这有个对象啊,你看有个action为alone啊,Page为星号,那么这两个分别对应什么意思呢?我们来到官网去看啊,第一个action。哎,默认值是allow,那么它可可选值呢,有两个,一个allow,一个this allow,那this allow呢,就是它的反向操作就是不允许。啊,默认是允许,那这个配件呢,就是说你告诉呃呃微信。爬虫哪些页面你能爬得到?那星号呢?代表的是所有的页面,而如果说我们不想所有的页面都能够被爬取到了,你就去设置你想要被爬取页面的路径就OK。
06:12
啊,下面呢,也可以去带一些参数等等啊,但是我们STEM呢,通常啊这样写就够了,就是说所有的页面都能够被爬取到。哎,是最好的啊,所以呢,关于STEM的配址呢,啊,里边的东西呢,那对应的地址呢,我告诉大家你可以去哪去找啊,那是剩下的东西呢啊,自己看一看就好了,而且你看这些参数都不是什么必须的参数。对吧,好,那这是这个,那除了map呢,我们再看一下啊这三个文件。哎,这三个文件,一个JS,一个杰森,一个微信SS,那么他们三个有个共同点都是以APP命名的,对吧,那当我们看到这个意味着什么。
07:01
哎,学到这里呢,大家要有一点感觉啊,我们在V和RA中呢,我们最外边的组件呢,通常都会命名成APP。对吧,而现在呢,我们又看到了我们全局下边。有三个APP的文件。那这些文件,或者说view里面的组件,它必须叫APP吗?你想想view里面的组件,最外边的组件它必须叫这个吗?哎,不是的。那这个APP呢,它其实就是我们说这个什么呀,Application它的缩写。Application,那这个单词代表的是什么应用的意思?哎,他想要表达的意思就是说,哎,这个组件代表的是整个应用的主主件。啊,最外边的组件我们要渲染的话呢,也是去渲染它。好,那就是这个,那现在我们看到这个APP呢,同样也是想表达跟整个应用相关的内容来,那现在呢,我们先去看GS啊。
08:05
在这里打卡默认有很多代码,这些代码我们可以先不用看,因为到时候呢,我们会自己去写啊,自己去写,那我先把它收起来啊,上来我需要大家知道啊,记住一个点,首先我们在全局的目录下边必须要有一个ap.gs注意在这儿的名字不能换。然后呢,在当前的JS文件里面,必须要有一个首字母大写的APP调用。哎,那么它的作用呢,是用来去注册整个小程序应用啊,注册整个小程序应用,这是它的作用。对应的官网的出处呢?在哪儿?我们来到官网啊,在这儿还是框架这一块啊,在框架接口这里,大家看来小程序APP里边就有一个APP来我们点击过来看一下啊,你看啊,APP调用它的作用呢,注册小程序并且呢,告诉你了啊APP呢,必须在app.gs中调用,并且只能调用一次。
09:16
否则的话呢,会出现一些无法预期的后果,说白了告诉你。你不能乱写对吧,你乱写的后果啊,概不负责。好,那这是这个啊。除了这个JS文件呢,还有一个比较重要的文件啊文件,它也是一个B区的文件,叫APP点杰森。那么abp点接S轴。答法啊,首先在外边呢,它是一个对象,那么对象里边呢,默认的其实有这么几个选项啊,几个选项。来,我们先来看第一个啊,Page。那这些选项是干嘛的呢?你可以看官网呗。在框架最上边啊,这有个全局的配置,大家看啊,小程序的根目录下有个APP的JS文件。
10:05
那么它呢,是一个阶层的对象,有以下的属性,那在这里呢,说的很清楚对吧,那我们接着往下来看啊,那在这里是针对于所有属性的一个说明,其中你看这不是配吗。哎,那这个P呢,后边的描述是啊,用于放置我们页面路径的列表,那么对应的类型你看啊,是个数组,数组里面是什么呀?字符串说白了是个字符串类型的数组。哎,那这个大家看,如果是你看完这你还看不懂,怎么写,你看啊,我移上去,这是不是一个小手。说白了,我这是个链接,我可以再访问他走。你看当我一点击啊,其实呢,它是从这个位置跳转到下面的指定区域。啊,那这个咱们之前讲过啊,还记不记得怎么去实现它呢。
11:01
啊,并且你看我们的URL啊,这个地址栏里面呢,多了一个井号。哎,对,这是用的什么毛链接。对吧,那这个呢,咱们上来也讲过的啊,好,那在这个下边呢,有对应的说明,你看这里边放置我们页面的路径,这不举了个例子吗?配下边你看啊,这个文件夹下有两个文件夹,一个叫index,又叫logs,那么这里对应的就是它页面的。内容啊,四个文件,这个上来我们是不是说过呀,所以大家看啊,接下来的路径,那就是page下边index下边的index。注意在这里前边没有像我们之前认知的一样加根路径啊,而且在这里你看看他写的这个。也不能加根动机啊,必须不能加在这儿,加的话它是会报错的啊,那就是这个。那在我们的项目里面,大家看啊,Page下边,哎,这不是有两个页面吗。
12:03
对吧,Index和logs,所以对应的有两个页面的路径。哎,那这是第一个啊,很重要的一个选项,那第二个叫温,哎,这个豌豆是干嘛的呢?我们再来到官网来看一下,在这里。它呢是用于配置我们全局默认的窗口表现,对应的呢是一个对象。那在这里来过来。呃,这个窗口的表现这一块呢,我觉得这些单词大家应该是能认识啊,而且在这里你这些你看啊,我觉得这三个就够了,上面这个background什么text style没啥用啊,我们就用这三个就够了。导航navigation for background color导航的背景颜色。哎,默认是什么白色,那这个时候呢,正好我给大家证明一下,哪个是我们窗口看到,我改一个颜色保存一下。
13:03
诶,你会发现上边颜色是不是变了,那这一块呢,就是我们的窗口啊,其实就是真机上手机最上面那一块。对吧,那对应的这个啊,Title text,那这对应的是什么?是它窗口的文本是这,哎,当然了,你也可以去修改它啊,比如说我们来一个什么呀,艾特啊硅谷,我再保存一下,大家看窗口的文字是不是就变了。那再往下呢,哎,是文字的样式,这儿呢,其实主要是去设置它的字体颜色,你看默认是黑色,假如说我来换一个白色。哎,这个时候大家看啊,我们窗口的这个文字的颜色是不是都变了,没有问题。好,那在这儿呢,有一个小坑啊,看着现在呢,我们用的是这种16进制的表达方式啊,如果说有的同学说我不喜欢这种方式啊,我想换成比如单词这种啊,我换个red。
14:07
这个时候大家看啊,我写完了。啊,我也保存了,那我怎么知道我保存了,你看着啊,当你小程序里面的文件啊,如果被修改过没有保存的话,那对应的文件上面会有个小绿点。哎,呃,怎么保存横点的CTRLS。它就保存了,这个时候大家看颜色并没有变。嗯,如在小程序里边,如果说你写完了以后,他并没有像你预期的。那样展现对应的效果,那这个时候你要打开对应的调试器,然后呢,来到cons日志的地方看一看啊,看着我,我把这个换成我们的红色。保存。哎,这个时候大家看啊,这有一个报错提示啊,说red is not his color,它呢不是16进制的。那现在这个呢,已经很友好了啊呃,早期的话呢,小程序这些提示并没有这么完善啊,那个时候呢,你只能是去看官网啊,看他的描述来点击一下window,我们看一下这个背景颜色这一块啊,看着类型那就是text color。
15:16
然后呢,默认值是这个,它并没有说有其他的可选值啊,所以在这里你要注意啊,这个窗口的颜色呢,我们只能是啊,用这种16进制的表达方式。啊,还有一个小坑啊啊,可能有的同学说,哎,我不想用白色,我想换一个,比如说红色对吧,Red来嗯。保存一下,这个时候大家看啊,这又说了字段呢,呃,必须为黑色或者白色。啊,也就是说现在我们窗口文字的颜色呢,仅支持back和啊,一个是black,一个是right,对不对。那这呢,我们要注意啊,现在呢,我们把它换成白色。
16:01
好,那就是这个来继续往下看啊呃,Style VR,那这个VR呢,包括这个style呢,指的是小程序组件里边会有一些默认的样式啊,选用的是这个版本,那这个呢,我们可以不用管它。那再往下看啊,Site map location,那这个呢,也好理解啊,Site map的本地位置,注意这呢,就是告诉你去根目录下加载哪个文件对应的就是它呗,哎,这两个是对应的。好,以上呢,就是AB点杰森里面的这个描述啊描述。那在这里呢,有一个小问题问一下大家。现在我们是有两个页面对不对,那现在上来其实显示的是哪个页面是index。这个log。呃,在,但是我们没看到对吧,那我怎么上来就显示log呢?凭什么上来显示大夫他是怎么做到的?
17:05
现在大家看啊,它能加载到index,是因为小程序默认会去找pages数组中的第一项。如果说。对,你想要上来写是logs,你可以把它呢提到上面,注意啊,这个时候千万不要写错了,那把逗号挪到上面,下面这不能有逗号,有逗号的话,你看着我打开调试器,这就会有报错。对吧,因为现在是个杰森的文件,把这个逗号干掉,再保存一遍。哎,这个时候大家看啊,这呢就是我们的los页面。好,那这是这个,那除了这个呢,小程序里边啊,我发现它又新增了一个字段啊哪呢,这。叫什么叫try pity pass,就是小程序默认启动的首页,哎,也就是意味着现在我们可以通过这个来指定我们默认是不是打开哪个页面呀。
18:00
嗯,没问题,你也可以单独指定啊,也可以说你很明确啊,你比如说我现在呢,就是要启动index,那么index路径就应该在它的第一个位置啊,很清晰对吧,那这是这个我们保存一下,它应该又加载的是我们的。主页呗。啊,那这是关于APP点阶层啊,也就是说我们全局配置文件的一个说明。那么再往下啊。B点微信SS,那这个没什么可说的,跟我们之前写CSS一模一样啊,在这里呢,大家能看到啊,你看它上来是不是就用了flex布局啊。哎,没问题,好。在这我得问大家一下,AB点微信SS是用于放置钥匙的,那你看啊,我的页面里边也有钥匙文件。也有自己的样式文件,哎,那这个时候你觉得什么时候我会在这儿去写样式。对吧。
19:00
哎,没毛病啊,在这儿呢,我们需要放置的是什么呀?放置的是我们的公共样式文件。嗯。哎,是这个啊好,呃,那除了全局的啊,我们去看一个页面的吧,来我把这些关掉。看一个就够了啊,因为剩下的都一样。那一个页面里面你看。哎,最完整的就是有这四个文件,结构,样式、行为,包括页面的局部配置文件,来我们看一下这个结构。哎,现在呢,我给大家打开啊,我先把模拟器关一下,看的清楚一点。在这里大家,哎,乍一看好像是,诶,这不是H嘛标签吗?可惜可是呢,你仔细一看啊,像这些,这很明显并不是我们H5的呃,标签。那这是什么呢?这就是我们。小程序为我们提供的一个一个的组件。那么对应的组件啊,很简单,像这个view,它呢,等同于div。
20:04
在用于布局的是个块的元素,那这个到时候我们用的时候啊,咱们再去详细的说,你像下边这button啊,这应该是都能懂啊,我们先有印象啊,那这呢就是一个的组件。在这里。除了结构呢,你还要看什么?看样式啊,大家看这样式,这是不是都是用class类的形式呀?啊,那我强调一个事情啊,原先的小程序里面,你会发现它清一色的都用了类。哎,去管理去写它的钥匙没有ID,在这里也不能用ID啊,注意我们都用class类。OK,那这是这个。呃,看一下GS。GS里边呢,也有很多的代码,这个到时候我们会自己去写,先有这个概念,那刚才我们在全局b.GS中,我们说有个B调用。
21:01
而它的作用呢,是注册整个应用语义化很明确。那现在呢,在页面里边,诶,我们看到有个PE级调用,那那大家能不能猜出来它的作用是干嘛的?想想啊,要学会举一反三啊。首字母大写的配置调用,哎,没毛病啊,它呢是用来注册我们当前页面的实例。啊,其实就是注册当面。最终我们通过实地去管理我们的面门。哎,那这是这个好,那再看这个配置文件啊,配置文件在这里边,注意啊,它还是一个阶层对象,只不过这个配置文件呢,针对的是当前这个页面的配置。只服务于他而已。啊,那里边这个use components呢,这也是新加一个技术啊,就是自定义组件啊,这个在我们项目中呢,后期咱们会用到,用到的时候呢,咱们再详细的说。好了,以上呢,就是它初始化项目的所有文件的一个说明,哎,大家先有一个印象,那之后呢,我们就会动手去写里边的代码来,那我们这节课呢,先讲到这里。
我来说两句