in东师小程序快速上手

Mr.Hope ... 2021-11-15 小程序 大约 11 分钟

本部分将手把手引领您完成一个页面的制作,其中会涉及最常见的组件。

# 材料准备

假定您已经获得以下材料:

  • 统一身份认证登陆 统一身份认证登陆
  • 修改密码页面截图 修改密码页面截图
  • 别名管理页面截图 别名管理页面截图
相关材料

一、获得学号

学号是 10 位数字,您收到的录取通知书编号和日后发放的校园卡 💳 卡号即是学号。

二、获得邮箱(别名)

  1. 访问 https://authserver.nenu.edu.cn/authserver/login (opens new window)
  2. 使用学号与默认密码进行登录。
  3. 登陆后,您可以在“别名管理中”中通过别名获得自己的邮箱号 ✉
  4. 邮箱地址统一为 “别名” + “@nenu.edu.cn”

默认密码: Nenu + 身份证后六位,X 用 1 代替

修改密码及密保绑定

  1. 访问 https://authserver.nenu.edu.cn/authserver/login (opens new window)
  2. 点击“修改密码”,修改初始密码。

提示

  • 为了您找回密码时的便捷,建议您在个人资料处绑定其他邮箱或绑定手机,便于密码遗忘后自助找回。
  • 由于身份证号可能被他人获得,为了您的资金、消费以及课程成绩安全 🔐,⚠ 请您务必更换默认密码 🔑。

接下来您就需要按照 参数表 进行页面的创建。

# 创建页面配置文件

打开 VSCode 并选择“文件”-“新建文件”,并立即保存文件为 authorize.yml

# 编写总体结构

按照 参数表 → 总体结构 完成页面的基础信息添加。页面的标题可以起为“统一身份认证”,假定当天是 2021 年 11 月 1 日,您叫张三。

总体结构
参数 必填 值类型 内容 备注
title string 导航栏标题 一般不超过八个字,六字及以下为佳
desc string 页面描述 会显示在页脚
author string 页面的作者 会显示在页脚
time string 页面更新时间 会显示在页脚
grey boolean 使用灰色背景 默认为白色背景
content ComponentConfig[] 页面的内容 数组的每个对象会最终渲染为一个组件
shareable boolean 是否可被分享 是否可以使用小程序的界面分享,默认为 false

参照上述说明,你可以很轻松的编写如下内容:

title: 统一身份认证
author: 张三
time: 2021年11月1日
shareable: true
content: []
1
2
3
4
5

在这里,content 暂时被设置成了空数组,它表示页面的内容,接下来我们就需要丰富和完善它。

# 添加第一个组件——标题

参数表 → 支持的组件 所说:

content 的每个元素都为一个对象,该对象会最终渲染为一个组件。

每个配置对象有一个固定的键 tag 来决定渲染的组件。有效的 tag 值及对应的渲染结果如下:

现在,我们需要为小程序页面添加第一个组件——标题。

为让小程序渲染它,我们需要为 content 数组添加第一个元素。为了让这个元素渲染为标题组件,我们需要设置元素为一个对象,并设置 tag 键的值为 title:

title: 统一身份认证
author: 张三
time: 2021年11月1日
shareable: true
content:
  - tag: title
1
2
3
4
5
6

接下来,我们需要参阅 参数表 → title 参数,设置更多参数描述组件。

title 参数
参数 必填 值类型 内容
text string 大标题文字

可以看到,我们需要使用 text 来设置标题组件的文字:

title: 统一身份认证
author: 张三
time: 2021年11月1日
shareable: true
content:
  - tag: title
    text: 获得学号
1
2
3
4
5
6
7

# 添加第二个组件文本

查阅参数表可知,小程序提供了标题组件,以及段落、无序列表、有序列表三个文字组件。

对于 “学号是 10 位数字,您收到的录取通知书编号和日后发放的校园卡 💳 卡号即是学号。” 这段文字来说,它显然不够充当一个段落,因此,我们选择文本组件。而文本组件的 tagtext,其参数如下:

文本组件参数
参数 必填 值类型 内容 备注
heading string | boolean 标题
text string | string[] 文字内容
type 'tip' | 'warn' | 'danger' | 'info' 文字块样式 不填无额外样式
align 'left' | 'right' | 'center' | 'justify' 段落对齐方式 默认为 'justify'

我们显然不需要对其设置额外的样式,默认的两端对齐也可以满足要求,那么我们只需要通过 text 属性设置文字:

title: 统一身份认证
author: 张三
time: 2021年11月1日
shareable: true
content:
  - tag: title
    text: 获得学号

  - tag: text
    text: 学号是 10 位数字,您收到的录取通知书编号和日后发放的校园卡 💳 卡号即是学号。
1
2
3
4
5
6
7
8
9
10

在这里,我们注意到 text 同时接收 string 和 string 数组,这是因为文字可以有一个或多个段落,所以如果我们需要添加一个新行,我们需要将其改为:

title: 统一身份认证
author: 张三
time: 2021年11月1日
shareable: true
content:
  - tag: title
    text: 获得学号

  - tag: text
    text:
      - 学号是 10 位数字,您收到的录取通知书编号和日后发放的校园卡 💳 卡号即是学号。
      - 这里的文字另起了新行...
1
2
3
4
5
6
7
8
9
10
11
12

# 文本排版

对于同样的排版,您可以有多种方式来实现。假定我们想实现以下文字:

春眠不觉晓
处处闻啼鸟
1
2

借用文字组件,以下写法的显示并无不同:

  • 使用数组创建多个段落

    - tag: text
      text:
        - 春眠不觉晓
        - 处处闻啼鸟
    
    1
    2
    3
    4
  • 使用多行字符串

    - tag: text
      text: |-
        春眠不觉晓
        处处闻啼鸟
    
    1
    2
    3
    4
    - tag: text
      text:
        - |-
          春眠不觉晓
          处处闻啼鸟
    
    1
    2
    3
    4
    5
  • 使用换行符

    - tag: text
      text: "春眠不觉晓\n处处闻啼鸟"
    
    1
    2
    - tag: text
      text:
        - "春眠不觉晓\n处处闻啼鸟"
    
    1
    2
    3

所以您完全可以根据自己的习惯去进行编辑,不过 Mr.Hope 还是推荐前两种,因为他们更为直观。

# 媒体文件存放

由于 YAML 是纯文本文件,所有的图片、文件等需单独列出,并在对应的配置项处填入对应的网址。

in 东师服务器文件结构如下:

  • 文件: 存放在 https://mp.innenu.com/file/
  • 图片: 存放在 https://mp.innenu.com/img/
  • 页面 YAML: 存放在 https://mp.innenu.com/res/
  • 图标: 存放在 https://mp.innenu.com/res/icon/

相关信息

关于完整的服务器文件结构,请访问 https://github.com/Hope-Studio/innenu-res (opens new window)

对于本页面,您可以获得的图片按照内容进行命名:

  • 统一身份认证登陆: authserver.jpg
  • 修改密码页面截图: reset-password.jpg
  • 别名管理页面截图: email-address.jpg

同时,您需要在对应的配置项填入:

  • https://mp.innenu.com/img/account/authserver.jpg
  • https://mp.innenu.com/img/account/reset-password.jpg
  • https://mp.innenu.com/img/account/email-address.jpg

提交时,直接提交下列压缩包结构。

├─ img
|  └─ account
|     ├─ authserver.jpg
|     ├─ reset-passwor.jpg
|     └─ email-address.jpg
└─ res
   └─ guide
       └─ account
           └─ authorize.yml
1
2
3
4
5
6
7
8
9

# 继续完成页面

类似的,通过添加新元素设置 tag 选定组件,并查表添加对应参数后,您很容易就可以得到如下的页面:

title: 统一身份认证
author: 张三
time: 2021年11月1日
shareable: true
content:
  - tag: title
    text: 获得学号

  - tag: text
    text: 学号是 10 位数字,您收到的录取通知书编号和日后发放的校园卡💳卡号即是学号。

  - tag: title
    text: 获得邮箱(别名)

  - tag: ul
    text:
      - 访问 https://authserver.nenu.edu.cn/authserver/login

  - tag: copy
    text: https://authserver.nenu.edu.cn/authserver/login

  - tag: ul
    text:
      - 使用学号与默认密码进行登录。
      - 登陆后,您可以在“别名管理中”中通过别名获得自己的邮箱号✉
      - 邮箱地址统一为 “别名” + “@nenu.edu.cn”

  - tag: img
    src: https://mp.innenu.com/img/account/email-address.jpg
    desc: 本例中邮箱为 "mr-hope@nenu.edu.cn"

  - tag: text
    type: info
    heading: 默认密码
    text: Nenu + 身份证后六位,X 用 1 代替

  - tag: img
    src: https://mp.innenu.com/img/account/authserver.jpg

  - tag: title
    text: 修改密码及密保绑定

  - tag: ul
    text: 请您访问 https://authserver.nenu.edu.cn/authserver/login 进行登录。

  - tag: copy
    text: https://authserver.nenu.edu.cn/authserver/login

  - tag: ul
    text: 点击“修改密码”,修改初始密码。

  - tag: img
    src: https://mp.innenu.com/img/account/reset-password.jpg

  - tag: ul
    type: tip
    heading: Mr.Hope の 友情提示
    text:
      - 为了您找回密码时的便捷,建议您在个人资料处绑定其他邮箱或绑定手机,便于密码遗忘后自助找回。
      - 由于身份证号可能被他人获得,为了您的资金、消费以及课程成绩安全🔐,⚠请您务必更换默认密码🔑。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

这样您就创建出了一个简单的页面。

# 使用列表进行导航

小程序主要使用列表和网格组件导航至其他页面,当然部分其他组件也有类似功能。

如果您同时提交了多个文件,或者您编写的页面想要导航至其他页面,您就需要创建列表来构建“页面跳转”。

列表组件因为含有多个子项目,其 content 属性的值和文件的根键值 content 很像。您需要为数组中的每个元素设置文字与可选的图标、描述和链接。

列表参数
参数 必填 值类型 内容 备注
header string | boolean 头部标题 不填会在标题所在处留空占位,设置为 false 来取消留空占位
footer string 尾部标题
content SimpleList[] 列表内容

列表每一项参数如下:

参数 必填 值类型 内容
icon string 列表图标的简称或在线网址
text string 列表项文字
desc string 列表项描述,显示在尾部
path string 对应配置文件的相对或绝对路径(不带后缀名),以 / 结尾默认为 index

假定我们需要提交如下的页面结构:

└─ res
   ├─ intro
   |    ...
   └─ guide
       └─ account
            ├─ mail
            |  ├─ intro.yml  (邮箱介绍)
            |  ├─ ios.yml  (iOS 邮箱设置)
            |  └─ android.yml (安卓邮箱设置)
            |
            ├─ authorize.yml (统一身份认证)
            └─ index.yml (账号主页)
1
2
3
4
5
6
7
8
9
10
11
12

index.yml 中,我们可以设置如下的列表项:

title: 账号
content:
  - tag: list
    header: 了解更多
    content:
      - text: 统一身份认证

  - tag: list
    header: 校园邮箱
    content:
      - text: 邮箱介绍

      - text: 安卓邮箱客户端设置

      - text: iOS 邮箱客户端设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

我们可以添加额外的 icon 属性来设置一个美观的图标。当前可用的全部图标请详见 https://github.com/Hope-Studio/innenu-res/blob/main/res/icon/ (opens new window)。 我们可以直接找到相应图标并设置 icon 为文件名 (不带 .svg 后缀)。

title: 账号
content:
  - tag: list
    header: 了解更多
    content:
      - text: 统一身份认证
        icon: authorize

  - tag: list
    header: 校园邮箱
    content:
      - text: 邮箱介绍
        icon: email

      - text: 安卓邮箱客户端设置
        icon: android

      - text: iOS 邮箱客户端设置
        icon: apple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

接下来,我们需要通过 path 设置路径。我们使用 / 来分割目录,所以 intro.yml 相对 index.yml 的路径为 mail/intro。(这里同样省略万年不变的后缀 .yml)

title: 账号
content:
  - tag: list
    header: 了解更多
    content:
      - text: 统一身份认证
        icon: authorize
        path: authorize

  - tag: list
    header: 校园邮箱
    content:
      - text: 邮箱介绍
        icon: email
        path: mail/intro

      - text: 安卓邮箱客户端设置
        icon: android
        path: mail/android

      - text: iOS 邮箱客户端设置
        icon: apple
        path: mail/ios
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

此时,小程序就可以渲染出正确的列表项,并在您点击“邮箱介绍”时跳转到新页面渲染 intro.yml 文件。

回退上一层和从根目录访问

有些时候,您可能需要从 intro.yml 跳转到 index.yml 中去,这就涉及到表示父目录的方式。我们使用 ../ 表示父目录,所以对于 intro.yml 来说,index.yml 的路径可写为 ../index,而参数表中提到 index 为默认文件,所以可以简写为 ../

有些时候您能想从根目录开始描述路径,这种情况下,请以 / 开头设置 path,此时您会从 res/ 文件夹下开始进行路径的匹配。

└─ res
   ├─ intro
   |    ...
   └─ guide
       └─ account
            ├─ mail
            |  ├─ intro.yml  (邮箱介绍)
            |  ├─ ios.yml  (iOS 邮箱设置)
            |  └─ android.yml (安卓邮箱设置)
            |
            ├─ authorize.yml (统一身份认证)
            └─ index.yml (账号主页)
1
2
3
4
5
6
7
8
9
10
11
12

比如,对于所有文件来说,他们都可以通过 /guide/account/mail/intro 访问 intro.yml

至此,您应该能够独自完成大部分的页面编辑工作了。