粉丝7369获赞1.1万


呃,我们先打开那个项目,这个是啊,之前那个讲啊 v u e 的那个项目,然后这边有版本更新,我们更新一下这个版本开发工具的版本, 进来的朋友可以给关注, 也可以关注一下。呃,马叔的微信公众号就是马叔, 搜一下,马叔教你录代码,微信公众号或者是视频号都可以搜到。 我们等一下,这个 ctrl 工具的更新 稍微会有点慢,他这边要下载东西, 大家有什么问题也可以就是打到那个公屏上。 今天好像没什么人哎,可能稍微有点晚了, 欢迎新来的朋友。进来的朋友啊,关注一下。马叔, 我们现在是在更新那个开发工具, 要稍微等一下, 稍微有点慢, 感谢新朋友的关注。 我们先看一下啊,先那个开发工具让他更新。我们先看一下今天要讲的内容,呃,我们老样子回顾 录一下之前讲的东西,然后之前是已经讲,呃,把那个 unny a p p 的组件,常用的组件,然后都已经讲了,然后今天的话,呃,讲一下这个路由和页面跳转, 路由和页面跳转完,呃。讲完之后,然后,呃 再讲一下那个嗯, a p i 的东西, 一部分,呃 api 的东西就跳转,跟 api 也是很像的,所以说,呃,我们讲 api 的东西, nobody 啊。今天是没什么了, 今天比较晚吧, 今天我们就直接讲这个 a p i 吧,我看一下这个,哎。 navigator 这个东西啊,可以不用。今天就直接讲 a p i。 今天直接讲 a p i 讲 a p i 的东西, 这个怎么卡在这边了? 我们不管这个,我们不不管这个,等他更新好了,我们重启一下就好了,然后我们呃今天就直接讲 api 的东西吧, 加 api 的东西, 那我们呃开始我们看一下这个 a p i 啊, a p i 这边是有分基础的,还有网络好,页面跳转、数据缓存和位置,媒体设备、 键盘,然后呃这些界面的,还有界面的一些啊相关的东西,然后这个这些都要一一讲,还有文件穿题 这些都要都要讲,然后绘图的话就稍微带一下,然后广告的话就不讲, 广告是规定要用的东西,这个是如果要接他们的那个广告平台的时候可以用,但可以不用啊。第三方服务要讲一下 unicord, 等 api 都讲完之后再讲。 然后这些,呃其他的有用到的都都稍微带一下,这这下面其他的呃用的稍微比较少一点,主要是这上面的一些 api 的东西, 我们看一下这个更新,更新完成了,然后我们重启一下, 然后我们我们运行还是呃把之前的那个例子运行起来,我们在之前那个例子项目,呃继续讲了,继继续那个在上面去做新的页面, 我们等他那个启动起来,稍等一下, 欢迎新朋友进入直播间啊,新朋友啊,关注一下大叔。 呃这个是之前讲表单的一个页面,然后我们我们就不用这个界面,我们建一个新的页面吧, 我们建一个新页面,新建页面,然后我们叫 api, api 一加 p i, 然后选没了模板,然后他就会创建这个页面,创建完之后他就会啊给你配自动的配一个页面,然后我们这边, 呃哪位 get 把抬头 test 是他的标题,我们给他呃加上一些标题吧, api 相机, 然后我们把那个把它放到第一个,让他能默认展示这个页面, 我们给它剪切到这边, 这边爆错了,我们看一下是哪里爆错了,这个逗号, 逗号,可能中文的逗号, 然后这是 api 详解页面,然后我们看一下这个怎么缩小一下, 这个给他拉开,然后我们看一下这边有哪些东西。先讲这些基础的啊,在 a p i 的东西,首先是那个录制打印, 就 ctrl ctrl 啊,向控制台打印东西啊,他这边有分几个级别, 就是有第八个 log, 然后呃引 for one 警告,然后爱了, 然后呃直接输出是 ctrl 点 log, 然后呃这边就是直接就是 ctrl log, 就是打印,就是调试信息,就是我们呃如果就是啊要调试一些东西的话,就可以在这边使用 ctrl 点 log 去打印出啊一些变量的东西, 我们试一下这个是刚才新建的 a p i 这边,然后这边是一个空界面, 然后呃我们建一个就是 onload, 就是页面加载时的生命手机 onload, 然后在这里面啊空手 log, 然后呃 this is unload, this is in unload, 然后我们看一下这个 onlog 的方法,就是呃生命周期是它页面,呃加载的时候会掉绒,然后我们看一下就是到哪里看这个打印字的信息呢?我们这边打开一下,我们刷新一下, 看到没有,就这边会打印,就是说 this is onload, 就是他会在这个调试面板里面的空手,这边有 element 空手,空手是代表,就是说啊控制台,然后我们在控制台里面 bug 那个啊,这个祝福串的话,它就会在这边显示, 然后比如说我们这边定义一个啊 message, this is message, 那如果我们要打印出,比如说这个 message 到底是什么,我们可以直接就是 打印出来这个 message 这个东西, control dlog 这个 message, 然后啊哦,不是这个 message 是 list 点的,但使用本页面的变量要有加格 list, 然后就可以我们刷一下 就可以把这个变量就是页面的变量给他打印出来,这个都是用来调试用的, 然后调试,还有一个调试,还有一个方法就是打断点, 打断点,呃打断点就是在遇到问题的时候,比如说你遇到问题的时候,遇到爆红或呃就是解析出错的时候, 就是方法是错的时候,然后你就是嫌这个空手点 logo 比较麻烦,或者是定位比较难定位,这个时候呢你就可以用这边的哨子, 比如说我们要定位,就是说 onload 里面的这个 ctrl 点 log 是不是啊?正常的运行,然后你就可以在呃这个 sos 里面去找到我们这个 a p i 文件,这个 sos 下有个英语单 a p p 这边你可以打开,然后它会 把当前加载的那个页面,当前加载的页面他这边会显示在呃目录或文件都会显示在这边啊,我们是那个配置是干 api, 然后打开这边就有个 api 点微粒,然后这个就是我们刚才写的那个文件,然后如果你要看,就是说比如说网络的这一行到底有没有问题, 你就可以在这边呃他这个函数里面去点一下,他就会啊在这边打,打到断点,就当他运行到这个的时候,他就会卡在这边,你就可以看这里面有什么东西。


哈喽,大家好,我是老杜,今天啊,正好呢,有一个同学问了我一个问题啊,他说他要开发微信小程序,有没有什么合适的前端的 ui 框架。那这个呢,正好问到点上了啊,咱们有一个前端的 ui 框架,我给大家推荐一下,叫 vui, 他这个 vy 呢,这个前端空间啊,他是一套什么呢?同微信啊,同微信原生视觉体验一致的基础,像是库,他其实就是一套 cs 库啊,他的样式呢,和这个微信的样式是一样的啊,他是由微信官方团队啊,这个设计的啊,专门为什么设计的呀?哎,为这个微信内部的网页啊, 以及什么微信小程序量身设计的一套 uy 框架啊,大家可以用它,包括你开发这个手机端的应用啊。呃,没有合适的前端 uy 框架的话,我觉得这个 vy 是一个比较好的选择。 那么这个呢,里边有很多的内置的一些样式啊,可以直接用,比如说表单,对吧?哎,表单里边按钮,你看 自带了这么多按钮是吧?哎,包括还有表单放啊,表单,表单,最基本的表单结构,你看表单吗?是不是?哎,填写东西的啊,包括验证码,你看是吧? 验证码,然后呢,还有什么呢?比如复选框是吧?哎,复选框,你看这种样式的对不对?哎,非常好的一个前端 ui 框架啊,和大家推荐一下。

啊,各位同学大家好,本小节我们继续 unifa 的学习,那么在上小节给大家讲解了微杠袖子的一个指令啊,那么它也是控制元素显示与隐藏的, 那么他跟微艺府的区别是?微艺府,嗯,控制元素显示,运营茶则是啊,创建和销毁元素,而微杠秀则是控制一个元素的 dcplate 属性, 他们两个有本质的区别啊,如果你是频繁切换的场景,我们推荐大家用微秀啊,如果是其他情况,就用微易付啊, 好了,这个是我们的啊,控制元素的显示运差好,这小节给大家讲解另外一个非常重要的指令,叫做什么叫做 model 啊,这个 model 是用来实现双向数据绑定的啊,是用来实现双向数据绑定的 好,他用于什么呢?用于我们的表单元素好。哪些是表单元素呢?所有类型的输入框啊,不管你是普通的输入框也好, 密码框也好啊,然后就是下拉框,多选单选文本域,时间选择这种啊,我们都把它称之为表单元素, 只要你看到了表单元素,那么第一时间要想到我们的微杠波斗这么一个指令啊, 那我有一个模特是怎么用的呢啊?首先我们在我们的 dict 当中去定义一个 w 啊,用来绑定我们 输入框的字啊,比如说我们在这写个音铺的啊,来写个微杠 model 啊, 好,微杠 model 就直接绑定我们的他当中的某一个数据啊, 直接绑定我们对他当中的某一个数据,那么他就可以实现双向数据绑定, ok, 什么叫双向数据绑定呢啊,什么叫双向数据绑定呢?就是好数据改变啊,试图 会改变好,然后试图改变数据也会跟着改变好。这句话说起来有点抽象,那么我们在这给大家做一个实际的案例,给大家看一下, 像我们这有一个巴特啊,然后我们给他叫改变,改变我们的 whello, 然后我们在这艾特克利克,在这写个方法叫 fred value, ok, 来,回到 master 这里面来, 好,我们就直接去改变我们的 w, 等一个一,等一个 a、 b, c 吧, ok, 好,现在我们同时在页面上用叉字表达,是把我们的 w 显示出来 啊,回到我们的页面上来,现在我们的歪了,因为是空的啊,所以说他没有任何内容。 注意这个音铺的框哈,是在 unipa 当中是有默认样式的,是让大家审查元素哈,这种音铺的框就是在这,包括我们把鼠标放上来啊,他也有,只是说你看他有 很多默认的样式啊,比如说百合国奥的没有啊,啊,汉特没有等等等等啊,这个波德也没有,那么为了哈,那个我们看更清楚一点,我们给他个波德吧,波德一 px 啊,给个实现啊,给个红色啊,这样我们就能看得出来了啊。 好了,现在我们开始在页面上的数框当中去输入内容啊,那么这个时候我们的视图就发生改变了啊,说个一一一二二二三三三, 那么我们的 w 啊,会跟着一起改变,这个就是试图改变,而我们的数据会跟着一起改变,而当我们点击这个按钮的时候,我们会去改变我们的这个 value, 在他当中这个 value 的值一点 来,看到没有?好,我们的数据改变啊,是让我们试图也跟着一起改了,这个就叫做双向数据绑定好,这个是非常 好用的啊,那么这个微干窝豆到底是怎么实现的呢啊?虽然他是一个语法糖。什么叫语法糖呢啊?就是啊,内部其实做了很多操作啊,只是我们用下的时候更加方便剪辑了。 好,现在我们要自行实现一个微杠 model 啊,怎么去实现呢?好,我们复制一下这个输入框,就把这个微杠 model 删掉啊。 那么首先第一步我们要给这个输入框动态绑定我们的歪溜直,那么动态绑定歪溜直呢?要不然我们没有动态绑定歪溜直的话,那我们是不可能说我们 数据变了,看我们的视图,就是我们这个输入框的值会跟着一起改变,这是第一点,第二点就是我们需要给他绑定一个音铺的事件,为什么呢?因为我们在输的同时啊,输的同时这个音铺的框 啊的内容一变,我们数据也会跟着改变,实际上就是在他的音库的事件当中去改变,我们这个对话当中词就 ok 了啊,就是我们叫憨豆音库的啊,憨豆音库的啊, ok, 来写, 其实很简单的。好,注意我们的这个,每一个实验当中默认会有这么一个疑问和对象,那么我们怎么在音铺的实验当中拿到这个输入框的值呢?其实很简单,就是把我们的这个 v 六卡在这动态绑定的这个 vr 六啊,等于什么呢?等于我们输入框的值就 ok 了,输入框的值怎么拿呢?叫一点他,给他点 v 六。 ok 啊,现在我们就自行实现了一个啊, 威港 model 啊,这段时间我也刚 model, 总结一下,就是动态绑定 wy 里的值,然后给这个输入框绑定音铺的事件,然后在音铺的事件当中拿到输入框的值,然后付给这个 vi 六就 ok 了啊,就 ok 了啊, 这个就是我们微杠 model 的用法啊,虽然微杠 model 是我们非常重要的一个指令啊,就这三个步骤啊,就被浓缩成了一个 指定的啊,所以说 vivo 还是非常强大的啊,我们用尿不是因为基于 vivo 的语法哈,所以说有这些红利啊。 好了,本小姐姐给大家讲解了 vgmodo 的其中一种用法啊,在下小就会讲其他的用法。好,这小姐姐给大家讲这,谢谢大家。
