FIDE

FIDE是 FinClip 为便于开发者更简单、高效地调试小程序，开发的小程序开发调试工具。有较高的实用性以及丰富的功能，并且仍在提供维护。

下载

初始化

创建项目/打开一个项目
fide将会实现自动编译
可以新建一个page，test一下

打开一个项目

官方其实已经提供了一个demo供我们体验一下各组件的使用,里面涵盖了小程序大部分主要功能和用法参考 首先，我们可以前往官方的github github.com/finogeeks/m… 下载demo

然后在fide点击打开项目，双击项目即可。我们就可以在模拟器中看到finclip小程序的组件展示啦！可以通过编译器-视图查看其中组件对应的代码以及其中的日志、编译日志、网络、存储、mock都可以使用，其中的功能由大家区发掘啦。

创建项目

在fide点击加号进入，可以选择是否添加appid(需要去后台注册添加，方便在fide直接上架小程序到Finclip app) 它会初始化一个index默认页面也可以选择自己添加页面

项目结构的说明

简单认识了开发工具中的构成后，我们着重了解一下小程序的目录结构：

结构名称	作用
app.js	注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等（每个小程序都需要在app.js中调用App方法注册小程序实例）
app.json	对小程序进行全剧配置，文件内容为一个JSON对象。参考全局配置
app.ftss	公共样式表，定义公共的样式
pages	由小程序的页面组成，每一个页面文件中包含四个文件，分别为 .json、 .js、.fxml、.ftss，框架会自动获取
.json	页面配置，在当前页中会覆盖全局配置中 app.json的windows中相同的配置项。参考页面配置
.js	是JavaScript代码，处理页面逻辑
.fxml	页面结构，编码风格与html相似，只有个别差异
.ftss	页面样式，编码风格等同于css，可覆盖app.ftss中的同名样式

以下是其他文件的描述不太重要看看了解就好

文件名	描述
.eslintrc.js	ECMAScript 语法校验插件 ESLINT 的配置文件，与小程序本身无关，不重要，可删除
fide.project.config.json	项目构建文件，如指明基础库版本、appid 等，很少手动修改，想详细了解请参照项目配置文件
sitemap.json	帮助项目进行 SEO 优化的文件，很少修改，可删除，想详细了解请参照 sitemap 配置

可以自定义components、images文件夹分别存放组件和图片，方便管理。

小程序框架系统分为两部分：渲染层和逻辑层，其中 FXML 模板和 FTSS 样式工作在渲染层，JS 脚本工作在逻辑层。

渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染，一个小程序存在多个界面，所以渲染层存在多个WebView线程；逻辑层采用JsCore线程运行JS脚本。这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native转发。

实例

下面我们将用显示Hello world这个页面做一个实例，主要是在pages编写的。

index.fxml 添加页面结构，其中用到了在.js中定义的motto变量，bindtap的点击事件。

<!--index.ftml-->
<view class="container">
  <view class="usermotto" bindtap="bindViewTap">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

index.ftss 将页面上外边距设为200px 编写页面样式

/**index.ftss**/

.usermotto {
  margin-top: 200px;
}

index.js 在data中设置motto变量。页面的各个生命周期可触发的操作，也在js中定义，比如加载、显示、隐藏等。

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: '',
  },
  // 事件处理函数
  bindViewTap() {
    ft.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    this.setData({
      motto: 'hello world'
    })
  }
})

延申

rpx与px的换算关系：

规定屏幕宽为750rpx，与手机屏幕实际宽度成固定比例，如：

iphone5屏幕宽为320px，则在iphone5上，1px=2.34rpx；

iphone6屏幕宽为375px，则在iphone6上，1px=2rpx；

在实际开发中，最好使用iphone6作为模型机型。

保存编译

（ctrl + s 保存，会触发编译）即可加载自动编译，并且在编译台可以看到编译日志

可自定义编译条件，无需多次加载编译多个页面。

mock

可以实现在fide进行mock数据测试，但这里的mock接口必须是完整开发完毕的。且在使用前需要在FinClipConf.js中进行配置。

tip: 当编译日志出现某一处修改过的错误，可以点击工具栏的清缓存 清除文章的缓存，重新加载页面。

那么完成了一个小程序，应该怎么在finclip平台上发布呢？我们接下来来讲讲怎么实现上架、测试小程序。

上架

注册开发者平台账号

首页进行注册登录->进入小程序开放平台

创建小程序

小程序管理->我的小程序->新增小程序

上传代码包

代码包->上传代码包

关于代码包

可以在fide的工具栏点击导出，将自己编写的代码打包成代码包导出。

新增审核and上架

我的小程序->点击要上架的小程序的详情->新增审核->点击上架

最终这样就可以实现在finclip app查看自己上架了的小程序啦!

测试

关于开发测试版本查看

可以在fide的工具栏中点击上传，然后在finclip app的管理我的小程序中选择对应的测试版本选择查看我的小程序，查看上架效果。以此也可以及时便捷的调试自己的代码。

App ID 是自己在小程序开发平台创建的小程序对应的app id

版本号自己决定例如1.1.1

关于小程序兼容性

如果上架后发现有些地方不太兼容，可以使用fide的兼容性检查。点击左下角的兼容性检查上传代码包即可检查兼容性。

如此便可以及时改进代码，以便项目的正常运行以及发布。

参考来源:finclip www.finclip.com/mop/documen…

手把手教你用finclip写第一个小程序