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

上期文章咱们次要学习了如何在本人的 iOS 或 Android 利用中引入第三方 SDK。随着引入 SDK 文章完结，对于利用开发入门系列的文章也就完结了。

那么明天，咱们将会开始学习小程序的开发入门，看看如何在小程序中写出属于本人的 Hello World。

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

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

本文将作为抛砖引玉，从小程序开发者角度来介绍小程序根本目录构造、应用语法，和在 FinClip 平台如何疾速开发、上传一个简略小程序。更加具体的组件及 API 反对、SDK 集成办法等能够参考 FinClip 小程序文档核心。

首先拜访 FinClip 小程序官网：https://www.finclip.com/，注册并登录小程序管理后盾，别离进入小程序管理 → 我的小程序 → 新增小程序，在填写小程序名称等根底信息后确定创立。

FinClip 首页

拜访这个链接，下载并装置与以后零碎对应版本的 IDE

实现 IDE 下载安装后关上 FIDE，增加或创立本地小程序工程，在 FIDE 中各流程如下图所示：

FIDE 首页

编辑切换为居中

新建小程序截图

FIDE 中各局部截图

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

这是小程序最根本的目录构造，所有的小程序我的项目都是这个构造，在下面一直增加其余内容。

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

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

顶层的 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
}

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

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}
})

页面 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() {}
})

页面 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 扫码体验。

抉择对应的小程序，查看详情

点击此处新增审核

抉择对应的小程序版本

提交后会看到审核提交的提醒

审核通过，能够点击这里进行版本上架

点击上架后就会呈现在这里

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

只须要在小程序的 app.json 中增加字段：“debug”: true 即可

增加即可

自定义 API 次要有以下 2 个应用场景：

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

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

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

根底用法

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

先点击 Mock 再点击加号

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

module.exports = {
  extApi:[
    { // 一般交互 API
      name: 'customEvent', // 扩大 api 名 该 api 必须 Native 方实现了
      params: { // 扩大 api 的参数格局，能够只列必须的属性
        url: ''
      }
    }
  ]
}

在小程序中运行 ft.customEvent，能够取到 Mock 后果：

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

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

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

本期教程解说了基于 FinClip 进行小程序开发与调试，上传的全副流程介绍。

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

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

一、什么是 FinClip 小程序

二、申请小程序

三、下载开发工具 FIDE

四、展现小程序

1. 小程序目录构造

2. 我的项目配置文件 app.json

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

4. 页面文件 index.js

5. 页面文件 index.fxml

五、预览小程序

六、上传小程序

七、小程序的开发 tips

1. 如何在 FinClip App 中关上 vconsole

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

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

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