微信小程序怎么使用vant组件

欢迎同学们来到微信小程序设计第二期第一节课外部与外库的调用， 同学们可以加老师微信号零 m 二六进行技术交流及合作。本节课我们包含三个知识点，第一个知识点， 调用的好处，第二个知识点，怎么安装？第三个知识点，如何调用？第一个知识点， vantv app 主监库的好处。 那么我们腾讯官方的微信小程序给我们提供了很多的 ui 组件的一些 api 代码啊，但是那些 api 代码 不是特别的美观，那么我们需要调用外部的与外库。那么还有一种情况，比如说大家要做一个九宫格啊，就是我们 很多的 app 啊，或者是微信小程序中涉及到九宫格的一个界面，那么如果你再从底层去编意，去调试的话，就特别好时间，所以我们常常需要啊，使用 已经做好的 vantvapp 这种类似的主监库，在工程中进行调用，就可以加快我们项目编意的进度。好，第二个知识点， yantvapp 主间库的安装和我们来到微信开发者工具平台， 怎么老是在这里呢？给大家演示如何安装 ventv app u i 库。那么首先呢，我们鼠标放到 mini program 这个栏目上，右击，然后会弹出一个哎对话框， 那么我们的对话框里面呢，大家点击在终端打开。好，那么在终端打开之后呢，大家输入 n p m i n i t 空格看 y 好，我把这个显示大一点啊， n p m i n i t 杠 y 好，点击回车 好，点击回车之后，那么同学们再输入啊第二行代码， npm v a n t v a n t aml e a p p 风格杠 s 风格杠杠 production p r o d u c t i o n 再点击回车， 好，我们点击关闭 第二步，大家点击工具点击构建 npm， 那么此时我们的程序呢，会弹出一个对话框啊，那么完成构建呢，就要好 耗时五千四百六十八毫秒啊，大家点击确定，那么我们就程序就会自动给我们构建 npm 模块。好，第三步，我们点击详情， 点击本地设置，在本地设置中点击使用 npm 模块 好，关闭我们的详情界面。好，那么经过上述的三个步骤，咱们就把我们的 ventv app 这样的一个 ui 酷啊进行安装完毕，并且进行了 npm 构建， 那么下一步呢，我们将进行讲解如何去调用咱们的 ui 外部库。第三个知识点，练特维 app 组建库的调用。好在讲调用之前呢，那么同学们呢，可以登录这个网站啊，不可 stick 就是我浏览器里面的这个 网页，那么里面有详细的咱们的 vantv app 这样的一个主键库啊，包含的一些主见的一些调用啊，大家同时也可以扫这个二维码，这是 vantv app 这样的一个开源主键库的一些样式， 大家可以在手机上进行一个观看啊。那么今天呢，老师呢，主要是通过来教大家如何调用九宫格啊这样的一个 ui 啊，给大家做一个演示。好，首先我们来到微信开发者公， 那么老师这个开发界面呢，是一个云开发的界面，那么首先呢，我们先创建一个新的啊页面，点击新建文件加输入一 好，并且在文件加中点击右键新建配置输入一啊，我们就这样建立了一个一的啊，配置这样的一个界面， 那么我们如何在一的这个界面里进行变异呢？老师在第一期已经讲过了，首先大家点击普通变异，那么再点击添加变异模式， 在我们这个下拉栏里面找到咱们刚才的这个佩奇是杠一杠一，然后点击确定。好，这样呢，咱们的程序呢就会来到了这样的一个一啊，我们刚刚创建的这个 界面里面。好，首先第一步我们把这个默认的这个啊， w x m l 语言里面这个 mini program pdc 删掉。好，现在我们就点击变异啊，这样我们就来到了一个空白的界面。好，现在老师就开始讲如何去调用 九宫格。首先我们在一点阶层里面啊，输入这一段代码， 那么这段代码大家输入之后呢？那么这段代码输的意思呢？就是说让我们在这样的一个页面里面去引用我们的 vtv app， 我们已经下载安装好的这个外部组件包啊， 那么这个主角包是安装在哪里呢？实际上就是在肉的猫肉室里面，那我们看一下，这里面我们在点击内部 里面就有什么博腾啊， cl 啊， cl group 啊这些啊，这些都是我们外部的 ui 主线库啊，也就是我们刚才安装的 vientv app 主线库。好，现在我们回到 w x m l 界面里面， 我们在界面里面输入这样一句话啊，那么同学们把这一段话输入进去之后啊，咱们进行一个编辑。 好，这样屏幕上呢就很快的显示出了咱们的这样的一个九宫格啊，这个 icon 就是我们的图标啊，就是我们文字上面这个图片，你可以自己添加啊， 那么如何添加？老师在第一期已经讲过如何去添加图片啊，如何输入地址啊，实际上就是你可以新建一个隐秘局啊，在 以密集实证文件夹里面放入图片进行调用啊，文字你可以输一二三也可以啊，这里呢是一个破循环啊，就是 when 贵的 com 杠 num， 就是每一行我们有三个啊，格子啊，一共我们循环九次，九除以三就是三行啊，如果我们这里输十二啊，大家看一下有什么效果， 那么输入十二的话就是四行，每一行就三个格子。好，这是第一种啊，我们九宫格的引用。 何老师讲一下第二种九宫格的引用啊，大家可以把这一段代码呢，重新输入到咱们的这一个界面里面，那么点击编辑呢？哎，我们就会现 试出这样的一个正方形的格子啊，好，我给同学们讲一下啊，这个第一行的这个 com 杠 num 等于二，是控制每行有多少个格子。好，现在我们把它改成三， 那么每一行呢，就可以装三个格子啊，那么这一句代码，我现在的阴影部分的这一句代码就是代表的第一个格子， 阴影部分的第二句代码就代表第二个格子，那么现在我们一行有三个格子，所以我们现在还差第三个格子，所以我们再复制一下啊，点击 ctrl c， 在下一行点击 ctrl v 啊，我们把这里改成三，我们再点击变异， 这样呢我们就有了一行三个格子了，对不对啊？那么现在如果我们还 想在第二行钻三个格子呢，我们就把刚才这一段话，把它 ctrl c 啊，再点击 ctrl v 啊，再把它粘贴，点击编辑， 那么我们现在就有了两行六个格子，那么如果要做九宫格的话，实际上再点击一次复制，再点击一次粘贴，就可以做啊我们的九宫格了。 好，这就是老师这期节目给大家讲解的我们外部与外库的调用，感谢各位同学的收看。

今天我们抱着休闲态度绑一个小程序的页面，目的是为了更好的掌握我的这个主角库。我先来看一下人家做好这个小程序页面的排版，我觉得这个排版和布局非常不错，上面有个轮毂图，然后功能模块最后 详情一个展示，这个还是做的非常不错，所以说今天我们来模仿一下这个小程序。我这边呢准备是模仿三个模块，第一个就是这个摸图， 那么第二呢就是这一块功能模块，最后就是模仿一下下面这个商品。其实做这个小程序，我觉得第一步首先要下载整理一些图片素材，我这边呢通过适量的一个科技和横货搞了一上午啊，总算是把素材都拿到手了。 当然了，凡是你在网上能看到的这些视频了，或者图片文字这些内容，百分之九十呢，我这边都能帮你搞到手，剩下 百分之十当然也是可以的，但是就看阁下这个愿意出多少音量了，这个 车远了啊。第二步的话，其实就是结合站着这边过写一下这个代码，就可以把这些给做完了。我们看一下这个万的这个这边挂他其实这个样子啊，我觉得是不错的。最后我们来展示一下最终这个效果，首先呢首页嘛， 这个六张的摩托一模一样，然后下面呢就是些功能模块，不能说一模一样吧，对吧？一共百分之九十吧。然后 这个功能模块的展示，最下面的话，因为这个福利中心啊，因为他这个我为什么没写，因为这个我没有用到这个 y 的主角，所以说我觉得如果说写是可以写出来，但是没必要，因为我主要是想掌握一下这个外的主主价，如果没有用到我就不会写这个东西，包括下面这个门店比较简单， 想弄看一下下面的验货机啊，看一下这个他这个图片啊，这个字包括下面这些乱七八糟这些字啊，不想调了，一直不想弄了，简单的物理下去，其实这些东西稍微调一下都可以，跟这个 百分九十九一样，这个其实就用到这个外的这个主角库，我觉得这外的主角库还是非常不错啊，确实人家这个做的确实好，我当然这些素材素材其实都有啊，这个水杯 都有，但是怎么说呢？没必要做的东西，因为这个这个都一样，参数只要传过来之后啊，都都 我这边看速度都在这边都模拟出来，到时候我直接连接这个后端啊，在后端随便写写的调调个方法请求一下，就比如说像这个随便请求一下这些数据就可以请求到，因为现在我个我这个云开发里边聚库，我这个聚库还有这个云海处 乱七八糟都没写，是有，之前是有写过一些东西啊，怎么说呢？他这个和这个 不太符合，所以说我没写，因为主要是图片不一样，所以说没弄就难弄，所以说就弄了一些假数据，但是这个数据直接放到云端啊，直接到时候都可以放不出来，没有什么太大问题，包括下面这个 像这个商品一些详情，这个我都做了，这次给你弄一些假数据，这些假数据放到这个数据库里边，到时候 就变成等数据了，这边呢我也同样用，我们这个都都用到了，便利啊，都便利出来了，包括下面这个都通过便利啊都获取到这些数据。我觉得这个其实做出来还可以吗？我觉得其实做的这样其实和这个真的大差不差的，你可能一下 看出这个差距差太多，反正做的挺有模有样的。我只能说做的还可以吧，马马虎虎。其实当我写完整个页面，看到最终这个展示效果，我觉得还可以啊，其实有朝一日能够给我提供一个这样平台，我觉得我一定可以写出来比他们更好的一些代码， 但是当下还有很多小程序等着我去写，而且我目前这个计划是争取春节之前把这些都写完。突然想起这么一句话，世人慌慌张张不过是为了顺阴脊梁，偏偏这是顺阴脊梁，能解世间万众收藏， 能保这个老人万年安康，儿女入得学堂，柴米油盐，五谷杂粮。所以说上脸加油吧！把今天呢就分享到这里，没有什么可跟各位聊的，我觉得这个壁纸还蛮蛮不错的。 这壁纸还挺好看的。这个我今天新找的一张笔，我觉得非常不错，大家有空的话也可以看一下这个。这个主角布我觉得还是不错，良心推荐一下，可以玩一下这个。行，今天就到这里，咱们下期再见。

什么？就写个选择性别，你就敲了这么多代码，那要是再加几个日期选择行政区划联动，岂不是要写几百行？别再傻傻重复造轮子了，快去看看路由三 wind 四 dect， 一行代码搞定，字典渲染、性别、日期、地区、状态通通给你封装好，保持 word 原有功能，表单、教学、事件回调全都在，还能轻松扩展自定义格式。托米字典印刷，让你少写代码，多喝咖啡，把时间留给真正重要的业务。记得搜一下 vivo 三 win 四 date， 你 的表单字典，从此简单一点。

好，乔文，大家好，我们今天的话呢，讲一下关于这个万的点击 s 在 vio 三当中的一个用法。首先的话呢，我们是需要用一个调料架，有 v 六调价搭建出来一个项目，那这个项目呢，我就请大家好了。咱们在安装完项目之后，那使用万能的话呢，首先要引入这个插件，那引入的方法呢，你需要在我们的文件中打开命令行， 打开了之后往里面输入，比如说 install， 那叫做 went 就开始了。那这样一个写法的话，有的时候用的好，我们在说的时候可能还注意听不太清楚，我这里面专门整理了出来，你们可以参照这样一个文档来用法， 首先把这个内容进行一个复制就好，咱们这个文档的话呢，你按照它里面的这个内容一个个敲就可以啊，在目前当中输入 npmififenois 敲回车，稍微等待两分钟时间，他的这个内容就基本上可以安装完毕了，我们稍微等一下后来接下来再安装后第二个内容。第二个的话呢，是我们在按使用按虚假的方式进行使用， 还是同样的 ctrlv 敲回车？当然有的同学可能在使用这个 npm 的时候呢，会比较慢，那这个时候可以使用 cnpm， 这个的话呢，他使用操心下会更快一点点，稍微再等他两分 时间安装一下。等这个完全安装好之后呢，我们再来进入第三个步骤，在第三个过程当中，这里面需要进入我们的一个文件，这个文件呢，你通过我们的，不管是外机后的，还是你下边器打开咱这个目录，它里面的话都可以找到一个背部点， ctrl 点 gs， 如果找不着的话呢，你可以自己新建一个啊，在这里边你可以发现我已经把刚刚内容的这里面有过了啊，就是你在粘的时候要注意 好这个地方，如果你已经有了背包点， ctrl 点 gs， 那你直接粘里面的 plus 就行。如果你没有这个文件的话，你需要自己重新创建这个文件，然后把这个内容整体的给复制过去，这个布置操作一定要注意啊，写好之后，咱们接下来在相当中执行 ncm ren sir 来运行咱们的项目。 项目运行好之后呢，我接下来可以呢进入 loco host， 因为默认账号呢，都是八零八零啊，这个项目是重新创建的项目啊，它里面什么都没有，是原始的内容，就是一个横，一个 boss。 那接下来我想要使用万达的内容，我们可以呢进入到我在这个文档当中给大家也发了一个网址啊，你们看这个网址进来， 他这个用法呢，你需要别人里边说的是你就可以全局注册，也可以局部注册，对吧？那我们在用的当中呢，就使用局部注册方式，因为这个按勋引入码，局部注册用 inpot 八等方半的，以这个八等标签为例， 局部引入，比如说呢，我引入在这个叫做 homemade 点入当中 inpotteen broment， 接下来呢在他第二个需要找到 comenonces 组建当中使用这个叫做巴特点内幕冒号巴特，把这个组件注册到我们的 没有文件当中，注册完毕之后，用法呢很简单，你就需要在上方摊牌的里边随便找个位置就行了，比如说呢，写一个叫做 vangun， 在这里面稍微写一下，这是咱们的一个叫做万特按钮，写好之后保存，那么在英文中呢，我们来刷新一下，你就可以看到这个万特按钮，他跟我们普通的八次按钮是有区别的，比如说呢，我正常写一个小八次，这是一个小按钮，正常按钮两个呢，做一个三照做一个区别，可以发现我们的万次按钮， 他的样式会比我们的普通的巴达牛更加好看。并且呢在巴萨的用法或者说我们的办法的用法呢，在这里面都可以找啊，比如说我想使用巴达牛，它里边可以添加一些属性啊，或者添加一些我们常见的泰国属性或者其他的使用值，都可以呢，在我们的我们当中找到，比如说它里面有太伏主要按钮或者成功按钮，或者说有一个叫做警告或者危险都可以啊，我们来找一个叫做危险的灯点， 往这里边稍微复制一下保存，然后这个按钮呢他就已经成功了。这是我们今天给大家分享一个小内容。

also。

普通人也能开发一个 ui 组建库，系列五，普通人也能一比一实现一个 ran to vip 组建库前四期我们带着大家从零到一的实现了这个 rap aui 组建库的打包讲解，以及第一个通用组建的编写，还有微信小程序 demi 的编写 与组件文档的编写。下面带大家来看看我们编写的组件库文档的效果，可以看见和官方的组件库一模一样，唯一的区别就是我们只实现了其中的巴腾和 ica 两个组件，那其余的组件该怎么实现呢？这期我们就带大家来下载代码本地运行，从零到一的开发一个新组件， 并编写组建的文档和小程序的 demo， 以及最终将代码提交到我们的代码仓库。这一整套流程也是参加工作需要用到的，值得收藏起来慢慢看哦。首先我们点击 get up 章鱼图标进入原码页面，可以看见我们的开发文档中详细描述了如何下载代码安装依赖启动开发文档 打包项目打包成微信小程序 demo 的，下面是微信小程序的 demo 效果图，下面我们就来教大家如何下载代码。首先 fork 这个仓库， fork 的意思就是把这个代码仓库复制一份到自己的仓库中，目的就是让你自己可以在自己的仓库内修改代码， 之后把代码提交回原代码仓库。好了， focus 成功后，我们就可以复制仓库地址。接着我们打开命令行工具，使用 get clone 命令将代码下载到本地。 下载成功后我们 cd 进入原码文件夹内，接着我们输入 com 点使用 vscod 打开当前文件夹下面的代码，进入代码后，首先我们使用样安装一下项目的依赖，安装好后，我们使用样乱 dv 启动项目， 可以看见项目文档已经成功启动了，下面我们实践一下使用 release set 命令打包这个文档，可以看见打包到 set 杠 desk 文件夹内，如果要发布这个文档的话，直接把里面的文件复制到服务器上，开一个进它的端口就 ok。 下面我们尝试一下使用 bill 命令来打包项目，可以看见戴斯的文件夹被删除后，又重新打包生成了，里面就是最终给开发者引入使用的逐渐代码了。接着我们运行一下生成微信小程序 demo 案例的命令 和启动文档是同一个命令。运行成功后，我们将 example 文件夹导入到微信小程序开发的工具内，我们来看一下 demony 的效果是否和官方的一致，这样这个组建库的小程序 demony 就开发成功了，我们可以直接发布到微信小程序内。下面带着大家来徒手实现一个 loading 组件，我们来到官方文档，来看一下这个 loading 组件的使用，说 说明和实现效果。接着我们打开这个下载好的组建库官方原码，我们找到存放这个 loading 组建的文件夹，我们以官方的组建作为参考，一比一的还原到我们自己的组建内。如果需要好好练习编写组建库的同学，这里可以仔细查看每个代码文件的编写方式，根据组建库的文档一个一个的找出实现他们的代码， 一点一滴的动手编写实现他们，这样你的编程能力就能得到飞快的提升了，这可比培训班要教的内容靠谱的多了，毕竟这个是一个工业级别的通用组建库， 里面的代码沉淀着多年的开发经验和积累了多年的编程知识，强烈建议大家去实践一下。由于时间原因，这里我们就先把代码复制过来，改成我们自己的主角 名称。下面这个 redmi 文件就这个组件的文档，我们编写好后，在根幕下的问的点卡费给点接受文件中配置上这个 loading 组件的文件菜单之后，我们重新运行第一位命令，启动文档， 可以看见文档上多了一个 loading 组件的菜单，我们点击他组件的文档就出来了，说明这个组件编写成功了。那怎么验证这个组件是否开发成功了呢？下面我们就需要在这个 loading 组件内的 demo 文件夹内使用这个组件编写一个案例，里面就是编写的案例了。接着我们在小程序 demo 文件夹内配置上这个 loading 组件的案例页面，还要 通过这个组件打包后的路径配置上他的全局组件的名称。接着在 config 点接触文件中配置目录，目的是在执行第一位打包命令时，会自动给小程序生成对应的 loading 案例页面。配置成功后，我们再次执行第一位命令，重新打包项目的小程序案例。打包完成后，我们看见 dest 文件栏内生成了 loading 组件代码， 说明打包成功了。下面我们就可以使用微信开发者工具打开看看，验证一下我们编写的组件是否可以成功运行，可以看见 loading 组件的效果正常显示了，说明组件开发成功了。下面我们来教大家把编写的代码提交到我们的代码仓库，我们点击这个数字十三的 get 分 图标，这里表示修改了十三个文件类的代码。我们点击加号，把代码添加到暂存区，接着我们在上面输入一个卡密的提交说明，点击回车提交卡密，接着点击 post 把代码推送到远程代码仓库。接着我们去原代码仓库创建一个 pr， 等待作者合并的代码即可。 最后我们来演示一下，把你们提交的代码合并到原码里面，合并结束，这样整个开发流程就成功完成了，你现在已经可以给开元项目做贡献了，这样你就是一个合格的程序员了。下集教大家将项目发布到 npm 包管理平台， 让其他开发者真正能通过 npm 下载并使用你的主监库来开发小程序。期待的话就点个关注吧，这集我们就这样结束了。

观众老爷们大家好，我是新人 up 主金沙洋，今天我们讲微信小程序开发中的巴特组建的实际应用， 本节课呢，我们就说一说巴等组件的用法以及他常用的三个属性，他的语法很简单，现在我们看一下在微信开发者工具中的实际应用情况。 好，我们现在演示一下巴特组件的使用，现在已经写好了，我们编译一下，我们可以看到不动按钮出现了， 接下来介绍 button 组件常用的一些属性啊，这个是 type 属性。 话不多说，我们来看一下演示啊。拍 mary 主要是出现的是主色调按按钮。 one 主要是出现的是红色的按钮，主色调呢，主要是蓝色的，看一下演示啊，点一下， 瞧，这就是主色调按钮，还有一个就是红色的警告按钮。 第二个常见的属性是 size 属性。 好，我们演示一下， 点一下保存，看出下面出现三个比较小的按钮。 好了，我们再试一下这个镂空的属性。好，我们试一下这个 镂空的属性啊，保存一下瞧见没，这个镂空的按钮就是已经出现了。 好了，今天的课就上到这里了，如果你喜欢的话，不要忘了支持一下我们的创作啊。

朋友们好，这一节课呢，咱们来了解一些其他的比较常用的组件啊，那第一个呢就是 butt 按钮组件，第二个是以妹纸图片组件，第三个是 navigator 导航组件，只不过呢这个导航组件啊，我们会在后面的课程中进行专门的讲解， 那所以说我们就重点来看一下八层还有一妹纸这两个组线。那首先呢我们来看一下这个八层啊，八层呢就是按钮组线，它的功能呀要比 h 天猫里面的八层按钮要丰富 很多。在小程序里面，我们可以通过八层的 open tip 属性可以调用微信提供的各种功能，比如说我们可以通过 open tip 属性指定不同的值，哎，就可以去调用微信里面的客服或微信转发，或者说可以来 获取用户的授权，又或者说咱们可以获取用户信息等等。哈，那这些微信提供的能力啊，都要通过咱们的 open tip 属性来进行使用，还是咱们的八层按钮。 那然后呢我们去了解这个乙妹子啊，乙妹子就是咱们小程序里面的图片组件，在小程序中默认的这个乙妹子组建啊，有一个 宽和高啊，默认的一个宽呢大约是三百像素左右，高度呢大约是二百四十个像素左右。那么这个耐力跟上组建呢，还是咱们小程序里面的页面导航组建，就类似于 htm 里面的 a 链接。 好，那首先呢咱们去了解下这个八成组线如何来进行使用啊？那比如说我们可以在页面上啊去放一个普通的默认八成按钮，它的颜色呢？ m 默认就是一个灰色的背景色，然后呢里面的文本是黑色的，那如果咱们需要指定不同类型的按钮，咱们可以用太婆属性来进行指定，比如说太婆等于 primary 啊，就是一个主色调的按钮，在微信里面主色调就是这个绿色啊， 那如果咱们指定了太和等于 one， 就代表说是一个红色的警告按钮，那么接下来啊，咱们去做完演示，来打开自己的微信开发者工具啊，咱们先放一个普通的 button 按钮来，在这里呢写段文版啊，这是普通 按钮，也可以是默认的按钮啊，来咱们保存之后呢，大家来看，在页面上就会出现出一个灰色背景的一个普通按钮，那如果咱们希望来一个主色调的按钮，哎，咱们可以去改一下太婆属性来先修改温版啊， 是主色调按钮，把这个太婆哎做一下修改，等于 primary t r m a r y。 好保存之后呢，咱们再来看，在页面上就多了一个绿色的按钮，那如果咱们希望来一个警告按钮， 来看下版本啊，这是警告按钮，可以来一个 wa， 按完就行了，要保存 哎，大家看在页面上就有了一个红色的警告按钮，那么接下来啊，我们再看一下这个按钮的另外一个属性，哎，是 size 等于 mini， 那通过 ces 等于 mini 这个属性啊，咱们可以在页面上选出一个比较小的按钮，大家来看啊，默认情况下这个按钮是独占一行的，看到了吧，那如果咱们希望来一个比较小一点的按钮， 然后呢是一个横向排列的按钮，那么这时候呢，咱们可以给这个按钮加一个 size 等于 mini 这么一个属性啊，就代表说我们希望选出一个小尺寸的按钮来，咱们去做演示啊，比如说我们复制上面的这三种按钮，然后呢加一个 size 属性 s i z e 等于 迷你，然后咱们快速的复制一下啊，来从这选中 ctrl c 复制， ctrl v 粘贴， ctrl v 粘贴来保存。之后呢，大家来看页面， 在页面上啊就多了一二三三个按钮，你发现啊，他们的大小哎就没有之前那么大了，对吧？而且呢，这三个按钮是在一行上来进行展示的，那接下来啊，我们再看一下这个按钮的另外一个属性就是 plain 啊，通过 plain 咱们可以在页面上选出一个楼 空的按钮，就是呢没有背景色了，但是呢有了一个边框线。来咱们去做演示啊，比如说我们复制这三个按钮哎， ctrl v 粘过来，再加一个属性 p l a， n， 哎，直接来一个属性就行啊，不用给直来复制粘贴，粘贴好保存之后呢，大家来看，在页面上就多了三个镂空的按钮， 好这一节课啊，咱们给他去介绍了一下这个按钮的三种不同用法，那如果咱们只想更改按钮的这个颜色啊，更改这个色调的话呢，咱们可以来太婆等于 primary 或太不等于 one 啊，可以选出主色调的按钮，或者说警告类型的红色按钮，或者说咱们直接放一个普通的灰色按钮啊，这都是可以的。那如果咱们希望 来一个小尺寸的按钮，可以加一个 cess 等于 mini， 那如果我们希望渲染一个镂空的按钮，咱们可以加一个 plain 属性就行了。 那同时啊，大家还记不记得我们曾经说过，在 app 点 justin 里面有一个 style 等于 vr 证明一些点来控制咱们这些元素的样式版本，对吧？ vr 代表说最新的样式啊，那如果我把它给干掉的话，大家来看这些按钮的颜色包括它的样式会发生变化来保存， 大家看是不是这个按钮的颜色包括它的样式都发生了非常大的改变呀？那所以说啊，咱们在这个微信小程序里面，可以通过 app 点 jackson 里面的这个 style 接电来控制我们这些组建。使用新版的样式还是使用之前旧版的样， 默认情况下这个带了 v 二就是新版的样式，如果希望启用旧版的样式，你把这个节点给他删掉就行了。那好，这一节课关于咱们按钮组件的基本使用，我们就为大家介绍到这里。 这节课呢，我们来了解一下小程序中以妹子组建的基本使用。在小程序中，我们可以使用以妹子组建来渲染一张图片。 那么之前呢，我们也介绍过啊，默认情况下，一个空白的乙昧的组建，他也会占据一定的宽度和高度。那所以说，如果我们在页面上放了一个空图片的话，咱们只要通过标签选择器给他加一个边框线，就能够看到他的默认宽度和 高度。同时呢，还可以使用 soc 属性来指定咱们渲染哪张具体的图片来。接下来啊，咱们去做一下 演示，打开自己的微信小程序项目啊，我们可以放一个空白的图片来姨妹纸。然后呢，我们再放一个 妹子，用 soc 属性来加载咱们项目中一张具体的图片，那比如说我们希望加载项目跟目录中以妹之词文件夹里面的一点拼音，那么这个时候啊，咱们这个斜线哎，就代表项目的跟目录， 在根部录中有一个文件夹叫一妹之词，在这个文件夹中又包含一张图片，是一点品质。那么接下来啊，咱们可以按下 ctrl s 做一下 存，那同时呢，咱们还可以给他去加一个边框线来通过标签选择器啊，选中页面上所有的图片，加一个包的边框 epx， 然后呢骚类的，接下来来一个红色的边框线，好保存。之后啊， 大家来看，在页面上就有了两个图片的边框线了，你发现啊，默认情况下，这个图片确实是有一个宽度和 高度，同时呢，你发现第二张图片呢，好像稍微有点变形，是不是啊，难道这张图片本来就是变形的吗？哎，其实不是啊，你看咱们双击打开这张图片是正常的一个宽高笔，对吧，但是为什么见到咱们页面上他就变形了呢？哎，这是由于咱们 以妹子图片里面的 mo 的属性所导致的啊。那么接下来我们去了解一下以妹子组建的 mo 的属性， 在以秘制组件中，可以通过 mo 的属性来指定图片的裁剪和缩放模式。那么在默认情况下呀，咱们页面上每一张图片都有一个默认的 mo 的值，哎，就是 sky 图， 通过这个默认值啊，就能够让咱们这个图片被拉伸，从而呢填满整个以妹子元素， 那这样做呢，是有一定的好处的，就是咱们这个图片啊，不会有一些空白的间隙，但是呢缺点呢，也很明显，就是这个图片呢，可能会是真是不是啊，哎，那么接下来啊，咱们可以去试一下 mode 他其他的一些可选属性，比如说咱们可以选择 spac 是 fee 的， 在保持纵横笔的情况下，完整的将图片给他显示出来，来，咱们去做下演示啊，比如说就拿这张胡歌的图片来举例啊，我们加一个 mode， 哎，咱们不用默认的 model 值了，咱们使用第二个值是 spect fit 来加一个 a s p e c t f i t 好保存之后呢，大家来看效果啊， 哎，当前这个图片就没有再变形了，但是呢，有一个副作用啊，就是两边会有一定的留白间隙， ok 啊，那这是咱们的第二个属性，就是保持纵横笔的情况下，将图片完整的显示出来。那么接下来啊，还有另外一个属性就是 spect feel， 他呢也是保持纵横笔，但是呢，咱们这个图片可能会发生裁剪，就是把这个图片放大放大，按照比例放大，直至能够把这个区域完整的填充上为止。 那么接下来啊，咱们去试一下来，是 s packed field 啊，把这个 fit 呢改成 field 就行了。 f and l field 呢，代表是填充的意思啊，会占满咱们整个图片区域，会把这个图片的进行放大啊，来保存，大家来看啊，哎，当前呢， 这个图片就等比例放大了，直至把整个区域给他填充上为止。那么这个时候大家发现咱们这个人头发这一块好像缺了一部分，为什么呀？因为我们是按照这个比例啊，对图片进行了放大，那放大之后呢，可能有一部分超出咱们这个区域了，因此呢，就发生了这种裁剪的效果，明白了吧？ ok 啊，这是咱们的第三个属性， aspect few。 那同时啊，还有另外两种模式是 yz fix 还有 hat fix。 那其中啊， yz fix 代表说宽度 不变，但是呢，这个图片的高度会进行自适应的变化。大家都知道啊，默认情况下，图片是有一个 自己的宽高的像素值的，对吧？哎，那如果啊，咱们指定这个值等于 y 字 fix， 那么这个图片的宽度是不会发生变化的，还是这么宽， 但是呢，高度啊，会按照咱们这个比例来进行自动的适应。来，咱们去演示一下就明白了，来一个 y s fix， 好，保存一下， 大家看这个图片呢，是完整的显示出来了，同时你发现啊，咱们这个图片的高度 哎，不再是之前的默认高度了，你发现没有，这个高度要比上面这个图片的高度要高一些，为什么呢？因为 yzfix 所代表的含义就是这个图片的宽度不变，但是呢，高度要进行自适应的调整，直至把整个图片给咱们渲染出来为止。 ok， 这咱们的 y 子 fix， 那么接下来啊，咱们可以改一下，改成 hatfix 来 h e i j h t 保存。那么这个时候啊，大家发现 咱们这个图片的默认的高度哎，并没有发生任何的变化，你看啊，这个高度哎，是完全等于上面这张图片的高度的，但是呢，宽度却发生了自适应的变化。 ok， 这咱们这个图片的 hat face 就代表说高度不变，宽度进行自适应，直到把整张图片完整的显示出来为止。 好，这一节课啊，咱们为大家介绍一下以妹子组建的基本使用。在默认情况下，以妹子组建呢，有一个自己的宽和 高。然后呢，我们可以通过 s， r， c 属性来指定加载哪一张图片。同时呢，我们还可以指定 mo 的属性啊，来指定我们使用什么样的方式对图片进行裁剪或者进行缩放。那默认情况下，它所使用的 mode 值是 sky 图 field 啊，会不保持纵横笔。同时呢，把咱们图片进行拉伸，直到填充满整个盈利的元素为止。 那么在实际开发中啊，大家可以按照自己的需要来选择不同的 mod 模式来满足咱们自己的需求。好，这一节课啊，关于这个以妹子图片组建的使用，我们就为大家介绍到这里。

这一讲开始的话，我们主要给大家讲解一下这个微信小程序中的这个组件啊。那首先我们看一下小程序里边有哪些内置组件啊？那这里边他给我们提供了好多，首先这里边试图容器相关的组件的话，有这个 view scott、 views april， 包括还有可移动的这个区域，包括还有覆盖物 啊，这个基础内容里边有什么？呃，图标文本，还有这个滑块，包括这里边还有这个，呃， 有点类似于这个副文本的一个一个主角啊，那在接下来这里边表单相关的啊，这就和我们 h t m l 啊， h t m l 一点类似，然后这里边还提供了什么导航、媒体，包括地图、画布啊等等这么些组件，那这就是官方给我们提供的内置组件。那接下来的话，我们就看一下这个内置组件怎么学，然后接下来我们再一个一个给大 大家大概过一下啊，首先的话我们学这个组件之前的话，大家看一下，那这个组件里边的话东西比较多啊，你看点开 sweeper， 那这里边你哎看上去，对吧？这么多东西啊，我们不可能一个一个去看，对吧？所以这时候我们就不去看他这个文档，我们怎么学呢？ 一种方法，我们首先啊，首先不去看他这个属性啊，我们首先找到他这个视力 demo， 对不对？视力 demo， 然后接下来的话，我们把可以把视力 demo 导入到我们这个编辑器里边使用。 然后再一个就是大家仔细看啊，这里边有一个啊，在开发工具中预览效果，那这时候他是个 sweeper， 对吧？那接下来我们打开我们这个小程序的开发工具，我们点一下他， 点一下他以后，这里边弹出打开微信 vip 开发工具，那你就点啊，点打开微信 vip 开发工具，点完成以后，然后这里边你看到他这里边有个导入代码块，对吧？导入代码块，那其实他就相当， 那就是你点击实力电网，他就现在把这块代码导入到我们这开发者工具，然后之后你点击导入啊，包括你这里边也可以贴写你的 a p p id 啊，也可以贴写 a p p id 啊，那我们先导入一下，看一下 导入完成以后，然后接下来这里边他就给你创建了个临时的项目啊，临时的项目，然后这里边就是这个 sweeper 的一个官方的一个也是代码，对吧？ sweeper 的官方也是代码， 怎么学呢？这个不需要记，你只需要会改就行，对吧？啊？这就是我们这里边给大家说的导入代码块啊，导入官方的代码块啊，那接下来这个代码块里边，呃，这个代码块里边，这个是他的业务逻辑，这是他的 html， 这是他的 css， 对不对？这是他的 css， 然后这里边还有一个，呃，就是微信小，呃，微信啊，微信官方提供的 v u i 的一个 c s s 啊， v u i 的 c s s， 你也可以 把它拿过来，对吧？回头用的时候也可以直接把它拿过来用啊，这就是这个视力电贸啊，就是导入这个代码块， ok， 那这个我先关关掉啊，包括其他的也是一样，包括我们这里边，你看啊，有这个呃， 可移动的区域，那你点开，你也不知道怎么用，对吧？这么多属性肯定不会一个一个去看，对吧？啊？你用到的时候，首先找 demo， 那找到 demo 以后，这个 demo 里边有些属性看不懂的情况下，然后再去找这个文档啊，这样去学，那接下来你看，我们首先看效果，那你点击在开发工具中预览，对吧？然后在这里边点开 啊，打开的时候，这里边我们填写一下这个 appidappid， 一般在哪找呢？大家看一下啊？在我们这个 project 里边 project configure， 然后这里边有个 appid， 如果你呃有时候忘记填写了，你可以在这填写一下，对吧？把它拿过来，拿过来以后，然后这里边点击导入啊，那这时候这个项目就又导入到你的 一个啊，零食的一个目录里边，然后他给你打开，打开以后呢，这是我们学的时候就可以，怎么学呢？我们就可以看他这个室内 demo 啊，然后进行一个复制，进行一个学习，对吧？ 啊？再看一下，那这里边他 index 里边也有，对吧？ index， 这是他的 html， 然后这里这里边是他的一个业务逻辑，对吧？业务逻辑，然后这就是可移动的这个区域啊，可移动，对吧？包括这里边点还可以设置，那这个设置就是点这个，呃，点哪个呢？点这个， 点这个按钮，对吧？点这个按钮它触发了 type 世界，那就是执行了这里边 type 世界， type 世界，然后这里边儿啊， csd 这个 x y， 对吧？设置了这个，谁呢？设置了它这个上边的这个区域，稍等啊，区域在哪呢？在这啊，设置了它这个可移动的区 啊，外层是这这么个，然后里边是这么个区域，对吧？ xy 表示你的一个坐标，然后这里边包括它啊，还有这么些东西，对吧？ 啊？这个文本，对吧？包括这个啊，可移动的区域，对吧？可移动，横向和纵向移动，对吧？啊？超出边界的一个移动， ok， 这就是这个呆毛，对吧？ 也就是这里边给大家说的导入这个什么呢？导入啊，这个代码片段啊，导入代码片段就这样去看，但这是一块啊，那官方的话在这啊，这是一块，回头大家就直接点这，然后官方在我们这个文档里边，他这里边还有个叫势力代码，这个我们在刚开始就给他说了，叫小程序企业代码，对吧？在这点开， 点开以后，那你要学他，你也可以扫描这个二维码啊，那接下来的话，我们打开这个也是给大家看一下啊，我用手机扫一下，扫一下这个二维码啊， 扫完以后，那大家就可以看一下小程序具体有哪些功能啊，那这 之后他就打开了小程序的一个视力 demo， 那稍等一下啊，打开了这个小程序的视力啊，这是真真实的这个手机。那接下来这里边有什么？试图容器，对吧？然后这里边有什么啊？有什么？ vivo， 对吧？这就是 vivo， 就是我们布局用的啊 啊，然后接下来再返回，返回这里边还有什么？ scarville， 对吧？ scarville 就是你刚才看到的啊，这个三六零手机微视比较讨厌人啊啊？ scarville， 然后这里边它可以，可以什么呢？可以滚动的一个区域啊，可以滚动，你看一下啊，那上边这个是不是上下滚动， 但是这个手机上边可能稍微有点延时啊？啊？左右滚动，对吧？然后这里边还有什么呢？还有我们这里边 sweeper， sweeper 的话它就是个龙波图啊，就是我们刚才看的 啊，那这里边的话你就可以看一下这里边这些东西怎么用，对吧？包括这边文本文本框，对吧？文本框啊？文本框，然后包括啊，这里边还有什么呢？还有我们这个，呃，什么？比如说叫 啊 pick 组件，对吧？啊？点一下看一下，对吧？这样一个 pick 组件，包括这里边这些东西，对吧？那这时候你看这个有啥用呢？这时候你就知道小程序里边具体有哪些东西吧？你要用到的时候，你是不是就找对应的这个组件就行了啊？包括还有我们对应的这个 redo， 对吧？ redo 啊，这就是小程序的视力电貌。那包括还有什么媒体啊？媒体什么图片了啊？图片，对吧？图片啊，包括还有我们这个，呃， vio 啊， vio 播放，播放我们这个视频的，对吧？播放视频的点一下，他可以播放的啊？ 啊？播放这个视频，对吧？ ok， 那我们返回一下啊，然后这里边还有什么呢？还有这个什么啊？花布花布。 converse 相关的啊？ converse 相关的啊，包括还有这个。呃，什么广告相关的主线啊？广告相关的主线。这就官方给我们提供的这些东西啊。然后接下来的话，那这里边还有 接口，接口的话就是它这里边 api， 它给我们这边主要俩括骨呢，一个叫组件，一个叫 api， 对吧？那你这里边你也可以看一下啊，它这里边这些东西到底怎么用，对吧？啊？那回头我们再给大家讲一下这 api， 那这里边的这个这个组件啊，组件的话啊，那我们就给大家看几个啊？那比如说怎么学呢？比如说刚才的话，我们看到了，看到了刚才他这个视力点宝有这么多东西，比如说接接下来我们要用一个东西啊，就比如说我们用最简单的这个谁呢？这个龙波图啊？龙波图这里边在这个视图里边是不是个龙波图啊？ 我们就要用这个龙波图，那用这个龙波图的话，那怎么用呢？一种方式找到官方文档啊，这里边有 sweeper， 找到它，找到它以后，我们不建议大家看这个啊，先不用看它，我们看谁呢？我们看这个 demo， 对吧？看 demo， demo 里边这里边就有个 sweeper， 对不对？ sweeper， 然后把它复制过来，你看啊，我们就给大家演示把它复制过来，你先不用管它到 底是干什么的，我们先把它复制过来，当然我们这里边先新建一个页面啊，稍等一下，我们这边新建一个，比如说叫 news 页面啊，给大家演示这个龙博图啊， 不需要记，只需要会啊，会用就行啊，这就是它这里边的组件，没有任何的业务逻辑啊，没有任何业务逻辑， 然后这边六字就创业成功，创业成功以后，接下来我们要在这里边使用他这个 sweeper， 对吧？啊？那这时候把这个 sweeper 复制过来，当然你也可以把全部都复制过来，对吧？我们这里边的话下边是按钮，所以你可以不复制，我们就只复制上面这个 sweeper。 ok， 把它拿过来， 那 cv pro 复制过来了，复制过来以后，然后接下来再找到它这里边。这个啊，配置，对吧？找到配置看配置里边是怎么写的。配置里边的话东西好多啊，我们首先把这个 data 拿过来，其他的先不用管它啊，我们首先拿数据啊，那就是找到我们这个 g s g s 里边，我们这里边 把我们，呃，这个这里边没 us 些删掉啊，没 use 些删掉 啊，删掉以后，然后接下来我们在这里边对他啊，对的，我们复制一下，换成他的啊，换成他的，然后接下来呢，我们再看啊，就是复制过来以后我们要把它运行起来，那之后你就看看具体什么意思。那首先一点看这里边，哎，已经成功了，对吧？是不是已经笼包头成功了啊？那一点看啊，就这样就跑起来了，跑起来以后我们一点看啊，这里边有个， 呃，这叫 indicator， 这个 d d o t s， 对吧？有这么个东西，那这个东西不知道什么意思，那这时我们就开始找了啊，找什么呢？ 找文档啊，找文档，找到这个 super 这个啊，在这找到 super 这个文档以后，在上边啊，加 ctrl f， ctrl f 表示搜索，搜一下这里边有个，呃，有就就找到了它，对吧？找到了它，你看它什么意思呢？就是是否 不显示面板的指示点。二什么意思呢？就是他的意思，就是你是否显示这下边的这几个点点点，对吧？那这个他是从哪里来的呢？稍等啊，我们再找到这个啊，这个是谁控制他呢？是这个啊， 这个属性来控制，那你再找，找到他啊，那就他来控制的，如果他等于个处的话，那这时候你看一下下边是不是就有几个点点点，对不对啊？点点点是不是就出来了？点点点就出来了，对吧？这就这个东西，然后接下来再一点点看，那这里边有个 auto play， auto play 是不是就自动，自动什么呢？ 啊？自动轮播，对不对啊？就是你自动动，那这里边我们改成一个 t r u e， 很简单，对吧？那这样它是不是就会自动动了啊？这就是这个谁哒？这就是 auto play， 对吧？你看一下啊，是不是就自动动了？然后每隔呃，五百五百毫秒啊？五千毫秒是不是就动了？五秒钟是不 动一次啊？那这里边你再看，就这样学，对吧？然后这里边有个什么啊？英托，对吧？英托就是我们刚才说的借歌的时间，然后这里边还 duration， duration 就表示你这里边，哎，从这到这的一个运动时间，对吧？这叫 duration。 然后接下来这里边 block block， 这里边有个 three pro item， 对吧？ three pro， three pro item 固定写法， block 的话就是个区块，然后这边通过微信 four four 的话啊， vc four 循环水呢？循环我们这个 inmates， 对不对？是不是循环这个这个图片地址啊？啊？当然这个是远程地址，然后循环它的时候，然后这里边啊，然后下边有个引位置，显示我们对应的图片，对吧？啊？显示对应图片 这边宽度高度，但是宽度的话，我们建议大家不要直接写个这样的宽度，你如果这样写的话，你看我来一个呃大的手机，比如叫 iphone 七 plus， 看一下，他这种可能就占不满我们这个屏幕了，对不对？所以这时候的话我们要改了，比如说这里边，哎，我们要改他的样式，那高度一百五，宽， 宽度的话我们给他来一个百分之百，那就是找到 sweet pro item， 那就在这里边写 sweeper item 啊， sweeper item 下边的谁呢啊？ sweeper item 下边的因妹子 i m a j e。 然后这里边写个宽度 w w i d 宽度来个百分之百， ok， 保存一下，保存一下，那这时候我们看一下我们这个龙博图有没有搞定啊？啊？那这样，这样一个龙博图是不是搞定了？而且它能自适应屏幕，对吧？是不是自适应屏幕 啊？或者你如果还要自适应的话，就这里边的话，他有些设备会变形的，那你这时候把他的高度去掉，高度去掉以后，然后这时候再保存一下，那这时候他就是宽度百分之百，高度是不是自适应了？那这时候啊，我们再看一下，对不对 啊？或者你这里边写个高度，一个凹凸宽度是宽度百分之百啊，高度一个自适应，对不对？那这样他就可以接 这种不同的一个中端了啊，接入不同的中端，而且不会变形高度。 auto 还不行吗？啊？ auto 还不行？不行的话，那我们就要不就不设置了啊，先不设置了，或者你给他，你给他按照设计稿的一半来啊，那这样就搞定了，然后这里边你再切换回我们这个小手机啊，小手机， 那这样的话是不是也 ok 了？这样的话也 ok 了啊，这就是个龙波图，就这么简单，你看一下，那这时候大家回头再看这个电脑的时候是不是就知道了，这是我们这个龙波图的一个 图片地址，然后这是控制他下边是否显示点，这是控制是否自动笼播，这是控制一个笼播的一个时间，这是控制你笼播的一个就是你从一个页面到一个页面的一个速度，对吧？切换的速度， 这样龙波图就搞定了。啊，这就龙波图组件。 ok， 那接下来我们再继续啊。啊，刚才说了，就是你学他的时候，你首先啊，首先 首先你看一下，看一下这里边这个视力带帽里边有没有你想要的这个功能，对吧？啊？如果有的话，你再找找这边的组件，找到以后首先看文档，对吧？看文档，然后接下来去使用， 但是有些时候的话，这个文档啊，文档我们看不懂，对不对？看不懂，那看不懂的话两种方式，两种解决方案，一种解决方案就是在这是不是有个视力代码，然后点开，对吧？点开把我们这个对应的代码导入啊？导入， 当然你如果导入一次以后，你再导入他就报错了，对吧？那这时候怎么弄呢？就是我们已经导入过这个，谁呢？导入过这个 cpr， 那你这时候你就点击时呢？点击，你看我刚点击时，我是不是点返回，点到这里边有代码片段。 好，这时候找到 sweeper 主角势力，然后再点开，这就是你以前导入过的这个 sweeper 主角，对不对？就是你如果看文档搞不定你之后怎么办呢？我们这时候找， 找到他这里边这个视力 demo 啊，找到他这个视力 demo， 打他这里边这个 index， 你可以直接拷贝过去，对吧？看一下他这里边是怎么写的，有些没用的你可以删掉，对吧？有些没用的你可以删掉，比如这里边下边这些没用的你可以删掉，然后上边这个东西，这就是官方给我们提供的这个啊，设备块图件啊，这样就搞定了啊。 行，如果这里边还不可以的话，那这是怎么怎么弄呢？那这是我们也可以下载官方的这个原码啊，下载官方这个原代码，这是他所有的代码。下载官方的这个原代码以后，那这里边他就包含了所有的代码啊，那稍等一下 啊，这里边包含了他所有带帽复制过来，复制过来以后，然后接下来你可以在我们这个小程序的工具里边啊，把他这个完整的 demo 导入进来啊，就是这个完整的 demo， 我们可以解压一下啊，你看我解压，解压完成以后，我们可以把他这个 demo 导入进来，导入进来你可以慢慢去学 吧啊，然后这里边把它复制出来，复制到这个，呃， demo 里边， 然后接下来把它给删掉，对吧？删掉， ok， 那这时候的话我们也可以直接把它导入导入，怎么玩呢？就这样玩，你看啊，我们在这点击项目，点击，呃，新建项目啊，新建项目，那我们这时候选择到谁呢？选择到这个，呃，这个 demo， 然后这时候点击确定啊， 确定以后这里边 a p p id 呢？这边也没有，那这时候你也可以写你的 a p p i d 啊，比如说写我们的 a p p i d， 我们看我们这有没有一个 a p p i d 我们先找到，稍等啊，我们在哪里有 appi 地址来着，是不是在这啊？有这个 apid， 你也可以导入的时候，把它这个 appidt 上，就和我们以前创建项目是一样的啊，这里边写你的 appid， 然后这边写个 demo， 对吧？或者写个微信 demo， 然后之后点击确定 啊，那这样的话，我们小程序的体验 demo 就导入到我们这个，谁呢？导入到我们这个 b a 七了，导入到 b a 七里边，那这时候他这里边的所有的元代码都在我们这啊， 啊，就是我们刚才给大家演示的手机上演示的所有的原代码都在这，对不对？那接下来你要看这个 sweet vivo， 对吧？或者是看 sweeper 啊，那比如说我们还是以 sweeper 给大家举例子啊，就看你怎么选 啊，还是以 sweeper， 那你就点 sweeper， 对吧？点 sweeper， 那这里边是 sweeper， 但是我们要学的话，你想在默认加载 sweeper， 那之后你就找到这个 app， 点 jason 来进行什么呢？什么配置啊？那它这里边所有的代码都在配置字里边，组件就在这个里边，对吧？组件就在那，组件就在我们这里边，然后配置里边，然后找到 sweeper， 找到 sweeper， 然后这里边就有它这个对应的一个业务逻辑，一个啊， h t m l 一个 c s s 代码，那这种你就直接可可以把它复制过来，然后改 改一下，是不是就能实现你这个功能了啊？这就是官方的一个电报，包括这里边你也可以也可以预览，对吧？预览就是在这点一下预览啊，预览完成以后，我们扫描就是相当于这个预览是什么意思啊？相当于我们在甄姬上测试了，你看啊，我接下来的话，我们就在这稍等一下 啊，我们就可以再征机。他这是正在上传啊，是因为这个小程序这个代码还是比较多上传。稍等一下， ok， 上传完成，上传完成，你扫一下这个二维码啊，扫一下二维码，那至少这个 demo 就在哪呢？是不是在你的手机上打开了？但手机上打开的它是谁呢？它是。 呃，他是我们本地这个代码，对不对？这叫预览。那这里边还可以什么呢？还可以远程调试，对吧？远程调试相当于也是把你本地这个代码上传到谁呢？上传到这个，呃，小程序，只不过你在这，在我们手机上点的时候，他可以在这 打开，打开对的一个调试工具，你之后你再看一下，我再点去掉啊，去掉以后我们这里边再扫一下啊，扫一下，扫一下以后，然后这里边看一下是不是也打开了啊？打开了以后，那这边没有给我们打开这个 打开对应的一个调试工具吗？那稍等一下，我们再重新来一下，你看啊，我们再重新这里边改一下这个 a p p 点。 jason， 我们想的是默认 启动，呃，启动这个 three pro 啊，那这时候或者说默认启动一个叫 video 的东西，那这时候我们就找到它放到这儿，然后这时候点击远程调试，远程调试重新再来一下， 这时候他在上传，当然要注意，就是我们小程序的代码不要超过两个兆啊，不然他上传不上去不要超过两个兆。 ok， 那这时候你看一下，我们扫一下啊，扫一下调试后，他会打开一个调 调试工具才对啊。你看我这手在这扫了，哎，看到，看到什么了？我是不是扫了一下看，我这扫了一下，对吧？扫了以后，然后这里边打开了，谁是不打开了调试工具啊？那这时候你看啊，这时候手机上他就打开了，稍等， 那打开了，我们这个打开了我们这个程序，对不对？打开这程序以后，然后这里边就可以点播放了，对吧？播放 啊，点一下播放，那播放的时候你在这点按钮的时候，他这里边干什么呢？他这里边就会执行我们这个方法，对吧？啊？ 然后这边我们可以发木带，对吧？发木带啊，就在这点击发木带啊， ok， 那我们退出一下啊，包括这里边就是这就是调试，对吧？就是你在手机上预习这个项目，然后在这调试啊，这就是这个，呃，小程序的一个官方带帽，以及怎么预览，怎么调试，怎么去学 发这个代码，对吧？行，那这一讲我们就介绍到这啊，那这一讲我们就主要给大家讲了啊，怎么去导小程序代码片段啊？导入小程序的这个代码，以及啊给大家演示了官方的这些组件，对吧？以及告诉大家啊，如何去学这个组件？去用这个组件有好多种方法， 那第一种方法就是看文档啊，文档看不懂的时候找谁呢？找他这里边的这个啊代码片段，如果代码片段里边还是不一样的话，那之后我们再找小程序里边的视力带帽，对吧？啊？反正他都有给我们提供带帽，那这时候我们学起来是不是容易一些？行，那这一讲我们就先讲到这啊，先讲到这。

hi， 大家好，我是邢佳米，这节课呢给大家介绍如何开发 delete 插件，以商城常见的商品价格样式为例，为大家演示一下从开发到应用的全过程。如果大家在线上点外卖逛商城的时候呢，经常能看到这种哈整 数比较大，那么小数比较小的一种价格样式啊，有的呢还显示原价，而且这个原价的位置呢，有的是在右边的啊，有的呢是不是在这个下面显示的他这个样式的话也是有所不同的啊，这种价格样式的话呢，还是比较明显的，那么既然呢我们经常会使用，所以说呢就干脆呢开发一个插件，那么既方便我们自己去 使用，而且呢也可以呢为别人创造一些方便啊。如果你开发过 uni f 项目，相信对 dklu 的 插件市场呢不陌生，在插件市场里面有非常多优秀的创作者，为社区提供开源好用的插件， 那我通过这节课呢教给大家如何开发插件，为社区贡献力量啊，当然呢你也可以呢去开发这种付费插件啊啊，为你呢创造一些收益。 我们首先来演示一下我开发的这个插件啊，就是这个价格组件嘛， pr i c e 啊，那么我们这样一搜索，那么在插件市场里面呢就可以呢找到这个插件了啊，点进来呢我们来看一下啊，那么这个插件呢，这里呢也有这个文档呢，告诉你呢怎么去使用的，这里的话呢有这个更新记录啊，那么我们再去发布插件的时候呢， 也会告诉大家怎么去操作的啊，做插件的时候呢，最好呢有这个配图啊，让别人呢通过这个图像呢，一眼就知道你这个插件是干嘛的啊。 然后呢在下面的话呢，就要介绍一下这个平台的一些这个兼容性啊，那么这里的话呢就是他的一个啊介绍说明了，那么这里的话呢有这个使用的方法，那么我们就可以呢调用这个组建啊，调用这个组建呢我们需要传递不同的这个属性，然后呢来给我们显示不同的这个样式，那么 下面的话呢，就是对我们这个参数的一些相应的描述啊，如果你想使用这个插件的时候呢，就直接呢在上面呢点击它哎下载到我们这个 hbu 的 当中，然后呢导入到我们需要的这个项目当中， 这样的话呢就可以呢使用我们这个插件了，那么下面的话呢，就给大家来说一下如何呢进行这个开发啊，如果你要开发插件呢，我就建议呢大家创建一个新的项目啊，在这个项目里面呢来创建各种类型的这个插件啊，我把我开发的这个所有的插件的话呢，也是放在这个 git 一 当中了，然后呢就是有个 uni app 的 这个插件库啊， 好，我们来看一下怎么去开发呢啊，那么这个呢插件它是放在这个 uni 模式当中的啊，在这个目度下面呢，你可以呢从插件市场里面去下载别人的这个插件，也可以呢开发自己的这个插件啊， 在这个闲暇米前缀的就是我开发的这个插件，那么这个写插件时候呢，你最好呢通过这个插件名称就知道你这个插件是干嘛的啊？那么下面呢我们就给大家举一个例子啊，那么比如说我们就新建一个啊，就在这个 unity mod 字上，单机右键就可以呢出现啊，创建 unity mod 插件啊， 那么这个时候呢，你就可以呢选择不同的啊，这个插件分类了，大家可以呢自己去选，我们现在的话呢就选择的是通用组件啊，那么要求你起这个名称的时候呢？哎，前面呢带一个作者的这个前缀啊，那我呢叫咸虾米，所以说我就用了剪写的咸虾米啊，比如说呢，我们就上传一个 p o p u p 啊，就是一个做弹窗的这个插件啊，好，那么我们现在呢就直直接啊点一下这个创建啊，你看到这个起这个名称你就知道了啊，这个呢是一个弹窗的组件啊，好，点一下这个创建，那么这个时候的话呢，就会出现一个新的啊，我们的 这个插件儿来了，在目录当中的时候呢，有这样几个文件，那这几个文件呢？其实呢我是啊已经有这个配套的这个文档了啊，那在这个文档里面呢，有相应的这个说明，我们可以来看一下这里呢我有相应的这个介绍啊。好，那这几个文件是干嘛的呢？哎，这个啊 components 啊， 那么这里的话呢就会创建出一个新的文件来，那比如说我们刚才呢是 purple 啊，那么这个时候呢就会出现一个 purple 点儿 v o e。 在这里呢要写你的实现逻辑啊。好，这里的话呢有个更新日期，那么我们在发布完成之后呢，这里有个更新日期，其实呢是显示在啊，是可以呢直接在这里进行记录的，你不需要呢在这去写，你发布的时候呢，自动呢他会向这里呢进行填入啊， 那么在下面的话呢，就是有一个配置项的这个管理啊，那么在这个配置项里面呢，你可以呢对这个插件进行相应的描述，你可以呢写下关键词，也可以写下这个描述，然后在下面的话呢，还有一些这个插件箱的这个依赖啊，如果你要看不懂也没有关系，只要呢你在这个啊单机右键这个上传的时候发布到插件市场，你看 弹出来这个内容呢，显示的其实呢就是我们这个配置点 jason 的 文件啊，稍后发布的时候呢，再给大家去详细的去介绍啊，那么在下面的话呢，还有个 redmi 啊，点 m d 这个是干嘛的呢？哎，我们在这个插件里面呢能够看到这里的相应的描述啊，相应的这个介绍，那么原因是什么呢？原因就是因为呢 我们是在 redmi 里面呢进行的这个文档描述啊，在这写的所有的这个内容的话呢，就会在我们这个详情页这个位置呢进行相应的展示啊，插件目录呢已经给大家去介绍完毕了啊，那么我们就给大家来说一下怎么去开发，大家可以看一下在 components 里面的时候呢，它这个路径还是比较深的，这个呢是你起的这个插件名称， 你真正要编辑的其实呢是在这个文件夹啊，同名的啊，下面有这么一个点 v o e 啊，那么在这里的话呢，就要写一下那个组件要实现的逻辑啊，好，我们这样的话呢，就还是以我们写的这个价格为例啊，点开 看一下，那么我们现在呢基本上都是 v o 三开发了，所以说我在开发的时候呢，就直接呢是没有兼容 v o 二的，直接呢是写的是 v o 三的这个语法格式啊，那 这个插件的话呢，肯定是需要接收不同类型的这个参数的，所以说呢，你要在 props 里面呢来接收啊，它不同的这个属性，然后呢给它设置一下这个默认值以及相应的这个数值值， 那么在下面的话呢，就来把我们这个布局写一下，那么再把我们的这个 css 呢来进行相应的实现啊，其实现在呢有了这个 ai 之后啊，你只要呢在 ai 里边写了香的这个需求，它自动给你写出一个插件来， 基本上问题不大啊，当然呢你要是不会的时候呢，也可以呢直接把你这块代码交给这个 ai 呢，让它给你进行这个相应的修改啊，我这个插件里面呢啊也是大量使用这个 ai 呢，帮我去写的这个相应的这个插件啊，那这块这个实现逻辑呢就不给大家去讲了，那么你像我们出现这种样式的话呢， 其实是一个价格尾数啊，在之前的视频当中呢，已经给大家去介绍过这种价格尾数呢，怎么去实现呢？基本上呢就是使用这个 c s 四就可以完成这个样式啊，如 如果大家没有学过的话呢，建议呢去看一下这块怎么去实现的了，那么这块代码的话呢，我就不给大家去手敲了，那么大家知道我们这个插件的开发逻辑就可以了，那么你想实现更复杂的这个插件的时候呢， 你就自己呢在这里进行相应的编辑啊，进行逐渐的完善。那么我们这个项目呢，也肯定不是啊一次开发完毕的，所以说大家可以看到我是不是也 已经发过很多次版本进行这个迭代升级了呀？假设呢这个插件已经开发完毕了，那么这个时候呢就可以呢发布到这个插件市场上去了啊，那么任何人呢都可以进行发布的，我们在这个插件文件加上呢单机右键，然后呢来进行发布啊，点击发布到这个插件市场，这个时候呢就会有这个弹窗了， 你可以呢在这里写下这个描述啊，你最好呢写上你的插件名称，然后呢再用这个中文呢做一下这个介绍啊，这个地方的话呢，我在这个文档里面呢也有一个详细的这个介绍啊， 大家可以来看一下，你在发布的时候，你不知道这个要填些什么东西，那么在这里呢，我已经有这个图示了啊，好，那你比如说呢，我们首先呢要选择不同的分类，那么选择不同分类他就会给你呢在上面筛选的时候呢，再筛到某一个分类当中去了啊， 那么这个名称的话呢，就会显示在我们这个位置，是吧？啊，这个呢就是我们的名称，那么还有呢就是这个简介的话呢，就是这个位置啊，你在这里呢发布的这个，这个呢就是你的 介绍啊，还有呢你可以呢设置一些这个关键词，那么这个的话呢，其实就是我们的标签了，那么中间的话呢，用这个空格呢给它隔开就可以了啊。 好，那在下面的话有个插件 id， 这个的话呢就是唯一的，如果别人使用过的之后，你肯定就没法再去使用这个创建了，然后你在这里的话呢写一下你的这个版本号，版本号呢就自定义就可以了，你可以从一点零开始，也可以从啊这个 啊二点零什么的开始啊，这个呢你自定就可以啊。好，那么这里呢还有这个平台的兼容，这个呢就是云平台啊， 一般的话呢肯定是呃钱的代码支持是三种云平台没有任何问题的，而且呢你还可以呢把我们这个插件可以呢发布成这个收费版本的，因为我们这个是开源的，所以说在这里呢没有进行设置，所以说是个零元啊， 那么你可以呢把我们的这个地址呢往这去设置，你比如说呢我们在这个发布到这个啊这个 git 上去了，你可以呢把这个插件呢？哎，把这个地址拷贝到这里来， 这样的话呢别人再去点击的时候呢，就可以呢直接来到这个插件市场，是不是就显示在这个位置了呀？一点击好，那这个时候呢就跳到这里来了，别人的话呢也可以呢直接下载你的开源代码来了解你是怎么去书写的啊。 好，那么在下面的话呢，就是啊我们的一些这个版本号的介绍，刚才我们这个版本号呢是一点零点三，所以说我们在这写了一个更新使用文档，那么在这里发布的时候呢，你看这个呢就是一点三是不是更新使用文档啊， 当你这里呢发布完成之后，点击提交自动的话呢，它就会给你更新到这里的啊，更新日期里面来了啊，好，那么在下面的话呢，你就得需要呢上传一下这个图，这个图的话呢就是显示在这个位置的，所以说呢，你最好上传图让别人呢通过这个图就能看出你这个插件是干嘛的来啊， 好，那么你可以呢支持 uni app， 也可以呢支持 uni app x 呢进行做测试啊，所以说我就没有对它进行勾选啊， 这里呢有个兼容版本啊，那么大家最好呢不要选择最上面这个版本，那么啊，因为呢有很多客户端的时候呢，他下载的版本比较低，所以说你尽量的往下去选一下就可以了，同时呢你要自己呢去试一下到底这个版本啊运行你这个插件有没有这个问题啊？我在之前运行过了，没有问题，所以说我就选择比较低的这个版本了， 那么在下面的话呢，还有这个 v u v u e 啊，外边啊这个知识情况，那么这个 v u 二呢是不支持的我，所以呢直接在这里呢勾选的是不支持 v u 三的话呢，是支持，我在这里呢就直接选择了，如果你不确定的呢就是不确定啊，所有的描述填写完毕之后呢，就可以呢直接点击 这个提交按钮了，当我们一点击提交之后的话呢，它就自动呢在我们这个插件市场里面呢就可以更新了，当你点击这个插件市场的时候呢，它 他会按照这个日期来进行显示的，刚刚呢我更新了一个版本，所以说大家可以看到是不是就可以呢，在我们的这个首页当中是不就显示了这个插件了呀？至此呢我们这个插件呢就已经发放完毕了，别人呢就可以呢使用这个插件了，为了让别人能够观察到你的这个插件，你尽尽量呢把 这个插件呢描述的比较清楚一些啊，无论是你的这个关键词啊，还是这个描述呢，尽量呢和我们这个呃 插件啊起到的一个功能呢，写的这个清晰明了一些啊，价格插件呢已经发布到这个插件市场了，下面的话呢就来在项目当中啊来使用一下啊， 我们可以来看一下我这个开发的这个商城，那么在之前我们再去写这块的时候呢，他没有使用这样一个价格尾数缩小的一个样式还是 不大明显的，那么下面的话呢，我就把这块来改造一下，而且呢他这里呢也显示了一个原价，那正好的话呢和我们这个价格呢进行一下这个修改啊， 怎么去用呢？我们就直接可以点击下载导入到 hbo 的 当中，直接点击打开，那我们呢是开发的是这个客户端啊，微信小程序的客户端，所以说我们就直接选择它，然后点一下这个确定，那么这个时候的话呢啊，我之前已经下载过了啊 啊，如果没有的话呢，你就直接点一下这个合并啊，直接下载就可以啊，那么这个时候呢大家可以来看一下我的这个商城项目在客户端的啊， uni modules 啊，可以来看一下。好，就已经呢大家可以来看一下我的这个插件，就是这个咸虾米 price 啊， 就是这个价格，当然呢我这个代码呢没有加密的，所以说在这个下载了之后呢，大家也可以看一下我是怎么去实现的啊？好，那么这个下载完成之后呢，我就可以呢直接去使用了啊，那么这一块的话呢，我当初呢使用了一个 组件啊，啊，用了一个组件，我呢就直接找到这个组件来对他的机型这个替换就可以了啊，在我们不改变原有逻辑的这个情况下呢，直接替换这个价格，我们来找到这个位置啊，这里的话呢其实就是价格，我们可以呢把这块呢直接来做一下这个题 啊这个注试啊，来做一下这个参考啊。好，那么我们就在这里啊来还是把上面这个盒子呢给他写过来之前的话呢拍摄 rap 啊。好，那么我们就在这里的话呢就使用一下我们这个插件啊，当你在这个保存的时候呢，你可以看到啊，我们这里的话呢是不是就已经写啊就给他消失掉了啊？ 因为呢我刚刚呢加了这个注试啊，那么我们现在呢就来把我们这个插件拿过来啊，那个插件的话呢叫做咸虾米，咸虾 米啊杠 price 啊，好，那么这个时候呢它自动呢就给我们显示出来了，那么如呃直接 ctrl s 保存，因为我在这里呢直接设置了默认值，如果你直接保存的话呢，这个直接呢会给我们显示一个默认的啊，九块九毛九的啊。 好，如果呢，你要是在微信小程序的时候呢，刚刚下的这个插件啊，可能没法立即去显示啊，所以说呢，我就建议大家的话呢把我们这个项目呢进行下这个重新起 启动啊啊，微信小程序一向就这个毛病啊，如果呢你刚刚引住这个插件不显示的时候呢，就重新启动一下这个项目，一般就可以显示了啊，那么这个时候呢是不是就给我们显示了一个价格呀？那么如果你想显示原有的这个价格怎么办呢？我们可以来看一下原有价格，他这里呢是不是设了一个属性好 price 啊，这个呢就是我们的价格， 这个价格的话呢是以单位为分的啊，一般呢我们这个显示的时候呢都是单位为分的啊。好，那么我们就可以呢把之前这个值拿过来， 在之前的时候呢显示的就是这一块啊，我们可以呢把他直接哎显示过来，那么这个时候呢就给我们显示这个价格，那之前的这个判断我就不给大家去说这块逻辑是怎么写的了。这块呢，我们来看一下这个显示的效果，你看这个时候呢是不是就给我们直接显示他原有的这个价格了呀？ 是这个字号呢是不是有点大，那么就可以来设置一下它 size 属性了啊，好，那么这个 size 的 话呢是一个 number 类型的，也可以是 spring 啊，那么我们就可以呢给大家设置一个十六，当然大家可以呢自己去试一下这个数呢到底呢是多少合适啊？以你自己的这个项目呢为准啊。 那么现在的话呢，是不是把我们这个字号呢就给我们显示的比较小了，而且呢我还想显示一下他这个原价，那这个原价的话呢，我们这个属性里面呢也写了这个就是原价，就是删除线的这个部分啊，好，我们可以呢直接来这样 再去设置他的属性，那么这个值的话呢，就应该是等于下面这一块啊，那么你看在之前的时候呢，是不是这一块代码，然后呢自己呢还去写这个插件之后，你直接呢把我们的价格显示到这个位置来， 那么现在的话呢，我们再来可以看一下，就可以给我们显示一下，哎，这个啊原价哎，是不是就可以在这了呀？那默认的时候呢，是不是原价在他后面啊？ 但是这个时候呢是不是就嗯这个价格比较多的时候，是不就把这个布局给破坏掉了呀？所以你可以呢把原价呢变成一个上下结构，那么因此呢我们可以看一下这里呢是不是有个 l 就是 对齐方式呀，那么我们就可以在这里呢再设置这个属性了，那么这个属性呢我们就可以设一个 b u t t o m o t t o m。 那 么这个时候的话呢，这个原价就跑到这个下面去了，当然呢也可以呢啊，可以试一下，像啊上下左右啊都可以来进行这个实验啊，你可以呢把我们这个价格呢显示到这个上面去的，你看现在的话呢，这个原价是不就已经 跑到下面来了呀？那么其他属性的话呢，就不给大家去试了，这里的话呢都有各种属性的介绍，大家可以呢自己呢下了这个课程呢，就给大家去讲这么多了，谢谢各位观看，拜拜。

有没有一个能同时搞定前端、后端数据库支付部署的平台？ zen 是 一个零代码全站应用构建平台，在 ai 时代做零代码平台还真不多了， zen 可以 快速构建小程序电脑端的应用，并且可以直接让应用接入 nano， banana 以及 gemini 等模型，每创建一个应用都可以免费使用，五万的 ai point 大 约可以生成七千张图。 本期视频我们就一起来看看这样一个零代码平台，在 ai 时代究竟是怎么做出一个应用来的。在你的前端页面，主要通过组建格式化的方式构建，数据库的所有表字段信息都可以自己定义， 也可以说出需求，让 ai 来生成表结构。如果有 api 调用需求，就可以自定义调用 api。 如果有复杂的数据处理或者业务逻辑处理，可以使用行为流的模型，通过流程化的编排就可以实现复杂逻辑了。 如果需要用到 ai 的 能力，就可以配置 ai 智能体，这里是智能体可以用到的所有模型。比如这次我们来搭建一个小程序背景生成大师，效果是输入一张图片，能按要求给图片替换背景， 可以免费合成十次背景，超过后就要购买次数了。这里需要用到 ai 的 功能，因此先来创建一个 ai 智能体，就叫它背景替换大师，需要输入一张图片以及一段文字，因此增加两个输入提示词，模板中设定角色以及任务的详情。我把输入中的字段合并到了任务详情中， 然后选择模型，直接选择最近很火的 nonban 的。 二、现在我们来测试一下上传一张图片，输入想要生成的背景，点击开始对话，可以看到照片就加上背景了。 接下来做个页面，我先拖一个试图进来，然后拖入图片选择主键，这里就是用来上传图片的了。再拖入一个，试图把文本输入框和按钮并排放，最后再搞个试图把图片展示主键放在上面，然后简单调整一下样式。 触发逻辑是在按钮处点击按钮选择行为，当点击时触发 ai 的 调用输入，就选择图片选择框以及文本输入框。要实现的是把生成图片展示到图片组建，这一部分有点不太一样。在页面中创建一个页面变量，类型就选图片，图片展示组建就选择这个页面变量， 记得在按钮中加个行为，当 ai 输出成功的时候，给页面变量赋值。因为 ai 结果的图片返回格式是一个集合，因此这里就用公式从集合中选取第一个元素作为图片。这样一个背景生成大师的小程序主体功能就完成了。支付逻辑怎么做呢？创建一张表，专门用于存储剩余可合成次数，直接告诉 ai 就 能把表创建出来了。 这里有一些默认的表，比如用户信息表，就不需要自己建了。新建一个用于购买次数的页面，输入购买次数，触发支付节点表。 api、 行为流， ai 的 权限都可以在后台管理。编辑一个行为流，用于获取用户的剩余可合成次数， 点击按钮后从行为流获取当前用户的剩余生成次数，如果大于零就走生成的逻辑，小于零就跳转。购买页面全部完成后可以直接发布填写必要数据，小程序的发布也就完成了。 虽然有一定的学习成本，但通过零代码平台构建的应用，可以真正实现复杂业务场景的前后端全站应用。一句话的 ai 生成工具还是更适合做个简单页面。以上就是本期视频的全部内容了，我是鱼仔，我们下期再见。