00:00
大家好,在学习UN help之前,那针对没有接触过微信小程序的同学,我们提供几节课的课程来让大家快速入门微信小程序,那如果对微信小程序已经掌握的比较好的同学,可以跳过这几节课程,那首先我们来到微信公众平台,他提供了这么几个账号分类,哎,有服务号、订阅号和小程序,那我们不管开发服务号、订阅号和小程序,都是要先注册账号,那我们来注册这个微信小程序。点击立即注册,那注册的时候选择你要注册类型,选择这个小程序,填写完对应的资料之后,就可以完成微信小程序账号的注册,那注册完成之后,我们就可以进入到小程序的一个管理后台来管理我们的小程序,在我们开发完小程序代码之后,就可以把代码发布到微信小程序的这个平台,然后我们的账号如果认证之后就可以去发布我们的小程序,那如果我们要快速开发的话,可以去申请这个测试号,那这里呢,我们就先跳过。接下来我们来看一下小程序的官方文档啊,还是悬浮到这个小程序上面,这里有小程序的开发文档。
01:04
这里对小程序做了一个简单的介绍,小程序提供了一个简单高效的应用开发框架啊,以及丰富的组件及API,帮助开发者在微信中开发具有原生APP体验的这个服务啊。那我们已经使用过很多小程序,大家都知道是怎么回事。啊,在开发微信小程序之前,我们要先下载一个官方提供的微信开发者的一个工具,在微信开发者工具里面去开发和调试我们的小程序,那这里我们找到这个下载这一块。那下载呢,我们就下载这个稳定版本,就可以下载你对应系统的下载安装完成之后啊,它的界面大概就是这样子,然后在这个开发者工具中,我们可以去创建我们小程序的这个项目啊,当然我们在这个微信开发者工具中也可以去开发我们的公众号项目。那我们点击这个加号来创建一个小程序项目,这里输入我们的项目名称,这里是我们项目存放的目录啊,我们可以把我们的项目改成自己的项目所存放的目录,这里我就默认就好,那这个是ipad。
02:03
ID呢?如果我们注册了微信小程序账号,在小程序的管理后台是可以看到IID,那我们填上就好,那如果我们想快速的去开发,也可以直接使用测试号,那这个测试号是怎么来的呢?会根据你登录的这个微信来生成这个测试号,那之前忘了给大家说了一步,在我们安装完这个开发者工具之后,在第一开始一进来的时候是要使用微信扫码进行登录的,登录之后啊,这里会显示你的这个头像,你的账户信息,那我们直接使用这个测试号。好,那接下来可以选择我们的这个开发模式啊,小程序就好,以及这个开发的这个语言啊,那我们使用GS。接下来新建我们的这个项目。新建的项目打开之后啊,大概就是这个样子,它分三个区域,一个是模拟器区域,就可以显示我们项目的运行的一个啊情况,再然后是编辑器,我们可以直接在这里去编辑我们的这个啊代码,那还有一个区域是这个调试器,可以在这里进行调试,它使用的是啊谷歌的这个内核,所以大家可以看到这个调试工具和谷歌非常相似,对吧,那只不过这里啊,这个元素的节点变成了WSML啊,还有这个network以及后面这些都是一致的啊,当然多了一个update,可以看到我们应中所使用的一些数据的一些情况,在consl中可以看到我们打印输出的啊信息啊,比如说使用这个cons输出的信息。
03:24
那如果我们更改完代码之后,点击这个编译,可以在模拟器中看到我们最新的啊项目运行的一个情况。那当然我们也可以在设置里面找到编辑器设置,把这个呃,保存时自动编译给勾选上,这样当我们修改完代码之后,只要按这个CTRL加S保存代码的时候,就会自动给我们进行编译啊,比如这里我写一个空格,然后保存可以看到它会自动去编译。那接下来给大家介绍一下微信小程序的目录结构,首先看第一个目录是pages,那我们看这个诶目录名就知道,它是放我们页面的一个目录,点开之后可以看到它有两个页面,一个是index页面,就是我们这个首页,那还有一个是logo页面啊,就是这个日志啊,点击可以来到这个日志,这个页面在这里会显示页面的一个路径,那返回又来到这个首页。
04:12
好,那。这个啊U这里面呢,是我们自定义的一些工具,或者我们使用的一些啊,第三方的一些工具就可以放到这个目录里面啊,可以看到这里面它只是提供了一个时间格式化的一个啊函数,我们把这个给关掉。啊,把这个空格啊给删掉。那接下来呢?Us这个目录介绍完之后,我们说一下这个f. GSf.GS是小程序的入口文件啊,就是小程序的运行是先经过这个文件的啊,在这个文件里面啊,我们可以啊做一些啊一些初始化的一些操作啊,比如说获取用户的啊,这个登录的这个信息等等,那接下来是APP点杰森,这是全局的啊配置文件可以在这里配置页面的路径,以及这个窗口的一些表现啊。然后是app.wxss,那这个是全局的样式文件,在微信小程序中啊,他把我们之前啊的前端的这个点CS的文件是换成了点V叉SS这种结尾啊,但大致语法都是一致的,那在下一个文件是啊project config点这是我们项目的配置文件,就是整个项目的配置文件,比如说我们的项目的名字,以及我们啊这个啊应用的啊这个IID等等都是可以在这里配置的。
05:25
然后最后一个是啊,Set Jason在这个文件中啊,我们可以配置哪些页面,可以被微信的搜索引擎给输入啊,以及它的输入的一个规则等等。那接下来我们来介绍一下pages里面的啊,这个目录首先看到它里面的啊,这个目录,一个目录就是表示一个页面,那目录点开的话,又可以看到目录里面有四个文件,分别是GS,杰森以及啊WXML以及WXSS,那这四个文件什么呢?首先是JS文件来写我们的页面的一些交互逻辑啊,包括我们页面所需要的一些数据都可以在这里面去定义。那接下来是index,点杰son,那是这个页面相关的配置文件,我们可以在这个文件中去配置这个页面相关的一些配置。
06:08
那这个是全局的啊,那接下来呢是index.wsml,那这个就是我们写这个啊呃,Al的啊,就是我们的组件的代码的这个地方,在这里面我们可以使用啊微信小程序提供的一些组件去构建我们的页面,那下面这个index点啊,WSS就是页面相关的样式文件,可以在这里面写我们页面的啊需要的一些个样式。那在这里面写的这个样式呢,只能被这个页面所使用啊,其他页面是用不到的,好可以看到每个啊页面都是有这么四个文件,那这个目录结构就给大家介绍完了,大家可以看到啊,新创建的微信小程序项目给我们提供了一个DEMO,那为了方便接下来的学习,我就把这个DEMO先给删掉啊,首先从f.TS里面,那这些东西呢,我们都不要,然后自己来写一个这个APP啊,把它的基本的结构给写上,那接下来呢,是。
07:03
呃,全局的一个样式,哎,我们也不需要,那然后是这个页面啊index.gs这里面呢,我们也不需要,然后呢,页面的话,我们是使用配置来创建这个啊页面配置啊,使用这个car的配置。接下来这个杰森,哎,就放这,然后是呃。组件啊组件我们也先全部删掉,样式也全部删掉。然后是一个logo,点击这个页面,我们不要把它给删掉。删了这个页面之后,一定要记得去这个。啊,配置文件中把这个给删掉,要不然它会报错啊,它会找不到这个页面啊,注意这个是个标准的阶层文件,在最后一项的时候,你不能有逗号,如果有逗号他也会报错啊,我们把这个给最后一个逗号给删掉,这样的话就是比较空的一个项目,接下来开始写我们的内容啊,我们先把这个啊全部都关掉,找到我们的这个配景在。index.wsml文件里面来写,哎,我们的组件标签啊,来看一下微信小程序的官方文档。
08:06
找一下这个啊组件这里,那什么是微信小程序的组件档,哎,实际上就是啊,有点类似于我们之前写A的时候A的一些标签,只不过它是微信小程序提供的啊一些组件标签,那比如我们使用的这个div,在这个微信小程序中,它就是叫这个啊VI哎视图容器,那比如我们在之前写al使用到的这个SPA,那这里呢,是这个T,好,那关于它的这些组件呢,这里就不一一给大家去讲解了,大家用到哪个自己去看一下就好了,那这里我们来简单的啊写一下写个啊view。写掉啊hello,哎,保存之后可以看到自动编译之后,这里就可以出现这个哈,啊,那这个是view view呢,它会自动去换行啊,有点类似于这个div。如果我们写的是这个啊,Tax它就相当于这个SPA,它是不会换行的,那我们这里写个A,下面再来写个B。
09:08
好,可以看到啊,A和B是连在一起的。那接下来可以在啊index.wxss里面去写我们的样式,那这里我们来写一个啊背景颜色。Background color。这个红色啊,然后我们在这个里面使用class来让第一个viewvo应用上这个背景颜色,还可以看到第一个view,它的背景颜色就变成了红色啊,可以看到,呃,这种写法其实和我们在al中写的是一样的啊,只不过是div变成了这个view,然后把CSS呢给抽离出去,它变成了WSSS文件,当然我们也可以直接在组件标签上面来写这个scale,对它进行样式的一个设定啊,这里我给一个color,让它等于啊绿色。
10:01
可以看到啊,这个文字就变成绿色,哎,当然不推荐直接在组件标签上去写这个啊,Style我尽可能的把样式都写到WSSS里面。那这两个文件我们使用完之后呢,那接下来我们来看一下这个GS可以在JS里面来写我们的啊业务逻辑以及交互,那比如我们在这个里面来进行一个啊输出。console.log输出一个。一接下来保存之后就可以看到在consl控台中有这个一类输出,所以我们在调试代码的时候就可以使用这个consl,然后我们输出的内容就会显示在consl里面,那可以在data里面去定义我们页面要使用的一些数据,比如说我这里定义一个name啊,等于这个啊,Tom,那我在这个页面中就可以使用双花括号来使用这个name,保存之后可以看到,诶,Hello Tom这个name就有了,那同样呢啊,我们这个页面所使用到的这个data里面的这些数据啊。
11:00
不管是静态的还是动态的,都可以在开发者工具端这个里面app.data里面去看到我们这个页面所用到的一些数据,可以看到这个name是Tom。那这个就是GS文件,它里面有很多的啊这个函数,那对应的都是它的这个生命周期,那我们在下一节课再来讲它的这个生命周期,接着我们再来看一下页面的这个啊配置文件,那在这里面呢,我们可以定义这个页面的啊一些配置,比如说要显示的这个标题,以及这个导航栏的背景颜色啊,以及这个文字的颜色等一等,那比如我们来改一下这个标题,那这个标题是为什么显示微信呢?是因为它在全局的这个配置文件里面啊。设置了这个哎,微信啊never吧,显示的这个微信,那我们可以在页面的这个配置中去覆盖全球的这个配置,那比如逗号,我们在这里写一个啊never get吧啊,它这个编辑器会有这个提醒,那这个text我们来改成这个hello,哎,可以看到啊,保存之后,编译之后这里就显示了这个hello啊,甚至你还可以定义它的这个背景颜色,那关于啊,页面相关的配置以及应用相关的配置都可以在文档的这个框架里面去看到,我们来先打开链接给大家看一下,在这里面可以看到小程序的配置以及全局的配置,页面的配置都是可以看到的啊,包括这个呃,S map的配置。
12:15
好,那接着来看我们的代码,回到我们的这个啊页面文件,那这里呢,只是给大家简单使用了view组件标签,以及这个text组件标签,那在最后我们再去找一个组件标签给大家看一下,我们来找一个表单组件啊,那就使用这个button吧,来我们直接写啊,先看一下这个文档,这里呢,有一个简单的描述啊,这个button就是这个按钮,对吧。接下来写一下我们的这个代码,Boton,好,然后写个文字按钮。那这个是它的默认的一个样式,我们通过它的一些属性可以控制它的行为,比如它可以用的一些属性有啊,调整它的这个大小,那我们来写一个这个size。写到它的属性里面啊,下次我们来一个啊迷你的迷你呢,就是一个特别小的一个按钮可以看到啊。
13:06
然后还可以调整这个按钮的一个类型,比如说tag啊们来使用这个类型的一个按钮啊。主色调的一个按钮,哎,微信的主色调就是这个绿色嘛。好,那这个就是微信小程序啊,组件的一个应用,那我们如果想要用什么组件,都可以去文档里面去看它对应的一个组件啊,每个组件的文档说明都非常的这个详细,好那这小节呢,我们对微信小程序有了一个简单的认识,那这小节先到这里。
我来说两句