目录

1.项目背景

2.需求分析

3.数据源设计

4.小程序的创建

        4.1首页(用户管理)页面创建

         4.2文件上传页面的创建

         4.3各项功能的实现

                4.3.1 列表点击详情

                4.3.2 删除功能的实现

                4.3.3对已上传的数据进行编辑

                4.3.4文件上传功能

5.总结


1.项目背景

接着上期我们制作了工作室的用户端小程序,其实我们的管理端可以直接选择所有数据源来直接进行模型搭建,但为了方便起见,管理员可以在手机端进行一些列的操作,我们接下来制作一个管理员的小程序!

2.需求分析

我们的思维导图如下:

        由上可知呢,我们的规划如下:我们将所有的功能分为两大类,分别为:用户管理和文件上传。具体分类由上图即可!!!

3.数据源设计

        由于我们是管理端,所以不需要重新设计新的数据源,在设计小程序的过程中,进行绑定即可!

4.小程序的创建

        4.1首页(用户管理)页面创建

        对于首页我们采用了网格布局,在这里解释一下为什么页面会由两行相同的功能文字,黑色的是文本,蓝色的是链接的名字,因为在预览时是可以点击并且可以清楚的看到链接上的文字,但在体验版本中不会出现并且无法点击。所有的图标我都是在这个网站(iconfont-阿里巴巴矢量图标库)下载的,挺好用的

 

         4.2文件上传页面的创建

        对于文件上传页面,它的布局跟首页是相同的,我们在创建链接时就对每一个链接的跳转页面进行绑定!

         4.3各项功能的实现

                4.3.1 列表点击详情

        对于这项功能主要是用在维修预约查看和软件安装预约上,主要是在列表显示用户预约的主要信息,点击出现预约详情。对于这一功能的实现在上一篇文章中也有详细说明!我们就在总结一次,以维修预约查看为例。

        首先创建预约查看页面,在该页面添加模型变量,然后在页面添加列表容器组件,并对其进行数据源的绑定!

 然后为列表项添加点击时页面跳转的行为并传入参数(循环数据中的数据标注)

 然后点击预约详情界面,对该页面进行编辑,首先在该页面添加一个参数变量(yuyueid)和一个模型变量(yuyuexiangqing)如下:

 在数据标识处绑定刚创建的参数变量。接下来对需要显示的详情信息进行绑定与显示即可!这样点击查看详情的功能就实现了!

                4.3.2 删除功能的实现

        这个功能的介绍我们接着上一个功能来讲:首先我们先在需要此功能的页面用低代码的方式为改页面添加一个方法,将其命名为delete,代码如下,注意备注:

export default async function({event, data}) {
   //2.将用户信息写入管理员表
    const result = await app.cloud.callModel({
        name: 'aoyhgl_yc1ohpk',//这里是数据源名称
        methodName: 'wedaDelete',//这是方法标识,在数据源的编辑里有
        params: {
            	_id:data.target
        }, // 方法入参
    });
    //跳转到管理员首页
    app.navigateTo({
        pageId: 'wajlo64ol7h'   // 删除后需要跳转到页面的页面 Id 
    });

}

         首先我们创建删除按钮,为按钮添加行为,选择自定义方法deiete,传入参数绑定为我们上一个方法中创建的参数变量即可,这样我们的删除功能功能就完成了!

                4.3.3对已上传的数据进行编辑

        这项功能一般情况还是接着第一个功能来实现的,因为首先还是列表项,点击列表项元素进入详情展示,在详情展示中会有上一个中的删除和编辑功能,我们在详情页面添加编辑按钮,再为编辑按钮添加页面跳转的行为,传入参数就绑定为方法1中的参数变量,创建一个信息编辑页面,然后在添加一个参数变量(numid)模型变量,入参绑定为我们创建的参数变量numid。

 接着在页面添加表单容器

表单容器绑定详情如下:其初始值绑定为变量根节点。

 这样编辑功能就可以实现了!!!

                4.3.4文件上传功能

该功能与前三个功能来讲比较简单,不需要创建变量,直接在页面添加表单容器,然后为其绑定数据源即可。

5.总结

        以上就是工作室小程序(管理端)在创建过程中的一些总结,希望可以对大家有所帮助,也欢迎各界大佬前来批评纠正,当然大家如果有疑问也欢迎私信来交流!谢谢大家!

 

 

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐