从零开始：创建并发布你的第一个FinClip小程序-优快云博客

本文链接：https://blog.youkuaiyun.com/POHOU23/article/details/121352987

看了这篇文章，即使让我现在就从头写一个能够正常运行的小程序，也没有原本想象中的那么难了。

在本文中，我们将会以一个具体的小程序为例，带领大家从零到一完成一个小程序的开发流程，并将这个小程序上传到 FinClip.com 进行小程序提审与上架操作。

我们新建了一个叫做「HelloWorld」的小程序，FIDE 在初始化小程序项目时，会自动在项目目录中补充对应所需要的项目文件。那不妨让我们先从小程序目录下的配置文件开始，逐渐揭开小程序的面纱。

使用 FIDE 编辑小程序

1. 认识 json 文件

在小程序项目目录下，我们首先看到一个 app.json 文件，与其他常见的后缀为 .pptx /.mp4 /.py 文件不同，json 即不是一种可执行文件也不是一种编程语言，而是一种数据格式文件。
在这里插入图片描述

json 主要以两侧的 { } （花括号）为代表，花括号也是 json 文件的基本结构，在 json 文件中，我们一般会通过 key -
value 的方式来表达数据，而 value 的值一般会被放在双引号中。修改编辑 json
文件时需要严格遵守相关的数据格式（比如不能添加注释，不能使用单引号），否则会编译失败。

在 app.json 文件中，会包括当前小程序的全局配置，也是在这里对小程序的所有页面路径，界面样式等信息进行配置的综合入口。

在这里插入图片描述
在上图中我们会看到一共有 4 个字段（即 pages，window，style 和 sitemap），其中 pages 用来描述当前小程序中所有的页面路径，windows 字段用来定义小程序中的页面顶部颜色，所显示的名称等，style 字段用来约束小程序中组件的默认使用样式，而 sitemap 字段则用来控制小程序可被索引的内容。

但如果我们把后面的 3 个字段（即 window，style，sitemap）都删除掉，小程序是否能够被正确编译呢？
在这里插入图片描述
事实上，pages 字段是配置文件中唯一必须的字段。所有小程序中的页面都需要在 app.json 中进行注册（即在 pages 这个数组下添加对应的路径）。

但我们也发现，随着 app.json 中其他字段被删除，小程序顶部的导航栏背景变为了黑色。

如果我们需要对不同的页面进行自定义设置，则需要到不同页面目录下的 page.json 进行单独设置（如在 index 页面目录下，则需要修改 index.json 文件）。

如何对某个页面进行单独配置呢？让我们打开对应的页面目录（如「pages-index」），修改目录中的 index.json 文件：

本段中，我们仅仅以“导航栏背景”与“导航栏文字”进行设置，其实 FinClip 小程序中还有非常多的其他组件，我们可以查看「文档中心 -
开发 - 指南 - 配置小程序」了解更多的可配置内容。

{
   
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
}

在 json 中配置导航栏的背景颜色

顾名思义，这里的“navigationBarBackgroundColor”指的就是“导航栏背景颜色”，而“navigationBarTextStyle”指的就是“导航栏字体样式”。

在这里插入图片描述

2. 创建页面

在这里插入图片描述
在创建页面时，也不需要单独在新增的目录中新增 ftss，fxml，js 和 json 文件，我们仅需要像上图这样，点击顶部的项目名称右侧“第二个加号”创建新目录，右键新目录，并点击「创建 page」输入页面名称，即可自动完成新目录的创建。

通过「创建 page」的形式新建页面，FIDE 会自动将页面文件增加到 app.json 文件中，而如果是通过手动创建页面的形式，则需要开发者自行将页面在 app.json 文件中进行注册。而如果我们需要删除某个页面目录，则也需要在 app.json 文件中清空对应的页面路径。

3. 认识 fxml 文件

如同《开发小程序的正确方式》所说，fxml 是小程序中不同页面的结构文件，通过结合组件和事件系统，就能像玩乐高积木一样，拼搭出页面的整体框架。

为了便于更清晰地熟悉小程序开发过程，我们需要先删除项目中的 index 和 logs 目录，在“pages”目录下新建“introduce”目录，并且修改 app.json 仅保留以下内容：

{
   
  "pages": [
    "pages/introduce/introduce"
  ]
}
app.json

在修改保存后重新编译，我们会看到 FIDE 变成了下图这个样子，页面中的“introduce”是 FIDE 自动添加的。
在这里插入图片描述
顶部导航栏的黑色背景太突兀了，让我们打开 introduce.json 文件，定义其中的背景与文字颜色：

{
   
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
}

introduce.json

接下来，让我们选中 introduce.fxml 文件，在编辑器中删除 FIDE 自动创建的默认代码（即 introduce ），并在其中输入如下代码：

<view>
    <text>Hello, World</text>
    <image src="https://www.finclip.com/mop/document/images/logo.png" ></image>      
    <view>
        <text>开启 FinClip 小程序之旅</text>
    </view>
</view>