前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >医美小程序实战教程

医美小程序实战教程

原创
作者头像
低代码布道师
修改2021-11-08 09:55:43
9660
修改2021-11-08 09:55:43
举报
文章被收录于专栏:微搭低代码

微搭最近推出一款医美小程序模板,还是挺通用的功能,一个是功能比较完整,另外正好适合练手,全部学会了其实各行各业都可以进行变种,无疑是日后拓展业务的利器。

我们就按照传统开发的流程来分析一下这套模板,以供低码学习者进行参考。

功能结构图

首先我们使用xmind进行功能的一个粗略的拆分,具体功能点如下:

在这里插入图片描述
在这里插入图片描述

小程序一共是分为四个Tab页,分别是首页、服务、预约、我的。

首页功能介绍

首页一般是提供一个导航,可以将店里主要的产品进行推送,这样顾客一打开小程序的时候就可以快速的了解店铺提供哪些产品,提供什么样的服务。

创建应用

我们复刻的话需要从0到1,所以先需要创建一个应用。点击应用管理,点击创建空白应用按钮

在这里插入图片描述
在这里插入图片描述

选择普通应用,这里要注意的是个人版其实只可以创建普通应用,高级版才可以创建模型应用,因为目前高级版的功能还没出全,目前是可以看到图标的。

在这里插入图片描述
在这里插入图片描述

输入应用的名称和标识

在这里插入图片描述
在这里插入图片描述

应用创建成功后会默认打开编辑器,由引擎自动完成了首页的创建

在这里插入图片描述
在这里插入图片描述

编辑器介绍

在进入开发阶段时,我们先了解一下编辑器的功能

编辑器一共是分成几个部分,分别是顶部导航栏,左侧导航栏,内容编辑区,属性编辑区

在这里插入图片描述
在这里插入图片描述

顶部导航栏

顶部导航栏一般是做几个操作,页面的实时预览,应用的预览版和正式版线上发布,低代码编辑。

初学开发的小白可能对这几个技术概念不是特别清楚,我们具体讲解一下。微搭是分为三个环境,开发环境、预览环境和正式环境。

其中开发环境都是预设的值,比如会将数组初始化值,变量也有初始值,但是开发环境的最大特点就是不连接数据库。我们看一下模板的这个例子,顶部的导航条

如果我把编辑区的按钮点亮,顶部导航条的值是取的开发环境的值,所以顶部显示的是首页

在这里插入图片描述
在这里插入图片描述

如果我点亮预览区的图标,那么顶部导航条就变成了店铺的名称

在这里插入图片描述
在这里插入图片描述

什么时候需要点击顶部导航条的按钮?

你在编辑器的内容区域效果都出来了,不报错,你想看一下实际的效果时候就点顶部的按钮

预览和发布有什么区别?

一般我们在开发阶段每操作一步,想看最终的效果我们就点预览。如果整个页面功能开发完成了,那可以点发布,这个时候其实是在进行功能测试,通过线上的版本,利用手机来真机测试一下最终的功能。

保存是干什么用的?

我们用IDE开发的时候,每写完一段代码都会按ctrl+s,这里的保存就相当于你传统开发的这个快捷键,只不过他是将你的操作提交到服务器里,这样你本地的任何操作就都可以记录到服务器里了。

那我的操作不想要的时候怎么回退?

这个时候可以点击更多按钮的线上历史回滚版本

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这一点上低码开发要优于传统开发,免去了我们搭建开发环境,自己搭建版本服务器的烦恼。

低代码编辑是什么?

这个就是低码的特点了,不是有个分法么,no-code,low-code,pro-code么。无代码的话一般可以搭建那种表单类应用,表单可以发起工作流,全程无需编码。纯码的形式所有的交互及逻辑都需要使用代码。低码可以理解为半自动,页面我们可以拖拉拽,有业务逻辑的地方我们可以使用编码的方式进行操作。这样既有无码操作的便利性,又有纯码操作的灵活性。在无码和有码之间随意切换,游刃有余。

当然了,要进行代码的编写,首先得有开发的基础,这里的开发是指需要有前端的开发能力,主要是需要会javascript。笔者也在学习低码的过程中逐步的补齐前端知识,粉丝们感兴趣的话可以阅读我的读书笔记,主要是为了补齐开发能力而写的。

左侧导航栏

侧边栏历经改版,目前处于一个稳定的状态。分别是页面管理、组件、区块模板、资源管理、数据源变量管理、JSON。

页面管理主要是用来创建和管理页面的,组件的话主要是用来搭建页面用的,资源管理是上传一些素材比如图标或者图片,数据源变量管理一般涉及到程序中需要显示内容的时候需要,JSON目前还未看到具体的用途。区块模板是最近才上线的一个功能,目前因为模板比较少,看起来用处不是太大。

内容编辑区

内容编辑区主要是用来调整组件的顺序和显示页面的最终效果

属性编辑区

一般是用来设置组件的数据、样式和交互逻辑。

总结

我们用了一定的篇幅简要介绍了一下我们的小程序的总体功能,同时介绍了一下编辑器的一些具体功能,下一节我们进一步的拆解官方模板,通过模板来一步步的学习低码开发。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 功能结构图
  • 首页功能介绍
  • 创建应用
  • 编辑器介绍
    • 顶部导航栏
      • 左侧导航栏
        • 内容编辑区
          • 属性编辑区
          • 总结
          相关产品与服务
          云开发 CloudBase
          云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档