在线预约小程序搭建教程3-首页的制作

代码语言：javascript复制

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
@TOC
</font>
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

2021年低代码技术火爆，网上的争议也颇多。面对争议，有时候实地的考察一下就可以体会各家争议的地方究竟是什么。本文就结合笔者过往的经验，以一款在线预约小程序作为实战案例，来探一探低代码究竟能不能在实际开发中应用，有没有它独有的优势。

一、需求分析

一款小程序首次打开看到的第一个页面叫首页，我们这款小程序首页的主要作用是帮助用户来了解小程序的作用，主要包括概述、教师资质、运行机制、课费标准、联系人等几个段落

二、开发步骤

按照需求我们开发主要是分成几个步骤，第一是布局考虑，将页面拆分成可以搭建的布局；第二个是样式的考虑，比如背景色，背景图片；第三个是考虑组件的选用，就像盖房子一样，不同的结构需要考虑使用不同的组件

1.设置背景色

为了我们模块突出的效果，一般会给应用设置一个灰色的背景色，小程序底部要放置导航条，一般需要让背景容器距底部有一个间隔，这样我们滑到底部的时候不至于有内容被底部的导航条遮挡住。

打开我们的首页，先往里放置一个普通容器

样式要怎么设置呢，在右侧的属性面板，点击样式页签

点击样式代码编辑，输入以下样式代码

代码语言：txt复制

self {
padding-bottom: 120px;
    background: rgb(244, 244, 244)
}

在CSS的盒模型里，每个盒子都有两个间隔，分别为外边距（margin）和内边距(padding)。间距分别为四个方向，上、右、下左，对应的是top、right、bottom、left。

所以我们样式代码的第一句是padding-bottom设置了底部的内边距为120px。px表示像素，在CSS布局中表示距离，就是据底部120个像素的距离。

background表示背景的意思，我们这里设置了背景色，用rgb模式设置，r代表red红色的意思，g代表green绿色的意思，b代表blue蓝色的颜色。合在一起叫红绿蓝，千变万化的颜色都可以由这三个值来进行组合。每一个值的取值范围是0~255。

按保存键样式就生效了，可以看到现在的普通容器就有了背景色，并且有了一定的内边距

2.概述的开发

一般这种段落的开发，我们会给段落一个标题，然后标题下边显示一条线以区分标题和正文。

我们首先放置一个普通容器

然后设置一下容器的样式，输入如下代码

代码语言：txt复制

margin-top: 1rem;
    background: rgb(255, 255, 255)

这里的margin-top表示上外边距，单位就不像px一样，它是使用的rem，看一下mdn中对rem的解释

这个单位代表根元素（通常为<html> 元素）的 font-size 大小。当用在根元素的 font-size 上面时，它代表了它的初始值。

使用rem的好处是在不同大小的手机屏幕上你设置的边距看起来都比较舒服，如果限定死可能就会有适配的问题

我们这里将背景色设置为白色，为了和底色灰色有个对比

然后就是标题的布局，需要先放置一个普通容器，里边放置一个文本

给普通容器设置如下样式

代码语言：txt复制

border-bottom: 1px solid #e3e3e3;
    padding: 1em;

我们让它有一定的内边距，并且底部的线条设置成灰色

接着修改文本的内容为概述，设置字体的样式

代码语言：txt复制

font-size: 36px;
    font-weight: bolder

font-size标识设置字体的大小，font-weight可以设置字体的加粗效果

这样标题就设置好了，剩下就是显示正文的内容了，我们可以放置一个普通容器，里边放置一个富文本

3.教师资质的开发

剩下的内容因为结构一致，我们只需要复制和粘贴即可，然后修改一下标题

4.运行机制的开发

5.课费标准、联系人的开发

6.数据绑定

每个段落标题是固定的，但是具体的正文是变化的，变化的内容我们就需要从数据源中获取。我们在数据源章节介绍了创建数据源的方法，我们这一部分就讲解如何从数据源中获取数据。

首先需要点击导航条上的变量

然后在弹出的页面，选择首页，点击旁边出现的号，输入变量的名称，选择变量的类型

变量需要设置初始值，设置为如下：

代码语言：txt复制

{
"gs":"",
"jszz":"",
"yhjz":"",
"kfbz":"",
"lxr":""
}

变量设置好后我们就需要将页面上的富文本依次和变量里的值进行绑定

绑定之后内容都变成空的了，那我们要怎么初始化值呢？点击导航条的低代码编辑器

然后在首页的生命周期函数中输入如下代码：

代码语言：txt复制

export default {
  async onPageLoad(query) {
    const ret = await app.dataSources.company_fpxakmt.wedaGetList();
    if(ret.code!=0){
      return
    }
    $page.dataset.state.company = ret.data[0]
  },
  onPageShow() {
    //console.log('---------> LifeCycle onPageShow')
  },
  onPageReady() {
    //console.log('---------> LifeCycle onPageReady')
  },
  onPageHide() {
    //console.log('---------> LifeCycle onPageHide')
  },
  onPageUnload() {
    //console.log('---------> LifeCycle onPageUnload')
  },
}

代码的意思是从数据源中获取第一条记录赋值给变量，这样页面就可以从数据源获取值了

总结

本节我们利用了一定的篇幅介绍了首页的制作方法，当然了里边的概念还是不少的，既涉及到CSS的用法，也涉及到后台的开发，其实低代码开发并没有想象的那么简单，说白了是需要有全栈的开发能力的，正所谓冰冻三尺，非一日之寒，还需要不断的学习，不断的训练才行。

微搭低代码

0 人点赞