00:00
Hello,同学们,我是同学,老师好,这节课给大家讲解一下如何在我们的原生开发当中使用,什么使用第三方组。这里引用的第三方组件数的是一套WE3啊,就是我们基于小程序的一套UI组件啊,但除了小程序的UI组件里面还是没有其他UI组件,我们这里以这一套比较常用的为准,因为这一套是有赞开源的一套,呃,UI组件它原先的就是做这个微信的小应用,以及微信商城为主的一个SaaS服务商,然后呢,我们直接看到它的一个在左边的文档当中会有一个快速上手,先通过第一步NPN安装啊,这个流程是要怎么做呢?我们需要打开我们的小程序所在的目录。打开小程序,我们昨天的目录当中什么什么方式呢,我们可以点击这里的右键,然后呢,在咱们在这个资源管理中显示。这时候呢,就会进入到了我们的项目所在的目录,然后呢,在跟目录当中,我们CD。
01:02
俺想回去了。然后呢,按照他的做法当中,我们需要什么,我们需要进行第一步的安装啊,你可以把这个代码直接复制到终端里面进行安装。要安全回车啊,就进行安装了。然后第二步呢,我们需要什么,在我们的这个AP进行中修改我们的项目中P进行中,把这个V的版本去掉啊,这里说有一个原因啊,所以说我们也去到我们我们的小程序当中,在ap.ja当中啊,拉到最下面在个啊,但我这边已经删删掉了,如果你们是新建的一项步骤,这个应该会有一个配置项,叫style的配置项。然后里面的只是VR啊,这里面把这个去掉就可以了,这是第二个。然后呢,第三步我们修改什么,这里面修改这个啊project conration当中,然后呢,按照它这里的配置进行一个默认的部署配置啊这个地方所在的地方是什么,在哪里呢?在我们小程序项目的跟目录的这个叫做啊project conflict里面。
02:10
然后呢,往里面找到什么,找到我们的这个对应的一个city的地方。设置里面找到我找到我们这里的一个叫做。啊,这个地方,然后这里面对应的设置为这个地方。啊,他们可以把你们到时候找找到这个对应的地方啊,在文档当中会特别说明啊,会特别说明,但这里面要注意一点,它后面有个注意,在我们新版的构建工具当中呢,这个值它原来说的是设置成这一个啊mini program,但是实际上在新的版本当中的时候呢,我们就要把什么把这个值改为什么改为典型的。看到吗?同学们哈,在这里说是在city啊的page NPN list这个里,这个配置里面啊,同们,所以说到时候你们记得在这个地方需要把这个值改为是点斜杠,而不是它的原来的说的这个地方啊,但在文档的最后一个助力地方也有单独的说明,好吧,单独说明OK,接下来到下一步了,在这两步骤做好之后呢,我们会去到什么地方呢?去到我们的小程序工具当中。
03:18
先在开发组分中勾选构建一片。看到这个地方啊,需要什么,需要去到我们项目当中,第一个在啊详情当中找到本地设置,找到项目设置啊,或者本地设置里面找到,找到一个什么,有一个叫做。那么在我们的项目当中,我们找到什么这这个配置部门哈,这个你们看到的这个配置,在新版的微信开发工具中已经是没有这个配置的了,就已经没有勾选使用MP模块这个配置的。啊,你们可以看到在我们的小程序工具当中,新的这个版本当中哈,是找不到勾选NP的配置,本地配置当中是免的了,所以我们直接做什么,我们直接点击工具当中找到构建片。
04:04
啊,它显示构建构建,然后呢,完成的构建就可以了,完成了构建之后呢,同学们,你们就会看到项目的根目录就会多了一个mini program m PN这个地方,就得到了这个新的一个我们的。使用第三方组件的内库,主要是这里面有个VT这个内库。接下来我们说一下如何在小程序当中使用的组件啊,但我刚才我们已经完成了构建的流程啊,比如说你想使用一个icon组件,那么就在AP或者index JA中引入组件,这两者引用的区别是什么呢?如果你在APJA里引入,那么你就是指以全局引入在所界面的可使用,但如果你像我这样子只在某一个页面啊,打开一个配置里面的某个页面的BY接,这里面单独的接什配置文件里面使用这个组件的话,那表示什么?这组件仅仅是在这个单独的页面当中能使用到对应的内容。看到没有啊,所以我们一般而言还是只在什么,只在AP0J里面进行引入啊,这些就是我目前引入的组件啊,但如果界面引入了个icon啊,它使用方式这里面可以把这里的配置引用直接啊复制到你的配置文件当中就可以进行使用了,当我们这边做好之后呢,同学们,我们就可以在我比如拿我的首页来做个例子哈,我在我的首页当中,在我的页面当中,我可以使直接使用对应的组件。
05:30
I。呃,使用方式我们要看它里面内容啊,它的内close再表示我们使用到一个对应的图标啊,在这里我们点击示例哈,这里面啊,要另右键打开这里就会看到什么,看到有一些对应的图标,这是它原有自带的图标,比如说我想要这个todo list,我就复制这个下来,然后呢,在这里面我写上个内啊,但这里面我点击它说的应该是保复制有这个名称的了啊,就这里面学一个内,等于这个对应的图标的名称。
06:01
奥特曼,这时候看一下我们的首页界面。那咱们看到没有,这里就有一个图标,看到吧,这里这个图标OK啊,图标的大小的修改是根据什么呢?我们得看回它文档当中啊,文档当中图标的话有一个什么,有一个对应的一个大小啊,通过size来设置来可以改变图片的大小啊,这个地方在来时候说明呢,API当中,它每个组件下面都有个API的说明,API的说明是对应的一些内容信息,比如说size等于固定值啊,可以设置个size。等于我写上的100PS。啊,同们看到没有,图标就变大了啊,这样子能方便让我们使用一些图标,当然啊,它除了图标以外,还有很多很多的一些组件,包括我们常用的一些日历的选择啊,日历选择我需要点击这边,有时它打开比较慢的话,你们点击右键的另打开,从这新标打开就能看到它对应的一些日历啊,当然这是移动端的,我们要按照移动端当中的界面去显示它,看有什么,它有对应的一些日历,有对应的区间啊,选择对应的区间的一些的代码啊,比方我选择开始结束啊,这里面就得到一些区间的代码。
07:20
区间的时间哈,就是我们有些开发当中,为了加速我们开发流程,如果有一些现成的,而且很非常符合你的业务功能的,那么就可以使用一些第三方的组来完成这个内容啊,就是我们在项目当中用第三方组件的方式啊,他们希望你们能在项目当中找到一些合适的一些UI组件。
我来说两句