关于前端:保姆级教程写出自己的移动应用和小程序篇四

上期文章咱们次要学习了如何在本人的 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":["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，你能够关上官网或者扫描上面的二维码。

​

编辑切换为居中

增加图片正文，不超过 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 个应用场景：

1. 自定义 API 调试 Mock
2. 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 款式与服务调用的相干信息，敬请期待。