FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# FIDE 操作指引

# 1.上手基本使用

# 1.1 新建与运行项目

获取启动 DEMO

推荐使用 https://github.com/finogeeks/miniprogram-demo (opens new window) 做为启动demo, 里面涵盖了小程序大部分主要功能和用法参考

  1. 在github上下载demo代码包 图片.png

  2. 解压代码包并选择此代码包作为小程序目录,随意输入一个项目名称,点击确定。 appid可以不填,在登录后可用,关联的appid仅影响上传和后台管理 图片.png

# 1.2 主界面概览与调试

  1. 下图即为FIDE 主界面 图片.png

  2. 在编辑器中修改代码后按 ctrl + s 保存,会触发编译,可以在左侧预览代码修改后的效果 图片.png

  3. 可在日志面板中直接运行小程序 api 进行快速调试 图片.png

# 1.3 真机预览

登录后点击上方工具栏中的【预览】按钮,可通过 FinClip APP 扫描生成好的小程序二维码,在真机上体验演示效果

22.jpg

# 1.4 上传与发布

登录后点击上方工具栏中的【上传】按钮,可直接将编译好的小程序上传至后台
44.jpg

# 2.API Mock

# API Mock 使用场景

提醒

FIDE 中的 Mock 使用场景是针对已经实现了的接口进行模拟调用,小程序中的自定义接口无法使用本功能。

对于 MockAPI 接口并未做限制,这意味着这个 MockAPI 功能其实更加强大,可以修改几乎所有与 SDK 通讯的原生接口的行为。

例如可以通过Mock getAppConfig,来修改ft.getAppConfig这原生的回调内容,但原生接口的字段名并不一定是 API 接口的名字,这部分并不属于标准的运行时小程序接口,这是属于运行时基础库的底层实现的部分,如果 Mock 了核心基础的原生事件,会导致不可预知的错误,这时候关闭相关 Mock 即可。

如果有需要的原生接口需要 Mock,可以联系 FinClip 商务获取支持。

# 3. npm 支持

此文档要求开发者们对 npm 有一定的了解,因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm,请翻阅 官方 npm 文档 (opens new window) 进行学习。

# 3.1 安装 npm 包

在小程序 package.json 所在的目录中执行命令安装 npm 包:

npm install

此处要求参与构建 npm 的 package.json 需要在 project.config.js 定义的 miniprogramRoot 之内。

# 3.2 构建 npm

点击 菜单 -> 帮助 -> 构建npm

图片.png

完成 npm 构建后,会在对应的目录生成 miniprogram_npm 目录

# 3.3 使用npm 包

js 中引入 npm 包:

const myPackage = require('packageName')
const packageOther = require('packageName/other')

使用 npm 包中的自定义组件:

app.json

{
  "usingComponents": {
    "myPackage": "packageName",
    "package-other": "packageName/other"
  }
}

提示

此处使用 npm 包时如果只引入包名,则默认寻找包名下的 index.js 文件或者 index 组件。

# 4. 兼容性检查

兼容性检查工具可以帮助您的快速获取小程序在微信和 FinClip 上的组件、接口支持差异。

如果您已经上架的微信的小程序,想要迁移到集成了 FinClip SDK 的应用,通过代码包扫描,即可快速定位需要兼容改造的具体事项。

# 4.1 使用说明

  1. 打开 FIDE, 在窗口左下方点击进入「兼容性检查工具」

  2. 然后选择没有编译过的小程序代码包,就开始扫描了

  3. 扫描后的结果如图展示,您可以选择 「导出结果」导出列表。

# 4.2 扫描结果说明

导出检查见过如图,您可以通过字段'文件'和'行数'来定位当前代码所在的文件和具体行数。 '类型'是扫描出的问题类型,当前支持监测的类型为 组件(component)、API、配置功能项(json)。

此外,您可以根据'备注'标注的信息进行小程序代码的兼容性改造。

# 5. 生成 App

FIDE 提供对应操作与模板,用户最终能够生成 App 工程文件(用户可基于工程文件二次开发与配置)。 FIDE 会自动完成 SDK KEY&SECRET 与 Bundle ID 配置,并且在 App 打开的小程序中包含离线包。

# 5.1 生成步骤

  1. 打开 FIDE,选择并打开一个小程序。

  2. 点击右上角生成app按钮

  3. 生成app文案介绍,点击下一步

  4. 生成app第一步,选择一个appId,这里的appId有所限制,只能选择已上架线上版本的小程序appId(第一步如果打开的小程序是符合规则的已上架的小程序,那么这里就会默认选择对应的小程序appId)。点击下一步

  5. 生成app第二步,选择该已上架的小程序所被关联的应用以及该应用对应的平台bundleId。点击下一步

  6. 生成app第三步,选择导出目录。点击完成

  7. 生成app成功。

# 5.2 小程序配置

如果需要在小程序中隐藏右上角的关闭按钮,可以在 app.json 配置隐藏关闭按钮 (opens new window)

只有发布线上版本的小程序,才可被选择。小程序如何提交审核与上架发布,请看这 (opens new window)

# 5.3 iOS 配置

在 Xcode 项目的根目录下,Podfile 文件记录了 App 对 SDK 的依赖关系:

  # FinClip核心 SDK
    pod 'FinApplet'

  # FinClip扩展 SDK
    pod 'FinAppletExt'

  # FinClip百度地图 SDK
    pod 'FinAppletBDMap'

  # FinClip高德地图 SDK
    pod 'FinAppletGDMap'

  # FinClip WebRTC SDK
    pod 'FinAppletWebRTC'

  # FinClip蓝牙 SDK
    pod 'FinAppletBLE'

可根据 App 需求添加所需的 SDK 依赖,并在终端使用 pod update 命令进行更新和集成。

注意

如果您的 App 有使用到相机、相册、麦克风、定位或蓝牙功能,需要添加权限描述 (opens new window)。 如果您的 App 会通过其他 App(safari、微信等)打开您 App 中的小程序,那么需要添加URL Type (opens new window)handleOpenURL处理 (opens new window)

# 5.4 Android 配置

在 Android 项目 finclip_demo 内的 app 目录下,build.gradle 文件配置了 App 对 SDK 的依赖关系以及 SDK 的部分初始化配置参数。

dependencies {
    //noinspection GradleCompatible
    implementation "com.android.support:appcompat-v7:23.2.0"
    //noinspection GradleCompatible
    implementation "com.android.support:support-v4:23.2.0"

    implementation 'com.finogeeks.lib:finapplet:2.35.11'
}

示例工程仅配置了核心SDK,即 finapplet 库。

根据需要,可自行增添其它SDK:

  1. 扩展SDK (opens new window)
  2. MapSDK (opens new window)
  3. 蓝牙SDK (opens new window)
© 2021 凡泰极客

👋🏻 嘿,你好!

「FinClip」是一套基于云原生框架设计的小程序容器。能够让任何移动应用在集成小程序SDK之后,获得可用、安全的小程序运行能力。

>> 点我免费注册体验

查看产品文档
了解与 FinClip 相关的一切信息

产品博客 👈  了解产品更新与核心功能介绍
资源下载 👈  获取小程序 SDK 与开发工具
文档中心 👈  查询 FinClip 小程序开发指南与答疑

商务咨询热线
预约 FinClip 产品介绍,咨询商务报价或私有化部署事宜

400-066-00210755-86967467

获取产品帮助
联系 FinClip 技术顾问,获取产品资料或加入开发者社群

联系线上
人工客服

或 👉  点击这里,提交咨询工单