手把手第四篇：在小程序中写出 Hello World

在上期文章中，我们主要聊了聊如何在自己的 iOS 或 Android 应用中引入第三方 SDK。随着引入 SDK 文章结束，关于应用开发入门系列的文章也就结束了。

于是在这一期文章中，我们就一起来将目光转向小程序的开发入门中，看看如何在小程序中写出属于自己的 Hello World。

本期文章属于《手把手系列教学》的第四篇，如果你还不太了解这一系列，可以点击 这里 查看详情。

一、什么是 FinClip 小程序

我们平时接触最多的可能是微信小程序，例如大家比较常用的微信乘车码、肯德基自助点单、顺丰速运、腾讯文档等小程序。其体积小、用完即走、有着媲美原生 App 体验的同时，也给大家的生活工作提供了很大便利。这源于小程序提供了一个简单、高效的应用开发框架、丰富的组件及 API，帮助开发者在 App 中开发具有原生体验的服务。

那么 FinClip 小程序与微信小程序之间有什么关系呢？简单来讲，FinClip 小程序是与微信小程序类似的技术平台，兼容微信小程序语法及常用 API，同时也可以为 App 提供构建自有小程序生态的能力。FinClip 小程序技术可以为您在应用中集成一套自有小程序平台，或者在已经集成 FinClip 小程序的平台中发布自研小程序。

本文将作为抛砖引玉，从小程序开发者角度来介绍小程序基本目录结构、使用语法，和在 FinClip 平台如何快速开发、上传一个简单小程序。更加详细的组件及 API 支持、SDK 集成方法等可以参考 FinClip 小程序文档中心。

二、申请小程序

首先访问 FinClip 小程序官网：https://www.finclip.com/，注册并登录小程序管理后台，分别进入小程序管理 → 我的小程序 → 新增小程序，在填写小程序名称等基础信息后确定创建。

三、下载开发工具 FIDE

访问这个链接，下载并安装与当前系统对应版本的 IDE

四、展示小程序

完成 IDE 下载安装后打开 FIDE，添加或创建本地小程序工程，在 FIDE 中各流程如下图所示：

在开始编辑小程序代码之前，先来熟悉一下小程序的各种结构与配置说明吧。

1. 小程序目录结构

这是小程序最基本的目录结构，所有的小程序项目都是这个结构，在上面不断添加其他内容。

|- app.json
|- app.js
|- pages
   |- index
      |- index.fxml
      |- index.js

这个结构分成两层：描述整体程序的顶层 App 脚本，以及描述各个页面的 page 脚本。

2. 项目配置文件 app.json

顶层的 app.json 文件用于整个项目的配置，对于所有页面都有效。

app.json 中有几个重要属性：

如何定义这些属性呢？示例代码如下：

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light", // 下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#fff",  // 导航栏的颜色
    "navigationBarTitleText": "首页", // 导航栏的文字，默认为空。
    "navigationBarTextStyle": "black" // 导航栏的文字颜色，只支持black（黑色）或white（白色），默认为white。
  },
  "debug": true
}

3. 小程序初始化文件 app.js

这个文件用于对整个小程序进行初始化。

app.js 文件只需要执行一个函数 App({/* 参数 */})，主要参数如下表，参数均可选。

示例代码如下：

App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  globalData: {
    userInfo: null
  }
})

4. 页面文件 index.js

页面 js 文件负责初始化页面实例，配置当前页面的行为属性。

同样，页面 js 文件只需要执行一个函数 Page({/* 参数 */})，主要参数如下表，参数均可选。

示例代码如下：

Page({
  data: {
    motto: 'Hello World'
  },
  onLoad() {
    
  }
})

5. 页面文件 index.fxml

页面 fxml 文件用于描述小程序的页面，类似 HTML 语言。

示例代码如下：

<view class="container">
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

上面的代码用到了两个标签：<view>和<text>。

<view> 标签表示一个区块，用于跟其他区块分隔，类似 HTML 语言的 <div> 标签。<text> 表示一段行内文本，类似于 HTML 语言的 <span> 标签，多个 <text> 标签之间不会产生分行。其中给每个标签设置的 class 类也类似于 HTML 中的 class。

五、预览小程序

首先我们需要下载 FinClip App，你可以打开官网或者扫描下面的二维码。

下载完毕后，使用第二步注册的 FinClip 开发者账号登陆 FIDE 和 FinClip App

点击预览按钮生成小程序二维码，然后使用 FinClip App 扫码体验即可。

六、上传小程序

上传小程序的流程比较简单，点击上传按钮，选择第二步创建的小程序 ID，输入版本号及版本说明即可。

此时再次进入 FinClip 小程序管理后台，找到新创建的小程序进入详情页，新增审核版，选择最新上传的小程序版本提交审核。待审核通过后可以上架该版本，点击展示线上版二维码可使用 FinClip App 扫码体验。

七、小程序的开发 tips

在开发小程序的过程中，还有很多开发者须知的小技巧，我们也在这里做一并的汇总讲解。

1. 如何在 FinClip App 中打开 vconsole

只需要在小程序的 app.json 中添加字段： "debug": true 即可

2. 如何在 FIDE 中使用小程序自定义 API 功能

自定义 API 主要有以下 2 个使用场景：

1. 自定义 API 调试 Mock
2. H5 调用的原生API Mock

在默认情况下，IDE 对于自定义的 API 会默认返回 Fail: 未实现该 API ，而一些小程序业务流程可能会依赖自定义 API。

所以 IDE 对于客户提供 API Mock 的机制，可以自定义 SDK 返回的结果，这样便可以在 IDE中 走通业务这些业务流程。

基础用法

入口在右下角调试面板中的 Mock 标签

1.原生小程序内使用自定义 API 规则示例

自定义 API，在小程序根目录 FinClipConf.js 文件配置如下：

module.exports = {
  extApi:[
    { //普通交互API
      name: 'customEvent', //扩展api名 该api必须Native方实现了
      params: { //扩展api 的参数格式，可以只列必须的属性
        url: ''
      }
    }
  ]
}

在小程序中运行 ft.customEvent，可以取到 Mock 结果：

2. web-view 中使用自定义 API 规则示例

在 H5 页面中引入桥接 js-sdk 文件后，即可调用下面的注册的方法了。

HTML 内调用注册的方法示例：

window.FinChatJSBridge.invoke('customEvent', {url:'getLocation'}, (result) => {
    console.log(result)
});

本期教程讲解了基于 FinClip 进行小程序开发与调试，上传的全部流程介绍。在之前的《从零到一，我也能写小程序》中，我们也做过类似的文章教程。

在下一期的文章中，我们将会一起聊聊如何编辑小程序的 CSS 样式与服务调用的相关信息，敬请期待。