00:00
大家好,那在上节课我们来看完了微信小程序的这个运营情况之后,那这块我们来看一下安卓和iOS的运营情况,那其他的这个小程序像支付宝啊什么的,我们就先不看了,那安卓的话推荐大家使用真机去调试啊,你通过这个数据线把你的手机安卓手机和电脑连接之后啊,在这里面啊运行的时候啊就可以。看到你的这个一个安卓的一个手机的一个设备,然后就呃点击的话,就可以直接在你的手机上去运行啊,当然我这里如果运行安卓设备的话,没办法给大家投屏,那我这里呢,就先使用安卓的这个模拟器啊好,那安卓我们先等一下再说,那先给大家说一下这个iOS iOS的话呢,呃,这个呃,只能是Mac系统才可以使用这个安卓的这个iOS模拟器啊,那Windows系统的话,你可以去装一些啊,像这个itunes这些工具啊插件啊,也可以去运行。好,我们来看一下,在。IOS的模拟器上的一个运行情况,好,先把关掉。
01:03
啊,我先打开我的安卓模拟器啊。嗯,我们看完iOS再给大家看这个安卓。好,这个安卓先关掉啊,我们先看这个iOS的模拟器情况。啊,这就是我们写的这个啊商城的项目啊,这是我们的这个首页,包括我们的这个数据的切换,包括我们的啊这个股价屏都是正常的啊,都是正常的啊,诶我们的这个商品的这个列表啊,也是没问题的。啊。这边这个没有出来,这个左侧的这个。左侧这个内容没有出来啊,看看其他的内容啊。
02:02
好跳转登录,等一下我们再来说这个问题啊,把这个调一下。这是输入法的问题,它第一个字母会大写好,我来登录一下啊,好登录成功。嗯,然后就来到了这个个人中心啊,包括我们这个个人信息的修改都没有问题。嗯。那主要是这个这个手链没问题啊。来看一下上面的详情。好,详情啊,也没有问题,也能正常显示,包括我们的商品评论,但现在没有评论啊,以及我们推荐的商品。好。呃,包括我们收藏商品,哎,都没有问题,那现在唯一有问题的是什么呢?就是在这个商品的这个列表里面,我们左侧的这个区域没有出来,对吧?好,那接下来呢,我们来调整一下这个区域的。首先来找到这一块的代码啊,是在商品的这个分类这里面啊,那我们循环的分类的数据啊,是这里啊,这里循环的这个商品的这个分类啊,可以看到现在我们的这个移动端是没问题,小程序也看到没问题,就是在iOS它会有问题对吧?啊实际上这个问题是什么问题呢?是我们在循环的时候,诶,就是在iOS设备上,它对这个block的支持不是特别好啊,那所以怎么改呢?我们把这个最外层,我们循环的最外层的这个分类的这个block。
03:21
啊,改成VI就可以了啊,那改成改成这个VIVO之后啊,我们再来保存看一看iOS的一个效果。好,那这时候呢,这边的分类就能正常了,包括我们去点击啊,进行筛选都是没有问题的啊,都是没有问题的,好那我们来看一下移动端会不会有什么影响,来刷新一下。好,可以看到移动端也是没有什么问题的,所以我们把这个block改掉啊,就是说如果我们呃,在这个模板里面使用一些block去做这个判断的话呢。啊,这里面会呃,可能会出现一些样式的问题啊,但不是说啊不能用啊,比如说我们这里用的这个block啊,就没有什么事对吧,这里是我们呃,左侧显示的这个区域嘛,右侧显示的这个区域嘛。
04:04
但其实这个block并没有什么用啊,这个block并没有什么用,你把它删掉就可以了。因为这个页面是我们自己就复制的这个由微友提供的一个模板,所以有些标签我们也没有删啊,那这样调整之后呢,我们这里就没什么问题了啊。好。呃,那其他的这个呃,兼容性呢,给大家也看过了,也没什么问题,那这个我们就关了,我们来看一下啊安卓的啊,我先启动一下安卓的问题,之前已经启动了,启动过一次是吧,然后太卡,我把它给关了。好,那这个iOS的我们就先给它关掉啊,在这里面也给它结束掉,停止运行。那我们这个一就是说呃,Web端的就一直在这先运行着,运行着。好,等我们的模拟器启动之后啊,模拟器启动之后,那这里我们在运行的时候呢,啊,就可以看到啊,一个安卓的一个设备对吧?那呃,如果你用真机调试啊,你把你的手机和电脑这个线连上之后呢,你也可以在这个啊里面看到一个这个东西啊,但是真机的话,你要在手机里面去打开那个开发者。
05:12
模式啊,就是打开那个USB调试模式才可以啊。好,那我们来运行一下这个安卓。好,等他编译完,它就会把这个给启动。啊,当然启动的是横屏的,我们可以在这里去进行一下屏幕的旋转。我们把这个关掉啊,关掉重新重新打开,它就变成这个竖屏的了,就是我们先把它旋转成竖屏,再去运行这个。好,这个就是我们安卓模拟器的运行的一个情况啊,那可以都点点看看,首先是这个手链啊手链。
06:03
首页,然后我们点开查看某一个的一个详情啊,它的这个评论。就是正常的,然后这个字体呢,这个字体也没有办法,它是副文本,副文本它这个字体呢,是在副文本添加的时候就已经设置好了啊,当然我们通过呃一些代码,比如说通过一些正则呀,我们是可以去调整一下他自自己的。好,接着是我们的这个收藏以及加入购物车,那这个操作肯定是需要登录才行,诶触发了这个让我们登录,我们来登录一下test.com。啊,来执行登录,登录成功。把这个屏幕稍微调小一点,有点大。好收藏了对吧,嗯,那接下来我们来。返回啊,这个是详情是吧,那我们来返回首页啊,这个是返回啊,这个返。这个是回这里的。现在有一个问题是回不到首页了啊,因为我们刚才。
07:01
点进来之后啊,这里应该是有一个返回的。安卓的话,它有一个返回键,它返回的也是这个页面站啊,返回也是这个页面站啊,我们重新进一下。嗯,现在这个是我们的首页对吧,那我们点开啊,来到我们的这个详情啊,这里是有这个反馈的,只不过刚才是因为我们。嗯。啊,这样是可以返回的,可以返回的。那这个问题出现在哪里呢?其实是我们登录之后啊,登录之后我们用了这个。呃,重定向啊成向。看一下我们登录之后来。找到登录的代码。Also里面,那我们来看登录。那登录成功之后呢,我们是用了什么呢?用了这个烂啊,这个就导致了把其他的页面都关掉了,所以就没有这个返回的页面站了啊,所以这块呢,其实还是要优化的啊,不能用这个啊re览器我们可以通过判断判断,如果是呃,底部的就是我们要跳转的是。
08:05
底部的。找一下我们的模拟器啊。如果是底部的tab b啊,那么我们用那个呃,Switch tab,那如果是普通的页面我们用就可以了,这样的话它不会把所有的关掉,因为所有的都关掉以后,页面占就没有页面了,它就不会有这个返回了啊,你这个返回也不会生效。啊,这是这个问题啊,那这个呢,给大家呃,这里留下大家自己调整一下啊。嗯,判断啊,如果是底部啊,Ta用。啊,Switch type Switch type啊,如果是普通页面,如果是普通页面使用啊图啊to啊呃,这个其实是会有问题啊。
09:02
因为它跟小程序不一样,小程序我们这样写没问题,因为APP的话啊,给大家看一下,你APP的话呢,它没有顶部的这个返回手上对吧?啊,所以它只有这个小返回和返回这个桌面,那返回的话,如果你你的页面站已经是第一个页面了,我们再点这个返回的话,就是再按就是退出了,行了吧,这位大家写一下啊,嗯,使用这个。啊,在APP上。会出问题啊。会导致。无法返回首页这样的一个问题,就是这个问题。这个大家可以修复一下,做一个判断,因为我们现在能拿到这个U2,你只要去匹配一下这个back u2是不是等于呃,底部的啊,我们可以定一个数组啊,定一个数组。就是把这个底部的这个四个UR定一个数组,我们判断这个back URL是不是在我们的那个数组里面啊,如果在的话呢,就用啊手机tab如果不在的话,就是两个two可做一个判断。
10:06
好,这里就呃呃作为小练习,大家自己练习一下。当然是只有APP上才会出现这种情况,你如果在小程序里面或者这个H5里面是没有这个问题的啊,没问题啊,我们也测试过登录是吧,好,我接着看其他的页面啊。首页和详情啊,看完了。嗯,这个分类呢,我们来看一下正不正常。点一下这个商品的分类,我电脑现在有点卡因运,运行的东西有点多。这个模拟器是不是还没退,把这个退掉,这个也很卡。啊。啊,电脑有点卡稍微啊,这个是正常的,这个正常的正常的。啊,都没有问题啊,没有问题啊。那看一下我的个人中心这里。啊,所以呢,大家呃,推荐大家使用,像安卓的话,推荐大家使用这个真机啊,真机的模式啊,真机模式。
11:11
好,那个人中心这里啊,这里样式有点问题了啊,样式有点问题。你再给确定一下。好,这里我们要怎么调呢。这里我们调整的话啊,就是。让这个上下的间距再大一点,上下的间距再大一点,就是这个区上下间距大一点,然后文字距离左边再有一些间距就可以了啊。啊,但但是这个的话,这个我为了不影响别的,为了不影响别的设备,所以这个我们要写条件编译了。那我来写一下。把这个群关了啊。找到个人中心这里啊,个人中心这里首页我们要调的是谁呢?是。这个啊,是这个区域啊,这个区域就是这个是头像对吧,这个是我们的那个名昵称,我们是要让它距离左边再有点间距啊,来给大家看看,就是让这一部分距离左边再有点间距,然后最外层的啊,它让它上下间距再大一点啊,所以呢,这里我们可以单独去写一个这个呃,样式啊,就是比如说是安卓用的,因为我们刚才看了iOS也正常对吧?啊。
12:17
好,那这个时候呢,就要写条件编译了,我们来找一下文档,看一下条件编译啊条件编译呢,在这个介绍里面,但是条件编译你通过找的话,你会发现它只有APP端的一个代码,一个APP是吧,没有区分安卓iOS这些平台,那我们怎么来区分这个iOS和安卓这个平台呢?啊,这时候我们去找一个API啊,你会发现在这个基础API里面有一个。有一个获取这个设备信息的一个啊。设备系统信息有这么一个API,那这个API呢,它可以返回给我们,我们的当前的设备是什么啊。嗯,大概是这个字段啊,客户端平台知为iOS安卓啊,Mac Windows等等等等啊,所以呢,我们只要去呃拿到。
13:05
就是调用这个API得到这个值就是可以知道当前的设备了,对吧?好,因为可能会有很多地方用到这个判断设备,所以我们把这个判断设备的这个代码呢。啊,给他。放到我们封装的这个工具里面啊,Us里面,那我们在这里面再来写一个。好,呃,写一个意思。啊,一安等于。一个函数啊,我们在这个里面来调get system meaning。In,有一个是think的,看一下这个什么啊。啊,直接就是这个。它下面应该有使用的这个事例。
14:03
啊,这个API。嗯,有一个这个字段啊,这个字段就是这个字段,就是我们的这个。设备啊,然后我们再来找一个啊,我们使用这个方式啊,这个方式这个是同步的方式,来来调用同步的方式呢,写起来会比这种异步方式要好一些。因为E的话,我们是在这个回调里面去写嘛,不太方便我们用同步的方式用这个啊这个。嗯,那我们这里呢,只需要判断谁呢,判断这个它啊,就可以知道是不是安卓了。啊。If啊,这个值等等于啊Android,那么我们就可以true啊,否则呢,就force就负三个对吧,因为我们这个方法面就是判断是否三卓嘛。是否是安卓的设备?
15:01
啊,我们来调用下这个方法,看一下效果来在这里啊,可以挂到这个do u的TS里面,那我们在这个index的这个生命周期里面,我们来来看一下啊,看一下来打印一下console.log啊this.do u啊点u tells。啊,点is。安卓一个安卓,我来看看我们的这个值是什么啊,那首先看H5的啊,H5端的。来看log来刷新一下,它肯定是first啊,就是H5对不对,那我们这个嗯。安卓怎么看呢?因为我们现在没办法调试啊,没办法调试。我想一个办法啊,让大家看一下。也也好也好说啊,这里我们来判断一下啊。
16:02
我们直接使用,哎,如果你是安卓那么。啊,我先。我就写个弹窗啊,写个弹窗this.dota优点toast啊。是安卓设备。好,这时候我们来看一下啊。来,我们回到这个我的这个里面啊。啊,因为是在onload里面,它没有触发啊,没有触发,只有再重新去加载的时候才会出发啊,我们先退出先退出。重新进。那这时候,哎,我们来到这个里面啊。这个地方还是没有出发。那我们。放在安丘里面就是为了给大家做一个测试嘛。
17:06
好,我们放到数里面来写。先看这里面,这里面有一个报错,我们先把这个报错解了,报错的话是少了一个逗号。这里守备的都不。啊,这个肯定不是啊,所以他不弹窗。那主要是看我们的这个整个安卓的这个设备。嗯,我们先让他隐藏,然后再让他说,先让他收视,再让他显示。等一下我这个值拿的应该是没有问题的,看一下。
18:09
vm. dotau.toast在这个里面,我来CTR一下这个东西看到。DI。啊,是的啊,这里我return啊忘了return出了,所以我们的判断没有生效,写错了,我们的取得这个值没有问题啊,是没有问题啊,那接着呢啊,继续看。好。呃,这个时候,呃,其实我们。因为这个设备啊,我们只需要判断一次就够了,所以放到on修里面就可以,放到修里面判断就可以了,那我们判断如果是安卓设备的话干什么呢。啊,放到这个unload里面就可以,如果是安卓设备的话啊,我们就定义一个样式,诶让他。
19:06
和他去用上这个样式。好。来这里我们来写一个啊,Is。啊,安卓一开始是false,一开始是false,那如果我们的这里是安卓设备的话呢,那我们就让我们的这个date里面定义的变量等于true,好,这个时候我们再来验证一下,它肯定是没问题的,它肯定是。不显示的。啊,因为它是这个灵感码的,主要是他。啊,是安卓设备对吧,可以看到已经显示了,好,那安卓设备就好办了啊,那这时候我可以,呃,根据你是安卓设备设备的话,我给你增加额外的class啊,那这个class。它的值啊,取决于谁呢?取决于这个。呃,是否是这个安卓设备对吧,那我们这个用的卡拉名是什么呢?这个我们来想一个名字啊,比如说呃,这个是。
20:06
Etta。啊,Body。包裹这个头像的这个这个这个区域啊好。那同样的下面呢,我们这里也来给一个了啊,这个是。Name不是name name body,哎,也就是说啊,这个样式是否显示这个卡是否显示取决谁,取决于你是否是安卓。看出了吧,好,那接下来我们去写一下这两个样式啊,那首先一个来写,首先去写我们的啊bright body,找到我们的这个样式。嗯,其实如果有条件编译的话比较省事,我们直接在这里面写条件编译就可以了,但是我们现在是要区分这个安卓和非安卓设备,所以只能去这么去写。好,我们要给它写的是一个判定,就上下让它间距大一点,比如说60RPX左右呢。
21:05
啊,有30就行了,好,这时候我们来保存啊,啊先等一下啊,为了防止它权重不够,加上一个啊。这个东西啊,反正这个它是只有安卓的时候才会应用嘛,对吧,其他的设备有应用先看移动端。没有变化吗?它的间距我们再来看安装。啊,可以看到间距是有了是大了点是吧,但是呢,稍微太大了点啊,那我们再给让它小一点。啊,60是大了点,那么。50看看效果。上下。
22:05
上面的话,我应该是让它小一点点,上面小一点,然后下面其实需要大一点,需要。嗯,可能要72X啊。好,这是上,这是左右,这是下,这时候我们再来看看效果,这样写的。啊,那这样的话就基本上是居中了,对吧,接下来就是让这个文字距离左边来一些间距啊,我们左边啊有了一个呃,Name。应该是这个看一下确定一下。是他,是他。好。他啊,Marin down left。嗯,40IPX先看看。应该是可以的,好,先给大家看看移动端,移动端是肯定是没有问题的,因为这个样式根本就不涉及到移动端,只有是安卓的时候他才去用用用这个样式。
23:09
OK。呃,那接下来呢,还要往下面来一点,往左边再来点,往下面再来一点就可以了。这个给到50。然后顶部的话,Marin-top再给个30RPX应该就行了。好,等他加载完啊,现在开的东西有点多,电脑稍微有点卡。嗯,稍微。差不多了啊,其实这个应该给个36就可以了啊,那这个我们就调完了啊,那如果是呃,不同的这个设备之间,我们直接用条件编译就可以,对不对,但是像这种我们要精确区分到安卓和iOS的话,只能去获取设备信息,去做一个判断啊,获取这个设备信息通过这个get system think think的话,我们同步的方式去获取。
24:07
呃,这个呢,我只是写了一个是否是安卓设备,你也可以把它封装成一个公共的方法,比如说呃。直接获取这个设备的值,然后呢,尽快用在判断也行啊,当然我们这里面直接分装好之后呢,使用的时候比较方便。好,那这节课呢,我们就到这里啊,主要说了这个安iOS设备和安卓设备的一个运行的一个情况,包括这个不兼容的地方,我们也给他进行调整。
我来说两句