上期文章咱们次要学习了如何在本人的 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/，注册并登录小程序管理后盾，别离进入小程序管理 → 我的小程序 → 新增小程序，在填写小程序名称等根底信息后确定创立。
FinClip 首页
三、下载开发工具 FIDE
拜访这个链接，下载并装置与以后零碎对应版本的 IDE
四、展现小程序
实现 IDE 下载安装后关上 FIDE，增加或创立本地小程序工程，在 FIDE 中各流程如下图所示：
FIDE 首页
编辑切换为居中
新建小程序截图
FIDE 中各局部截图
在开始编辑小程序代码之前，先来相熟一下小程序的各种构造与配置阐明吧。
1. 小程序目录构造
这是小程序最根本的目录构造，所有的小程序我的项目都是这个构造，在下面一直增加其余内容。
|- app.json|- app.js|- pages |- index |- index.fxml |- index.js这个构造分成两层：形容整体程序的顶层 App 脚本，以及形容各个页面的 page 脚本。
2. 我的项目配置文件 app.json
顶层的 app.json 文件用于整个我的项目的配置，对于所有页面都无效。
app.json 中有几个重要属性：
| 属性 | 类型 | 必填 | 形容 |
|---|---|---|---|
| pages | string[] | 是 | 页面门路列表 |
| window | Object | 否 | 全局的默认窗口体现 |
| tabBar | Object | 否 | 底部/顶部 tab 栏的体现 |
| debug | boolean | 否 | 是否开启 debug 模式，默认敞开 |
| subpackages | Object[] | 否 | 分包构造配置 |
| usingComponents | Object | 否 | 全局自定义组件配置 |
如何定义这些属性呢？示例代码如下：
{ "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({/ 参数 /})，主要参数如下表，参数均可选。
| 属性 | 类型 | 形容 | 触发机会 |
|---|---|---|---|
| onLaunch | Function | 生命周期回调—监听小程序初始化 | 小程序初始化实现时触发（全局只触发一次） |
| onShow | Function | 生命周期回调—监听小程序显示 | 小程序启动，或从后盾进入前台显示时触发 |
| onHide | Function | 生命周期回调—监听小程序暗藏 | 小程序从前台进入后盾时触发 |
| onError | Function | 谬误监听函数 | 当小程序产生脚本谬误，或者 api 调用失败时触发，会带上错误信息 |
| onPageNotFound | Function | 页面不存在监听函数 | 小程序要关上的页面不存在时触发，会带上页面信息回调该函数 |
| 其余 | 不限度 | 开发者可自在增加任意的 function 或数据到 Object 参数中，用this 可拜访 |
示例代码如下：
App({ onLaunch() { // 展现本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, globalData: { userInfo: null }})4. 页面文件 index.js
页面 js 文件负责初始化页面实例，配置以后页面的行为属性。
同样，页面 js 文件只须要执行一个函数 Page({/ 参数 /})，主要参数如下表，参数均可选。
| 属性 | 类型 | 形容 |
|---|---|---|
| data | Object | 页面的初始数据 |
| onLoad | Function | 生命周期回调—页面加载时触发 |
| onShow | Function | 生命周期回调—监听页面显示 |
| onReady | Function | 生命周期回调—监听页面首次渲染实现 |
| onHide | Function | 生命周期回调—监听页面暗藏 |
| onUnload | Function | 生命周期回调—监听页面卸载 |
| onPullDownRefresh | Function | 触发下拉刷新时执行 |
| onReachBottom | Function | 页面触底时执行 |
| onShareAppMessage | Function | 转发 |
| onPageScroll | Function | 页面滚动触发事件的处理函数 |
| onTabItemTap | Function | 以后是 tab 页时，点击 tab 时触发 |
| 其余 | Any | 开发者能够增加任意的函数或数据到 Object 参数中，在本页面的函数中用 this 能够拜访 |
示例代码如下：
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，你能够关上官网或者扫描上面的二维码。
编辑切换为居中
增加图片正文，不超过 140 字（可选）
下载结束后，应用第二步注册的 FinClip 开发者账号登陆 FIDE 和 FinClip App
同时反对账密或短信登录
点击预览按钮生成小程序二维码，而后应用 FinClip App 扫码体验即可。
点击这里的预览
关上 FinClip App 后，点击右上角即可扫码预览
六、上传小程序
上传小程序的流程比较简单，点击上传按钮，抉择第二步创立的小程序 ID，输出版本号及版本阐明即可。
点击顶部的上传按钮
输出对应的版本号和公布阐明
最终会看到上传胜利的提醒
此时再次进入 FinClip 小程序管理后盾，找到新创建的小程序进入详情页，新增审核版，抉择最新上传的小程序版本提交审核。待审核通过后能够上架该版本，点击展现线上版二维码可应用 FinClip App 扫码体验。
抉择对应的小程序，查看详情
点击此处新增审核
抉择对应的小程序版本
提交后会看到审核提交的提醒
审核通过，能够点击这里进行版本上架
点击上架后就会呈现在这里
七、小程序的开发 tips
在开发小程序的过程中，还有很多开发者须知的小技巧，咱们也在这里做一并的汇总解说。
1. 如何在 FinClip App 中关上 vconsole
只须要在小程序的 app.json 中增加字段： "debug": true 即可
增加即可
2. 如何在 FIDE 中应用小程序自定义 API 性能
自定义 API 次要有以下 2 个应用场景：
- 自定义 API 调试 Mock
- H5 调用的原生API Mock
在默认状况下，IDE 对于自定义的 API 会默认返回 Fail: 未实现该 API ，而一些小程序业务流程可能会依赖自定义 API。
所以 IDE 对于客户提供 API Mock 的机制，能够自定义 SDK 返回的后果，这样便能够在 IDE中 走通业务这些业务流程。
根底用法
入口在右下角调试面板中的 Mock 标签
先点击 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 款式与服务调用的相干信息，敬请期待。