00:00
大家好,那这节课开始是我们的最后一个章节,那最后章节我们主要讲一下各个平台的一个兼容性,以及如何在各个平台去打包和发行,那这节时候我们首先看一下啊,我们的这个项目啊,那我们写我们这个用APP项目的时候呢,我们一般在这个啊谷歌浏览器中去写,去去测试,因为在谷歌浏览器中啊,非常方便我们去调试,包括它的这个样式的调整啊,以及呃,控制台的一个信息的输出,对吧,以及我们的网络请求的一个调整等等,所以推荐大家在开发UN内APP项目的时候啊,使用这个谷歌浏览器去调试,比如当我们开发完一个功能以后,比如我写欢首页之后,那么这时候你可以去在各个平台去运一下看看效果,比如说在小程序中里面看一看啊,或者说在这个啊,安卓里面看一看,在iOS里面看一看啊,啊,那我们哎是把整个项目都开发完之后啊,现在来在各个平台去应一下看看效果,首先我们啊,因为我们这个UNAPP呢,它是多平台去应急项目,我们在保证多个平台它的这个显示效。
01:00
我都是一致的对吧?啊,那首先我们来看一下微信开发者工具啊,那微信开发者工具也是小程序,微信小程序它是我们用的最多的一个东西啊不,我们现在经常去接触到的一些小程序项目,也都是以呃微信小程序去多一些,像支付宝小程序啊,百度小程序等等的话,还是呃比较少啊,就是接触到这种项目还是比较少,不是说没有,但在我们的生活中,小程序啊,微信小程序是用的比较多的,那所以我们第一个呢,在微信小程去小程序中去测试来,首先打开我们项目啊,把这先关了啊,那这个呢,是我们在H5中去运行的一个啊,它的一个啊编译的一个过程啊过程,那我们要是在小程序中去运行的话啊,我们只需要点到这里,在这里面去运行,然后运行到微信开发者工具就可以了,那这里有两个概念说一下啊,说一下就是这个运行,还有这个运行是指我们开发阶段的一个运行。知道了吧,啊,那发行呢,是最终我们比如开发完了,想要去部署了再使用这个发行啊,他俩呢是呃,就是在编译代码的时候使用的机制不一样啊。
02:05
好,嗯,那接下来啊,我们怎么做呢。运行到这个小程序啊,运行到。这个啊,小程序开发者工具啊,当然你也可以点这个,点这个都可以。运行到微信开发者工具啊。啊呃,在运行到这个开发者工具的时候呢,你一定要确保你的这个开发者工具都配置好了,当然我是之前都给大家配置过了,对吧?啊主要是配置哪里呢?就是开发者工具里面的这个安全设置,一定要把这个端口给打开,对吧,那现在我端口是打开的,为什么我还是访问不了呢,你看。为什么我这边打开这个编辑失败呢,这1.1定要注意大家啊,一定要注意就是说。我们在运行的时候啊,他会给我们啊随机去分配一个。这个小程序的这个这个APPID对吧?好但是呢,由于之前我们在这里面啊,配置过这个小程序的,来找一下小程序配置有这个ID,所以呢,就导致这个ID和他要使用的这个ID不一致,所以就没打开,有时候你在运行阶段啊。
03:15
这个你要么就是配置和你的开发者工具里面都是一致的,要么就啊先不配置啊,先不配置,你不配置的话呢,他也会啊重新给你确认。呃,分配一个啊好等它打开。那我们来重新运行一下啊,重新运行。稍等一下啊。好,这时候你看我把这个呃IID给删掉之后,就可以看到明显的是可以打开了,对吧?啊,那因为我们的这是一个运行的一个模式,所以我们在这里面改完代码之后啊,我们在这里面改完代码之后,那这个它会自动给我们编译啊。好可以看到啊,首页有一个报错啊,这个报错。
04:05
这个报错呢,我就直接给大家说怎么回事吧,是因为我们之前。在写这个首页的时候,首先你要看到这个报错的页面是在哪,是index啊index啊,我们之前在写这个首页的时候,来找一下这个index啊,我们这里是不是,呃,为了处理我们的骨架屏,这里写了几个空数组对不对?好,它这个小程序里面是不是这样写的,然后我们在浏览器里面就是呃,浏览器里面没有问题啊,所以不是这样写,所以呢,我们把这个给删掉,把这个都给它删掉,那初始的值我们定义在。这里面啊,毕竟在这里面。清楚了吧,啊,定在这里面啊。啊,包括下面我们去把这个商品进行这个呃,值的初始化的时候啊,都给它改成这个就可以了,主要是这两个地方,这两个地方,那接下来这个时候我们来保存一下,看一下小程序的啊,重新编译后的一个情况。好先看,嗯,先看浏览器啊,浏览器我们来刷新一下。
05:04
哎,你在调多端的时候,你你不能说把小程序你调的可以了,你其他地方不能用了啊。哦,这上面会多四个。多四个,因为我们用的是。这个追加啊,可以看到小程序呢,也正常了,正常了,但是会多一些啊。就是我们这里呢,因为是嗯。追加的这个商品,所以呢。这里面它就会多多这么几个,多这么几个。好,这是为了写我们的这个股价平写的这个代码。嗯,那我们来写一下啊,这块想想怎么处理。嗯,也也好处理这里的一个判断啊。就说嗯。如果这个。
06:01
我们商品里面的啊。第一个元素啊。啊,最后一个也行,第一个也行啊,就是随便取一个这个元素,它里面有这个title啊。那么我们采取追加才去追加啊,否则的话呢,就不追加了,否则的话直接把这个res点故给它设置上加一个冒号,这是一个三维运算符啊,其实非常简单,就是判断了一下什么呢?判断了一下你这个,呃,我们的这个商品的这个列表里面,到底这里面是不是空元素啊,是不是空元素。好,这时候我们来看看浏览器的啊。等会儿这里有一波错。这里不能写衣服啊,这三元算服,我一开始想写判断来着。
07:03
后来想想,还真是三元胜负啊。啊来刷新一下,你看这时候就正常了,骨架屏对吧?来然后数据来了就没了啊包括后面的这个追加的时候都没问题,包括这里切换着都没问题,好这是我们H5没问题,那么他的小程序呢。诶,小程序会发现没问题,那我们重新编译的时候。好,我们再来看看其他的地方啊,然后是这个商品商品。啊,这个商品呢。啊,也没有问题啊,包括这个分页也没有问题。看一下商品的详情啊。详情这里面。嗯,评论。这个没有评论啊,推荐商品。都没人讲。然后收藏购物车和加入购物车。好,然后是这个手印这里面。我们看这个的详情啊。他也没有评论。那。这个呢,基本也没有问题,就是它这个刚才我们看到有本书这个内容贴到边上了是吧,其实就是副文本是呃,每本书它的这个显示格式都更一样,但是我们最好呢,还是要留一点间距啊,留一点间距。
08:09
有的间距就会大一点,有的就会,呃,没有啊,因为这个地方我们显示的是分本。好,推荐商品。收藏。会跳到登录对吧,然后我们的登录。好,Test at.com我们登录。登录成功之后,还会继续回跳到这个商品,对吧。主播在跳回来的时候呢,呃,因为数据请求它是一定时间,所以会出现了这个案底范的,这是在小程序里面比较最容易出现的啊,就是这个案底范的问题,当然了我们是可以去加一些判断的,比如说当这个。啊,数据没有的时候呢,我们就给它显示一个。呃,一个空字符串对吧。好,包括我们的这个购物车里面的数量也有了啊,你点击去购物车,但是购物车呢,这功能没写啊没写。
09:02
比如我们再去测试一下加入购物车的功能啊。加入购物车。啊,我们把那个安底范处理一下,比如你看点击的时候对吧,他名字就是因为没有回来呢,所以有一个安理范的,还有包括这个销量都是安范的。只有这两个地方吧,好,我们来给它处理一下,这是在哪,商品详情。商品的这个秀详情。嗯,主要是。这两个地方啊,因为是一开始我们是空对象,找不到这个属性啊,找不到这个属性,所以呢,他就会这个安利分,我们我们在下面把这个属性给它补上就可以了,那后面我们要是碰到其他的安迪分的情况,你也可以这么去做,嗯,哪怕给个。啊,给个空啊,比如说像我们的销量你给个零,这样的话就避免它出现这种阿里分的情况,其实阿里find在我们浏览器中是没问题的啊,就是在小程序中会经常出现这种情况。好,这时候我们再来点击。诶,等我来看一下啊。详情。
10:02
来看一下我们给的应该是没问题的。哦,这个是没有问题啊,没问题。对的是价格我们给呢是吧,价格没给呢,我把这个价格给上。我以为给错了。啊,还有这个价格啊,按CE也是给个零,好,我们把这个默认值体上,它就不会出现那种按按底的。现在就没问题了,对吧?啊,那这块我们也优化完了,其他地方我们再来看一看,个人中心呢,这里面呢,其实啊,基本上我没什么看的啊,看到主要是这个上传图片这里这里呢,其实在上传图片这里在我在写的时候呢,已经给大家就避免掉了啊,就是我们来找一下我们的上传组件。
11:03
因为我们上传的时候,肯定是需要拿到这个图片的这个路径的,因为你不拿到路径,你就没法拿到图片的名字,但这点就有区别啊,在这个H5里面。Who里面呢,Fail它是这个feel name,而这个呃,就说fail的里面有一个feel,就name属性是它文件的名字,但是在就是APP里面啊,小程序里面啊,它有一个pass,就是文件的路径名字在这里面包含着呢,那我们在这里打印一下,这个只有给大家看一下它的这个这个不一致的一个地方,所以大家以后在写上传文件的时候一定要注意这块啊。啊,就是在呃手机上,就是小程序上,它的呈现的方式和呃,我们浏览器中那个呈现的方式不一样啊,那我们来选择一个图像。啊,还选择选择这个吧,好可以看一下我们这里打印的这个文件啊,打印的这个文件,好,这是我们打印这个费,它里面只有两个,一个size文件夹大小,一个pass啊一个临时的这么的一个一个pass对不对。
12:00
看到了吧。好,这是小程序,那我们来再看一下这个我们的这个移动端啊,移动端这个项目,通过我们打印的这个文件,我们来找一下图片啊。找一下头像。我们还要给他换成第一个。好,这个是我们在浏览器中打印的这个东西,它的属性多一些,有内幕。有这个size,但是唯独没有什么呢?没有了,Pass。对吧,所以呢,其实你内部不管是一也好,你不管是这个也好,无所谓,我最终都是要给你重新生成名字的,我想要的什么就是你的后缀,明白了吧,所以呢,我们这里呢,必须得拿到这个文件的名字,才能去处理这个文件的后缀啊,处理文件的后缀。哎,这里就要写一个条件编译了啊,在H5和。这个非五的情况下啊,那个这个文件的属性有点不一致,所以这里大家判断好,这是一个需要,呃,注意这个兼容性的一个地方。那其他的功能呢,我们就基本就不说了,基本都是正常的啊,基本都是正常的啊,如果大家在写到这个,我们后面留的练习那些功能啊,一定在写完每一个功能之后,来这个小程序里面去去测试一下啊好,那这节课呢,我们先到这里主要讲一下小程序的这个,呃,兼容性。
我来说两句