00:00
Hello,小朋友们大家好,我是代码哈士奇啊。从今天开始呢,呃,我会每天,呃如果没有,如果不放歌词的话,我会每天给大家,呃更新一个视频啊,今天是第一天,嗯,我们讲一下这个用APP云开发。啊,我们按照这个PPT讲啊。呃,对外课程大纲以及环境部署。当然我们这个基础入门,这是这算基础入门课程啊,讲完之后我们也会附带一些实战。然后简介什么是UNAPP,为什么要用UNAPP,以及你要熟悉的这些网址。什么时候UN Apple呢?看官网介绍哈,它是一个使用vivo.gs的开发,一堆一堆,也就是说它是基于VIVO的,VIVO的他他可以。一条代码变成十个平台啊,这就是这就是为什么要用它对吧。
01:02
还有就是嗯,你要熟悉的网址啊。就是底下就是这个uf的官网,呃,因为你要查一些API,呃,组件啊框架对吧。配置箱啊什么的,对吧,还有就那这些。教程啊,官方已经也写的非常详细了嘛。然后。第二个就是第二个就是UVUV的那个。网址啊,这就是一个非趁看的组件嘛。啊,你看这些非常好看,我你看一下这个。看还有这么多功能对吧。很多东西不需要我们写了,他就已经写好了,我们可以连带用嘛,对吧。第三个就是。啊,这个差价市场啊,UN差价市场。那个它不止用UN。但是你可以在里面搜到UN的插件。
02:00
就就是别人把车轮子发动机什么都造好了,哎,我们需要组装一下就可以了啊,就是你一天用不了就能开发一个全套的小程序,还能再登录啊,微信登录啊,对呀,手机登录免费到什么都可以的。就是。用别人的东西造自己组装自己的东西,对吧?嗯。它的开发时,它它能大大的那个减少我们的开发时间啊,我们一个人也可以在很短的时间内开发出来一套完整的系统。好,那我们开始今天的课程。啊,尤其是入门课程,我们也这个课程也不会讲太难的。嗯,看完之后大家应该能大致的学会如何使用用的APP去开发东西啊。本大纲,这是本节大纲,就俩。构建查、抄、学一体的学习方法。然后是环境部署,为什么要就说查抄学习题呢?我们辍学的时候嘛,我们肯定有些东西不知道嘛,你也不知道怎么写,你就要在查。
03:03
组件,比如说我要加一个进度,就进度条,那就看到看到一个progress对吧,然后。这里面有很多对吧。全都写好了,可以直接把它copy下来,对吧,直接复制吧。高端的代码往往只需要最简单的思维方式,所以我们也可以把它复制进来啊,这等会再给大家讲中创建。这些项目。然后那个抄就是不是嘛,所以学就是你抄完之后,你才去练习如何学,对吧,包括还有一种抄的方法就是。你把它项目给运营出来啊,然后看到他的样式了,你一样也可以抄走这个东西,我给大家演示一下如何去更好的抄别人的这个模板东西,好我们接着看。这这是我们会不会讲实战啊,这些以后都会讲,也可能会增多。也可能会根据就是有些不咋难的,大家都可以实现的,就就不讲了嘛,对吧?啊,这个尝试已经还是这个云开发,这个就是做中二端的嘛,嗯,回头会尝试一下用那个UN和他一起开发,对吧,也不起开发,就是用UN做后台嘛。
04:18
开发环境。就是需要这些,这里我给大家准备了一个网址啊,有点感冒,这个网址呢,就回头会贴出来,贴到视频下方。这个第一个就是node下载地址嘛,下这个长期支持版。当然你也想这个。当前发布版最新功能你也可以嘛,对吧,也可以下载。然后是HBX,就是我们的开发工具嘛。就是没有工具怎么去打石头呢?对吧?所以这是一把非常锋利的斧,我们要把石头捣烂,发现里面有一块小程序。下载这个APP开发版技术APP开发版标准版会少很多东西的,对吧,后来才开始下载还慢对吧。
05:03
所以就我们就直接下一个APP开发版。然后就是微信开发者工具,根据个人选择,如果你是那个。开发小程序的话,小程序的话,那你肯定需要下载这个对吧。建议下载一个稳定版的。然后呢,我们继续还要。就是如果你需要开发安卓,安卓开发安卓的话,安卓程序或者iOS的话,安卓的话建议你下载一个。就是夜神模拟器或者逍遥安卓,这个网上可以搜到逍遥安卓。啊,可以说一把,然后这个还有夜神。啊,夜山模拟器,这非常好用的对吧,没必要下那么高级复杂的,然后对吧。这个逍遥安卓的端口是21503,夜神的端口是62001啊是默认的啊这有什么用呢?如果你不设置的话,它是不能换气的,对吧,不能就是连接,连接的话你找不到端口对吧。
06:03
怎么设置就在这个。啊,你把SBX下载好之后呢,大概就是这样对吧,找到设置。原有运行配置就是安装问题端口。我这里用的是夜神的,你看62001对吧。然后还记得还有一点就是。微信开发者工具呢?你下载好之后安装好了哈。嗯,你也要配置一下它的运行,运行这个路径,还有一点就是我给大家讲一下,打开,我先打开这个开发者工具。啊,我给你开发的工具啊。感冒。这上一次的资源哈。呃,这里看到这个设置没有设置了吧。通用设置。里面有一个安全。
07:00
你需要把那个服务端口给打开,不然这个HX。运行,运行到小程序之后,它唤醒了换不了的,所以要打开这个。嗯,好了。呃,然后。关掉它。然后继续。其他小程序开发者工具也是类似的,你下载好之后呢,如果需要你放开端口就放开端口嘛,就看下它的安全,然后在设置里面配置同样的。人有很多对吧。啊,我们继续讲。啊,云服务空间这个就是。我们用到UN的时候,其实我一开始叫UN,还有UN都是叫UNI,我觉得是用用ii,后来发现。别人抢的时候好像是UN,我就改了。还不好改造一开始,所以大家就就就按那个用APP来吧,啊,云服务空间就是需要。
08:02
它是可用的东西。需要开通一个云服务空间,这样我们才可以去开发的一些东西,对吧。这个我先不讲。我们先来创建一个项目。很简单对吧,文件。新建。项目。选一个。哎。Fi。建议大家不要这样,建议大家不要这个。呃,就是中文拼音和英文混合,要么你用中文拼音,要么你用英文。那我就来个。比。B。好吧。加个S。这个大家看看的是一般自体内的话,那创建的时候启用就可以了。然后就可以创建嘛。嗯,创建完之后呢,它让你绑定对吧,绑定。这个时候你如果你没有的话,肯定就没有对吧,这个你点新建也就可以了,它会给你弹出来这个框。
09:04
然后你新建一个。阿里云腾讯云可以啊,腾讯云只有一个是。啊,就只能开一个一个免费的,阿里云可以开多个免费的,而且。那个前端代码托管那个大陆也是不说费的。那就是我们连创业项目和云服务空间的讲了,对吧,那我们接着讲底下。整合UUI就是我们自己。审美什么的,肯定不能和大家一起,大家一起的审美,对吧,对吧,十个人认为这个好看。和你认为的一个好还是不一样的。所以。我们就整合u will。也非常好看的样式,对吧,这里还X也那个好像有有有有的模板,你可以创建个模板。这里有一个UV的模板对吧?UI你可以看看它是什么样子的,这里我已经创建好一个了,所以这里就不创建了。
10:02
就是讲如何一个空项目如何整合呢。首先我们找到这个UV。You will,这个will you come。在这里有组件,它有模板。对吧,有很多模板组件,还有资源,这里好,我记得好像有一个空白空白工程对吧,你包含它的空白工程,你下载就可以了,运行即可,这是一个方案。还有就是。如果你下载好弄了。你可以在这里那个。安装的时候使用node。那就是。啊,看一下NPM安装就这个。如果你没有弄到的话,你也可以用他这个,他说的还有一种方式。就是直接去拆件市场。然后把它下载好之后,根据他这个。你给他烧就可以了。
11:01
然后再配置就是,嗯,如果你是下载插件的方式呢,你就用下载下载方式安装的配置就可以了。如果你是NNPM方式中的配置呢,就NPM,那我们走APM来试一下哈,就走APM,因为我喜欢。我叫什么东西都是叫,都是都是字母拼起来,然后开始那个新建一个。啊对,我们加好了是B跟B是吧。这里呢?我们选中这个。在使用命令窗口打开所在目录,如果你装好了node的话,它是可以直接执行NPM的。也可以直接执行的好。我们继续讲。他给你这里写好对吧,那我们就装对吧。他。咋会什么反应?哎,我好像装错了,不对,删掉了,这是关于sts,这个是。
12:06
这个不,这个不。装错了,不好意思。装错了,装错了。B和B是我创建的一个势力的功能,对吧,我们就还是我们不用这个,我们重新来创建一个项目。0555月一号嘛,我创建这个创建那个默认模板的话。呃,UN的启启用也可以先不启用。毕竟整合这个对吧。还是从这里开始,那个我们使用这个命令号窗口打开得13分钟。把这个复制进来,就在官网提供的这个是吧,安装。复制进来之后回收一下就可以了,看它会发生什么。
13:10
我看一下啊。在这个外部资源管理器打开。如果你如果你没有安装上的话。他这里是没有安装的,你看他这里会他会告诉你。没有发现那个派S那个文章对吧,那我们怎么办呢。执行这个命令。一路回车就可以了,这样就完成了,我们再次执行上一次那个命令,安装一下。啊,这里就已经有了,对吧,有有有暗,这里就已经下载下载进来了。按照他的步骤,一步一步走。看文档是一件非常重要的事情,对吧。他说,在这里跟目录的慢点解释中引路。浪漫GS引入复利加就可以了。
14:01
然后。在根目录的这个文件中引这个文件。引入此文件就这。一下。看到了吧,有这个文件。我英文不好,就我给大家读了很多东西。如果它如果提示你没有什么插件的话啊。你就可以了。引用基础样式,这个你可以直接复制,直接复制进来。那个。APP点没有。好,就这样进来就可以了。看看注意要给这个加加这个属性哈。配置这个组件模式。也是复制哈,复制键就可以了,对吧,高端代码就慌,只需要自己复制的,复制方式不是思维方式,哎呀。我们找到这个特先在这里。CTRL配置代码格式化好看吗?格式化要代码CTRLK。
15:01
这就已经配置完成了。如果还有一点就说,就是如果你的项目正在进行中。你配置好之后发现它没有,它发现有了组件之后没有,没有效果,那你就要重启一下。就是重新变一下你的项目。啊,配置好了,那我们运行运行一下看看吧,运行一下。运行到浏览器。在这个同时呢。给大家看一下那些它的组件。啊,输入表单组件啊,还有这些倒计时数字滚动啊。啊,启动完都它都非趁好看是吧,还有那。对对对,一堆一堆的,大家先不给大家抢,你用的话自己看就行了,我们这里就是已经编辑好了。然后点这个,嗯,你可以按F12,也可以按那个右键检查检查嘛,我们用的是火狐点这个。就是你看这这有很多手机型号对吧,我选。
16:03
选一个,呃。好,我们我们选择它对吧。如何检测一下我们是否安装成功呢?嗯,找一个组件找一个。卡片组件,那个卡片组件吧,我们复制一下,复制进来。是到那个。啊,就是就一个页面对吧,现在我们复制进来就可以了,直接复制进来复制进来。把这个呃。逻辑再买个一定给复制进来。就是思维嘛。擦亮变异,我们看一下效果。这个时候呢,你发现和他不一样对吧,人家为啥这么好看,我们呢,为啥这么丑这么差。这要找到大家,这要看到这个。
17:02
样式我没有复制是吧,但是在很多时候呢,它上面提供的这些东西就是和他这个。你看到的和他代码是不一样的,代码提供的不是可能不是这一个,那这个怎么办呢?等会给大家讲一下。啊,不好意思,复制错了啊。看这这个时候是不是就对吧,不一样了对吧。那如果有,如果就是很多样式哈,我们点那个内衬样式。很多样式啊,你想跟他一样的话,比如说网板里边的这些东西。还有这些工具,这里面这些东西哈,还有。这些。样式啊,你要想复制的话怎么办呢?你拿来用的话怎么办呢。我们这里。就刚。给大家说的新建一个项目,就是比如说你是。
18:00
又view UI你新建啊,新建新建一个啊,我们我之前已经创建好了,创建好这里哈。你可以直接把它把它这个运行知道吧,我们也运行到浏览器。等待是一个非常漫长的过程。看问题还是要讲的啊,没了。这个课程是,呃,针对你会一点这个H5知识的。如果你不会S5知的也没关系,等下我给大家讲一下。如何就是快速入门?啊,你就按照固定模板就抄就行了,对吧。固定格式我这样,你看它不是有这个东西吗?注意看这个地方它的目录这个路径啊。比如说你要抄这个倒计时这一块。然后或者要朝这个。
19:00
呃,我找到表单组件啊。表单。啊,对吧,人家写的这个非常好,你看还有这东西想怎么办呢。看到这个没有pages,他farm看看我们找。Page a。这个里面记住了吧,你可以直接给他整体复制走,整体复制走。我们不知道我们的里面哈,我找找找找我们的里面,应该是我们的这个吧。我看一下啊。看就有了对吧,就是一模一样对吧,很多时候想要别人的东西就该抄别人的,然后你把它拿过来之后呢,你不需要哪些东西,你就给他改掉。比如删掉一些对吧,或者更改一些,这样就很多你能就能很快的完成一个页面了吧,就开发了对吧,就是拼起来对吧,对吧,可能也是组件对吧。呃,我们这个整合UVIUI就讲完了,那我们讲一下,如果你就是对这个。
20:06
还有就前端知识比较薄弱的,你怎么去快速入门呢,我们找到这个UN的官网啊。云南有官网,这里有教程,这是第一,这是你可以看对吧,很多东西它都有讲的。然后组交的时候也是,这和微信小程序组件是一样的,如果你学过微信小程序,会开发微信小程序入门,这个是非常快的。也是复制粘贴去测试,想用什么东西的时候,就找一个看看,运行一下它的跑一下,就官方给出的示例什么效果,然后你再去拿走用。还有比如说你要用API的话。你就。我们随便找一个啊。比如说设备系统信息。他给他一给他一大串,你就学他的这个。
21:01
记住这个东西啊,就是打印打印一下运行,打印运行结果对吧,你可以把那个获取信息的这个is打印一下,看它结构。这等一下跟大家说一下。如果你不会。这个唯唯有基础啊,也没有相当基础,那你就什么呢。因为他这个你发现没有他们这个。页面格式啊。比如说我们我们新建一个页面,点配现个页面叫也叫text。团团建啊啊,这里结构就是这样的,你只需要记住在这里写。那个。啊,就是页面知道吧。就是把这些组件。把这些组件啊填充进来拖把它复制看到没有,它都是这个结构,对吧,在根根那个根结构VIVO下面继续把这东西填充进来,记住啊,一定是在这个下面。必须有一个啥的在最外层,就就这台的底下。
22:01
然后你把那个复制进来就可以了,用的话。啊,你自己写的话也是在这里面写。这就是如果你不想到基础,你这样写就行了,写多了之后你你一样也会对吧,经验都是一点点积累的,等你会了之后,你可以再反过来去看遍基础,这样你可以更加的加省你的印象。当然你也可以从这个基础开始一点开始啊,我要学啊,去MM啊,我要学这个CSS,我要学这个。加script对吧,JS。学完之后再一学这些,你也会门很快的上手很快。这是两种方案。包括这些这些也是包括看看这个有VIVO,他他给你提供样式,人家也是有代码的,你直接复制复制走它的结构是不是也都是这样,对吧。然后。这里面就写这个,对他就是数据啊,你写这个类S,你在这写个数据。啊,这里用那个词串用SS。
23:01
你在这里写一个那个。我还用我。数据渲染就用那个就这对吧。当然建议你还是了解一下。就是根据他这个课程。介绍里面那个。呃,VIVO教程里面去写一下这个基础啊,最好学下这个基础,尤其是这个绑定手机绑定啊什么的,这样你能更好的去开发程程序,对吧,有时候你。你碰到一些问题,往往是没有基础。那个我们就讲到这里。包括就是你如何去更好的学习使用API呢,我就举个例子,举一个例子啊。这里官方不是给出了吗?他要获取个人信息对吧,获取系统信息哎。有同步接口和异步接口,我们这里用同步接口测试一下啊,我们同步接口测试一下。我把这个页面。
24:01
替换掉啊,简洁简洁好看对吧。先复制一下它是这个样子对吧,这个S数据渲染出来了。那我们。把这个给复制一下。当你不会用的话,底下也是介绍的,看到没有,你也可以把这个复制一下也可以对吧。K7直接整体复制过来,那我们不整体复,我就复制这一行。比如说lo的。加载的时候啊。这生命周期嘛。建议你要学一下,也也是在这里面可以看到的,我们继续讲下。好。如果你不知道他他结果是什么,那你就打印一下。之类都有吧,啊,比如说我这里想介绍想拿到这个系统信息,对吧,那我们就。才能启动信息对吧。啊,这就拿到的拿到了对吧,所以嗯,要多练多学,就是我们学的。
25:05
查抄学习题的。那下节课我们也不废话了,下节课我们就开始。慢慢的,慢慢的去做一个做一个项目。先讲那个云海,先先讲那个的。嗯,然后我们讲。UN的,因为学und的话。还是先把你口味的过一遍最好。那就是这些子弹里面。云函数要云存储啊,对吧。嗯,好,那这节课就到此结束。
我来说两句