FinClip、Uniapp、APICloud(用友)

6 阅读4分钟

废话开篇:写点关于 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 方法。

声明

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

注册

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

使用

const { token } = ft.getNativeUserInfo()
2、Uniapp

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

原生注册关联对象

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

原生声明方法

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

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

}

uni 调用

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 注册关联对象信息。

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

原生声明关联原生对象

@interface testManager : UZModule

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

}

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

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

三、总结与思考

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