FinClip、Uniapp、APICloud(用友)

废话开篇：写点关于 FinClip、Uniapp、APICloud(用友) 的使用杂谈。

一、一流明难以照亮整个世界，但或许能指明一个方向

1、FinClip

特点：直接将 微信原生小程序 代码无缝转换为 FinClip 生态小程序

这里的 微信原生小程序 指的是用微信开发者工具完成的小程序工程，原代码无需修改即可直接在 FinClip 开发工具下进行编译、上传等相关操作，流程与微信小程序开发模式一致，同样需要上传到 FinClip 的管理后台进行"审核、发布、体验版"等流程设置。如需要在APP上植入已开发完的微信小程序，导入其提供的 SDK，简单一套初始化即可满足需求，FinClip 提供的方案开发效率最高。

2、Uniapp

特点：让 APP 拥有小程序展示能力，利用 HBuilder 使用 vue 语法进行开发，可将工程打包为一个本地的 .wgt 格式的文件，在 APP 内部置入 SDK 后，打开相应小程序的 .wgt 文件，便可在 APP 内以小程序的风格打开。

相信一些同学也想利用 Uniapp 的小程序功能，将微信原生小程序引入到 APP 内，经过搜索确实能搜出一些类似"微信原生小程序转Uniapp工程"的结果，但由于小程序的复杂程度不同，大概率是会失败的，如果是报错比较多的项目其适配的困难度也会很高，对于小程序跨端的意义也就变得微乎其微。

3、APICloud(用友)

特点：每个页面是单独的 HTML 页面，与 web 开发结构相同，APICloud(用友)基座封装后的 Webview 会自动初始化一个 api JS对象，并在初始化完成后会自动调用 web 页面注册的 apiready JS 事件。api 对象下的方法与 APP 原生建立了一系列的方法，供开发者调用获取原生的能力。

APICloud 转为用友后，让人值得吐槽的就是 APP 原生的自定义模块并没有同步到新的平台，对于维护不及时的朋友或许会出现功能重写或不可用的情况。

二、你关心的或许是如何让开发更灵活

对于移动端开发者来说，面对跨平台开发最关心的是如何封装一些 原生功能模块和UI组件 以解决平台无法提供的功能，虽然各个跨平台都有自身的交互方式，但是其根本特性就是利用原生的 webview JS 运行环境，定义一些方法与属性让 JS 与原生进行交互，只是封装后展示的方式不同而已，下面就简单的列出一些交互方式。

1、FinClip

小程序调用原生注册的方法，获取用户共享信息。

微信小程序工程会生成一个 app.js 文件，在 app.js 初始化的方法里，调用 FinClip 注册在原生工程里的"同步/异步"方法，可以获取共享数据。

在小程序工程的根目录下新建 FinClipConf.js 文件，它的作用是声明 FinClip 小程序任意界面的可以通过默认声明名为的 ft 对象调用哪些原生注册进来的方法及相关参数，🌰 ：getNativeUserInfo 方法。

声明

oc 复制代码

- (void)syncNativeInfoToFinClip:(NSDictionary *)resultDict
{
    [[FATClient sharedClient] registerSyncExtensionApi:@"getNativeUserInfo" handler:^NSDictionary *(FATAppletInfo *appletInfo, id param) {
        return resultDict;
    }];
}

FinClipConf.js 复制代码

module.exports = {
    extApi:[
            {   //扩展api名 该api必须Native方实现了
                name: 'getNativeUserInfo', 
                sync: true,
                params: {}
            }
    ]
}

使用

app.js 复制代码

const { token } = ft.getNativeUserInfo()

2、Uniapp

需要 JS 调用原生的方法，这里需要创建一个关联 JS 与原生的对象，uni 通过 requireNativePlugin 方法映射出对应的原生对象，🌰：WSLExtensionModule

原生注册关联对象

OC 复制代码

[WXSDKEngine registerModule:@"WSLExtensionModule" withClass:NSClassFromString(@"WSLExtensionModule")];

原生声明方法

WSLExtensionModule 复制代码

//异步方法声明
WX_EXPORT_METHOD( @selector(wslAsyncFunc:callback:))

//异步方法
- (void)wslAsyncFunc:(NSDictionary *)param callback:(WXModuleKeepAliveCallback)callback
{
    NSLog(@"我是异步回调");

}

uni 调用

js 复制代码

var module = uni.requireNativePlugin("WSLExtensionModule")
module.wslAsyncFunc({
        'name': 'uni-app',
        'age': 1
},(ret) => {
    uni.showToast({
            title:'调用异步方法 ' + ret,
            icon: "none"
    })
})

3、APICloud(用友)

与 uni 类似，APICloud(用友) 最合适的方式同样也是创建关联 JS 与原生的对象。

首先需要在 APICloud(用友) SuperWebSDK 工程里面的 module.json 注册关联对象信息。

json 复制代码

[
    {
         "name":"testManager",
         "class":"testManager",
         "methods":["start"]
     }
]

原生声明关联原生对象

OC 复制代码

@interface testManager : UZModule

// 方法
JS_METHOD(start:(UZModuleMethodContext *)uzInfo){

}

APICloud(用友) JS 通过调用 api.require 初始化关联对象

js 复制代码

let testManager = api.require('testManager')
// 调用原生方法
testManager.start((res)=>{
 }
)

三、总结与思考

跨平台方案很多，但是，不是每一个都适合当前条件，这里根据自身的一些体会，做了一些简单总结，如果能帮到大家，更是深感欣慰[抱拳][抱拳][抱拳]