00:00
我们上一节相当于搭建了一个开发环境,呃,包括建立数据源呀,然后创建一个空白的应用呀,本节我们就在我们这一个空白的应用上,嗯,开始首页的开发。首先呢,是进入我们维达的代码的一个控制台,然后找到我们这个新建里的应用。医美美容管理平台,然后点击编辑应用。现在是整个应用是一个空白的状态。要怎么搭建呢?呃,需要参考我们这个同名的博客的一个图文教程,然后首先打开我们的教程。嗯,这一节的话是一个首页的制作,然后首先我是介绍要干一件什么事。
01:02
这是整体的一个页面。呃,主要是你你进入这个小程序的后台,首先是需要对这个店铺的基础信息进行维护,包括店铺的名称,Logo,客服电话,营业时间和门店地址,然后上头有一个按钮,通过点击这个按钮可以进入到编辑,我们先是实现这个店铺信息的一个查看的功能。嗯,第一步要做的话就是,呃,需要定义一个全局的变量,这个empty,这个变量的话,主要是为了组建绑定,像有一些什么标题呀,而且我们不需要就通过这个来附空值。然后具体怎么做呢?就是我们在这个应用这有一个变量,点击它一下,然后因为我们要所有页面都用了,所以定义一个全局变量。定义的时候,点这个全局变量的这个加号。然后变量标识的话,我们输入empty。
02:04
呃,它是一个普通变量,普通变量的话,然后是一个string类型的。呃,初始值是空。那么这个就是值是空就行。这样的话,你点开它,它其实就是有了一个空值。这是这个变量的一个定义。这样的话就定义好。剩下就是再创建两个变量,一个是title,一个是content。呃,Title的话,我们初始值会给一个店铺信息,首先定义一下title。呃,这个变量的话,它是,呃,定义在了哪个呢?定义在这就不是那个全局变量了,要定义在这个首页这个页面上。所以需要。选中这个店铺信息这个页面,然后点这个加号,输入title。
03:03
类型的话,还是选择这个走串类型,然后它不是有一个初始值吗?我们可以输入一下。店铺信息。然后输好之后点保存。第二的话是这个是form content的话,因为你要在页面上展示信息,这个信息来源哪来源,我们把它定义成一个变量,我们叫form content,主要是用来页面信息的展示。然后我们在它上面再点加号,然后。变量表示form content。然后这个数据类型的话,呃,这时候就要选择这个数。初始值我这个图文教程里头已经有了,你就可以直接按我这个粘一下,点复制按钮。然后把它粘到这里来。
04:01
这样就OK了,保存。你看我这个图文教程也写的比较详细。嗯,然后就是讲解一下这个嗯竖式值的语法吧,因为是数组的话,它是以一段中括号嗯作为开始和结束的,然后里面的话,它可以存储那个既可以是基础类型,也可以是复杂类型,我们这里头都是存储的这个对象就是对象的,它是一段花括号嗯为语法的,然后里边的话它是建指对门要K和value。然后K和Y这都要用上引号,嗯,引起来。这就是那个整体变量的定义,变量定义好了之后,其实就是涉及到页面的搭建了。嗯,页面搭建的话,我们首先需要选中这个,呃,T basis组件库,然后找到这个内容结构的组件,把它加进来。
05:03
我们可以回到页面上,那页面上它是在哪呢?就是在这个组件下头,这这个下拉箭头,你看它有官方的组件库,这个是咱们模板上自带的一套PC端的组件库,这还是挺重要的。嗯,往进加的时候有两种方法吧,一种是你可以直接在这里头血。呃,一开始啊,就是作为小白,你入手的时候可能就需要先找,因为。先需要熟悉一下这些主钱库嘛,是吧,就是在这个位置,如果要是你日后比较熟悉了,那你就可以在这个搜索环绕直接输这个主钱库的名字。内容结构。搜到了之后,这就定义到了,然后你嗯,点一下这个组件,它就进来了。我还继续读我们这个教程,然后之后就是要做变量绑定,然后要将组件的上的标题和这个title变量进行绑定,怎么绑定呢?其实就是在这儿,你选中了之后,它这个绑定都是有这个像超链接这个图标就叫呃组件绑定,然后它不是可以绑定成你点它一下。
06:14
点它一下,然后我们要和这个刚才定义的这个页面变量这个开头信息,诶选中它往下头点这个确定我们就绑定了,你看你绑定好了之后,它就会把这个主只读出来,显示到这个具体的一个位置上。这会告诉你怎么绑定变量啊,第二就是小标题,小标题的话我们不用它显示值,所以要和这个MT进行绑定。然后先把这个叉掉,然后。点这里头,你现在这个是当前这些页面的嘛,我们是要从全局变量里头选选这个empty,哎,一点它不就这个信息就空了吗,是吧。
07:03
呃,然后之后,呃,其实就是剩下就是。要那个上头,我们刚才看到那个页面是上头有一个按钮,所以我们要在这个插槽里头,然后添加一个表格上,表格上方操作栏这一这一个组件先放一个容器,相当于。嗯,在哪,就是这是吧。然后。我们把这个去掉,然后它是在表格。上方操作栏这个。这个件。嗯,这个组件的话,加进来之后,其实就是也是嘛,要给他内容插槽里头。要。做一个什么事要放一个呃按钮。是吧,然后我们找到这个按钮的组件。
08:10
哎,这个通用里头转给他。嗯,按钮组件加进来,其实就是要修改一下这个文本的信息,我们是。标题是编辑店铺的一个信息。修改完了之后,然后嗯。这里头呃,说是要那个添加事件,咱们先把表单搭建好,然后之后再决定这些事件的一个设计。嗯,剩下就是这个按钮有了之后,我们要那个。放一个只读表单,用来显示每个字段的信息。嗯。他说是这个。
09:01
就我们先其实是可以这样这样添加,对选中他,这就是相当于选中他的一个兄弟节点了,然后呃,说是伟大行业组建是吧,有一个制度表单。就这。是吧?然后只读表单之后,选好之后就需要绑定变量了。那这里然后默认的首先是给他一个标题绑定为一个空变量。我们现在不是有个默认标题,我不需要答。我把这默认标题去掉。去掉之后,然后。给他绑定一个空的变量。呃,空的变量绑定完之后,其实就是下头这些的表单子项,表单子项你这里头它每一个,呃,咱们可以看一下它有有哪些属性啊,有什么表单label level就是这个,嗯,字段的标名称,然后展示类型是文本应的名称对应的值宽度和高度是吧。
10:17
这些还是蛮多的,就是如果要说是你这个。比较固定,你可以在这里头直接写,但是大多数的情况下,咱们这个是需要根据变量来配置的,我就把这些都都点掉删掉是吧,都把它删清除,清除了之后,呃,一样还是用来保定。绑定了我我这里的玩家告诉你,就是这个要绑定啥,绑定form content,然后它直接就会通过这个变量,然后读到页面上。你可以看到,然后我们绑定一下这个值。然后选中它。是吧,一点确定。诶,你看它这个就是根据我们的变量,然后把我们刚才不是设置的一些默认值吗,都显示到这。
11:03
嗯,这样的话,这个页面就搭建完了,然后咱们本节主要就是讲解这个,呃。页面怎么进行搭建,然后我们做完之后要点一下保存。好了,本期就结束了,谢谢大家的观看。
我来说两句