diff --git a/andorid.zip b/andorid.zip index 68abf1a..cc6511f 100644 Binary files a/andorid.zip and b/andorid.zip differ diff --git a/doc.md b/doc.md new file mode 100755 index 0000000..7091896 --- /dev/null +++ b/doc.md @@ -0,0 +1,487 @@ +# FinClip-Uniapp-demo + +#### 介绍 +FinClip SDK 凡泰Uniapp插件，利用Uniapp[插件功能](https://nativesupport.dcloud.net.cn/NativePlugin/course/android),集成FinClip SDK，实现打开小程序。 + +
+ + +
+ +#### 软件架构 +![Alt](./doc/images/架构.png) + +#### 使用说明 +（注本项目资源使用HBuilderX 3.6.4开发，只集成了FinClip 核心SDK （2.38.3）,如需要更多功能，可使用安卓/IOS原工程重新生成插件） + +##### 1. 引入已经生成好的插件 +![Alt](./doc/images/引入插件.png) +##### 2. 选择插件 +![Alt](./doc/images/选择插件01.png) +![Alt](./doc/images/选择插件02.png) + + ##### 3. 生成自定度基座方便项目调试 （以安卓为例，注意包名需要和获取 生成[SDK KEY 及 SDK SECRET](https://www.finclip.com/mop/document/introduce/accessGuide/enterprise-guidelines.html#_6-%E5%85%B3%E8%81%94%E7%A7%BB%E5%8A%A8%E5%BA%94%E7%94%A8)的包名一致） + +![Alt](./doc/images/制定自定义基座01.png) +![Alt](./doc/images/制定自定义基座02.png) +![Alt](./doc/images/制定自定义基座04.png) +![Alt](./doc/images/制定自定义基座03.png) + +##### 4. 在Uniapp项目中初始FinClip SDK + + 获取 [SDK KEY 及 SDK SECRET](https://www.finclip.com/mop/document/introduce/accessGuide/enterprise-guidelines.html#_6-%E5%85%B3%E8%81%94%E7%A7%BB%E5%8A%A8%E5%BA%94%E7%94%A8) + +```JavaScript + + const MopSdk = uni.requireNativePlugin('MopSdk'); + + export default { + onLaunch: function() { + MopSdk.initialize({ + 'sdkKey': '22LyZEib0gLTQdU3MUauAa2CctUv+NxTLFWyPxC28y2gA4x+JWh7hhNS5aO52BFs', + 'sdkSecret': '65146ffa924ecfdc', + 'apmServer': 'https://api.finclip.com' + }, + (ret) => { + console.log('App Launch Success', ret) + }, + (ret) =>{ + console.log('App Launch Fail', ret) + }); + } + } + +``` + +##### 5. 在Uniapp项目中打开小程序 + +```JavaScript + + + + + +``` +#### 插件API +##### 1、初始化API +```JavaScript +MopSdk.initialize({ + 'sdkKey': '22LyZEib0gLTQdU3MUauAa2CctUv+NxTLFWyPxC28y2gA4x+JWh7hhNS5aO52BFs', + 'sdkSecret': '65146ffa924ecfdc', + 'apmServer': 'https://api.finclip.com', + //'apiServer': 'https://api.finclip.com', + // 'apiPrefix': '/api/v1/mop/', + // 'cryptType': 'MD5', + // 'sdkFingerprint': '', + // 'encryptServerData': false, + // 'userId': '', + // 'customWebViewUserAgent': '', + // 'bindAppletWithMainProcess': false, + // 'maxRunningApplet': 5, + // 'apmExtension' + // 'enableAppletDebug' + // 'disablePermission': false, + // 'disableGetSuperviseInfo' + // 'disableRequestPermissions' + // 小程序界面UI + uiConfig: { + //是否隐藏小程序加载界面的关闭按钮 + hideTransitionCloseButton: true, + //屏蔽更多菜单中的“转发”按钮 + hideForwardMenu: false, + //屏蔽更多菜单中的“设置”按钮 + hideSettingMenu: false, + //屏蔽更多菜单中的“返回首页”按钮 + hideBackToHome: false, + //屏蔽更多菜单中的“反馈与投诉”按钮 + hideFeedbackMenu: false, + //SDK中“小程序”文案替换为任意其它名称 + //appletText: '小程序', + //胶囊按钮配置 + capsuleConfig: { + //右上角胶囊视图的宽度，默认值为88 + capsuleWidth: 88, + //右上角胶囊视图的高度，默认值为32 + capsuleHeight: 32, + //右上角胶囊视图的右边距 + capsuleRightMargin: 7, + //右上角胶囊视图的圆角半径，默认值为5 + capsuleCornerRadius: 16, + //右上角胶囊视图的边框宽度，默认值为0.8 + capsuleBorderWidth: 0.5, + //胶囊背景颜色浅色 + capsuleBgLightColor: '0x00000000', + //胶囊背景颜色深色 + capsuleBgDarkColor: '0x80ffffff', + //右上角胶囊视图的边框浅色颜色 + capsuleBorderLightColor: '0x80ffffff', + //右上角胶囊视图的边框深色颜色 + capsuleBorderDarkColor: '0x26000000', + // 胶囊分割线浅色颜色 + capsuleDividerLightColor: '0x26ffffff', + // 胶囊分割线深色颜色 + capsuleDividerDarkColor: '0x26000000', + // 胶囊里的更多按钮的宽度，高度与宽度相等 + moreBtnWidth: 32, + // 胶囊里的更多按钮的左边距 + moreBtnLeftMargin: 6, + // 胶囊里的关闭按钮的宽度，高度与宽度相等 + closeBtnWidth: 32, + // 胶囊里的关闭按钮的左边距 + closeBtnLeftMargin: 6, + //以下属性暂不支持，需原生工程调整 + //胶囊里的浅色更多按钮的图片对象，如果不传，会使用默认图标 + //moreLightImage + //胶囊里的深色更多按钮的图片对象，如果不传，会使用默认图标 + //moreDarkImage + //胶囊里的浅色更多按钮的图片对象，如果不传，会使用默认图标 + //closeLightImage + //胶囊里的深色更多按钮的图片对象，如果不传，会使用默认图标 + //closeDarkImage + }, + //导航栏的返回首页按钮UI定制方法 + // navHomeConfig: { + // //返回首页按钮宽度，默认44 + // width: 44, + // //返回首页按钮高度，默认32 + // height: 32, + // // 返回首页按钮的左边距，默认7 + // leftMargin: 7, + // //返回首页按钮边框圆角半径，默认5 + // cornerRadius: 5, + // //返回首页按钮边框宽度，默认1 + // borderWidth: 0.5, + // //返回首页按钮浅色边框颜色，默认0X80FFFFFF + // borderLightColor: '0x80ffffff', + // //返回首页按钮深色边框颜色，默认0X26000000 + // borderDarkColor: '0x26000000', + // //返回首页按钮浅色背景，默认0x33000000 + // bgLightColor: '0x33000000', + // //返回首页按钮深色背景，默认0x33000000 + // bgDarkColor: '0x80ffffff', + // //以下属性暂不支持，需要原生工程调整 + // //导航栏返回首页按钮浅色图标，如果不传，会使用默认图标 + // //lightImage + // //导航栏返回首页按钮浅色图标，如果不传，会使用默认图标 + // //darkImage + // }, + //浮窗设置窗口大小和位置，一般用于智能设备 如车载、手表、 + // floatWindowConfig: { + // floatMode: true, + // x: 0, + // y: 0, + // width: 0, + // height: 0, + // } + } + }, + (ret) => { + console.log('App Launch Success', ret) + }, + (ret) =>{ + console.log('App Launch Fail', ret) + }); +``` +##### 2、小程序生命周期 +```JavaScript +MopSdk.setAppletLifecycleCallback( + (ret) => { + console.log('onInitComplete', ret) + }, + (ret) => { + console.log('onFailure', ret) + }, + (ret) => { + console.log('onCreate', ret) + }, + (ret) => { + console.log('onStart', ret) + }, + (ret) => { + console.log('onResume', ret) + }, + (ret) => { + console.log('onPause', ret) + }, + (ret) => { + console.log('onStop', ret) + }, + (ret) => { + console.log('onDestroy', ret) + }) + +``` + +##### 3、监听右上角关闭小程序事件 +```JavaScript + MopSdk.setNavigationBarCloseButtonClicked((appId) => { + console.log('setNavigationBarCloseButtonClicked',appId) + }) + ``` + + ##### 4、设置小程序button的open-type获取用户信息，一般APP登录帐号后进行设置 +```JavaScript + MopSdk.setUserInfo({ + usesrname: '', + gener: '' + },(ret) => { + console.log('success', ret) + },(ret) => { + console.log('fail', ret) + }) + + ``` +##### 5、设置小程序button的open-type获取用户头像 +```JavaScript + const avatar = 'https://xxxx/log.png' + MopSdk.setChooseAvatar(avatar) + ``` + +##### 6、设置小程序button的open-type获取用户手机号 +```JavaScript + const phone = '134000000' + MopSdk.setPhoneNumber(phone) + ``` +##### 7、获取当前小程序appId信息 +```JavaScript + MopSdk.currentAppletId((res) => { + const appId = res.appId + }) +``` + +##### 8、获取当前小程序信息 +```JavaScript + MopSdk.currentApplet((appletInfo) => { + + }); +``` + +##### 9、打开小程序 +```JavaScript + const apiServer = 'https://api.finclip.com' + const appId = '5eec56a41464cc0001852e9a' + const startParams = null + // const startParams = { + // path: '/pages/index/index', + // query: 'a=1&b=2' + // } + const sequence = null // 小程序的上架序列号 + const isSingleton = false //安卓是否单任务栈 + MopSdk.openApplet({apiServer, + appId, + startParams, + sequence, + isSingleton + }, + (ret) => { + console.log('onSuccess',ret) + }, + (ret) => { + console.log('onFail',ret) + }, + (ret) => { + console.log('onProcess',ret) + }) + +``` +##### 10、二维码打开小程序 +```JavaScript +const qrcode = '' //二维码 +const isSingleton = false //安卓是否单任务栈 +MopSdk.openAppletByQrcode({qrcode, + isSingleton}, + (ret) => { + console.log('onSuccess',ret) + }, + (ret) => { + console.log('onFail',ret) + }, + (ret) => { + console.log('onProcess',ret) + }) +``` +##### 11、搜索小程序 +```JavaScript + + MopSdk.seachApplets({ + apiServer: '', + text: '' + }, + (ret)= > { + console.log('onSuccess',ret) + }, + (ret)= > { + console.log('onFail',ret) + }, + (ret)= > { + console.log('onProcess',ret) + }) +``` + +##### 12、关闭小程序事件,保留在内存中 +```JavaScript + MopSdk.closeApplet(appId); + ``` + +##### 13、关闭所有小程序事件,保留在内存中 +```JavaScript + MopSdk.closeApplets(); + ``` + +##### 14、结束小程序事件,从在内存中移除 +```JavaScript + MopSdk.finishRunningApplet(appId); + ``` + +##### 15、结束所有小程序事件,从在内存中移除 +```JavaScript + MopSdk.finishRunningApplets(); +``` + +##### 16、清除所有小程序缓存信息 +```JavaScript + MopSdk.clearApplets(); +``` + +##### 17、原生发送事件给小程序 +```JavaScript + MopSdk.sendCustomEvent(appId, { + + }); +``` + +##### 18、原生发送事件给所有小程序 +```JavaScript + MopSdk.sendCustomEventToAll({ + + }); +``` + +##### 19、注册自定义api +```JavaScript + MopSdk.registerExtensionApi( + // 自定义api名移 + apiName, + (ret) => { + console.log('onCallback',ret) + + //成功 + MopSdk.onSuccess(ret.uuid,ret) + + //失败 + //MopSdk.onFail(ret.uuid,ret) + } + ); +``` + +##### 20、注册web-view自定义api +```JavaScript + MopSdk.registerWebExtentionApi( + // 自定义api名移 + apiName, + (ret) => { + console.log('onCallback',ret) + + //成功 + MopSdk.onSuccess(ret.uuid,ret) + + //失败 + //MopSdk.onFail(ret.uuid,ret) + } + ); +``` +#### 插件拓展 + +##### 安卓插件拓展 + +请将工程内的andriod.zip进行解压，使用android studio打开解压后的安卓项目 +###### 1、安卓插件生成，可参考下图 +![Alt](./doc/images/安卓生成uni-app的插件01.jpg) + +###### 2、如需要拓展SDK的API，可可参考下图 +![Alt](./doc/images/安卓生成uni-app的插件03.png) + +###### 3、在调试插件中，如需更新FinClip SDK生成，可如下图引入新的SDK +![Alt](./doc/images/安卓生成uni-app的插件02.png) + +##### IOS插件拓展 +请将工程内的ios.zip进行解压，通过百度网盘下载工程SDK依整，SDK下载完成后请将其放置解压后的ios目录下图所示，然后使用xcode打开项目 +![Alt](./doc/images/IOS生成uni-app的插件00.png) + +SDK网盘下载地址： + 链接: https://pan.baidu.com/s/1j3vvTBG7r6rGTei4LQu6hw?pwd=FINC 提取码: FINC + +###### 1、IOS插件生成，可参考下图 +![Alt](./doc/images/IOS成uni-app的插件01.png) +![Alt](./doc/images/IOS生成uni-app的插件02.png) +![Alt](./doc/images/IOS生成uni-app的插件03.png) + +###### 2、如需要拓展SDK的API，可可参考下图 +![Alt](./doc/images/IOS生成uni-app的插件04.png) + +###### 3、在调试插件中，如需更新FinClip SDK生成，可如下图引入新的SDK,重新打开IOS项目 +![Alt](./doc/images/IOS生成uni-app的插件05.png) + +##### 存在问题 +1、能实现Uniapp界面打开小程序再打开Uniapp界面？ +答：存在页面栈问题，由于Uniapp使用的自己的页面栈，导致在小程序界面打开Uniapp的页面层级不同，解决方案是打开Uniapp界面时调用关闭小程序方法，效果不是很好，如果要返回小程序界面再打开，产品设计尽量避开这种设计。 + + + diff --git a/doc/images/IOS成uni-app的插件01.png b/doc/images/IOS成uni-app的插件01.png new file mode 100644 index 0000000..9cff738 Binary files /dev/null and b/doc/images/IOS成uni-app的插件01.png differ diff --git a/doc/images/IOS生成uni-app的插件00.png b/doc/images/IOS生成uni-app的插件00.png new file mode 100644 index 0000000..d009bae Binary files /dev/null and b/doc/images/IOS生成uni-app的插件00.png differ diff --git a/doc/images/IOS生成uni-app的插件02.png b/doc/images/IOS生成uni-app的插件02.png new file mode 100644 index 0000000..2e36808 Binary files /dev/null and b/doc/images/IOS生成uni-app的插件02.png differ diff --git a/doc/images/IOS生成uni-app的插件03.png b/doc/images/IOS生成uni-app的插件03.png new file mode 100644 index 0000000..4f75ee0 Binary files /dev/null and b/doc/images/IOS生成uni-app的插件03.png differ diff --git a/doc/images/IOS生成uni-app的插件04.png b/doc/images/IOS生成uni-app的插件04.png new file mode 100644 index 0000000..cdcb7e6 Binary files /dev/null and b/doc/images/IOS生成uni-app的插件04.png differ diff --git a/doc/images/IOS生成uni-app的插件05.png b/doc/images/IOS生成uni-app的插件05.png new file mode 100644 index 0000000..164f258 Binary files /dev/null and b/doc/images/IOS生成uni-app的插件05.png differ diff --git a/doc/images/制定自定义基座01.png b/doc/images/制定自定义基座01.png old mode 100755 new mode 100644 diff --git a/doc/images/制定自定义基座02.png b/doc/images/制定自定义基座02.png old mode 100755 new mode 100644 diff --git a/doc/images/制定自定义基座03.png b/doc/images/制定自定义基座03.png old mode 100755 new mode 100644 diff --git a/doc/images/制定自定义基座04.png b/doc/images/制定自定义基座04.png old mode 100755 new mode 100644 diff --git a/doc/images/安卓生成uni-app的插件01.jpg b/doc/images/安卓生成uni-app的插件01.jpg new file mode 100644 index 0000000..41b355f Binary files /dev/null and b/doc/images/安卓生成uni-app的插件01.jpg differ diff --git a/doc/images/安卓生成uni-app的插件02.png b/doc/images/安卓生成uni-app的插件02.png new file mode 100644 index 0000000..3ad576b Binary files /dev/null and b/doc/images/安卓生成uni-app的插件02.png differ diff --git a/doc/images/安卓生成uni-app的插件03.png b/doc/images/安卓生成uni-app的插件03.png new file mode 100644 index 0000000..b78950f Binary files /dev/null and b/doc/images/安卓生成uni-app的插件03.png differ diff --git a/doc/images/引入插件.png b/doc/images/引入插件.png old mode 100755 new mode 100644 index c0973dd..09a5b39 Binary files a/doc/images/引入插件.png and b/doc/images/引入插件.png differ diff --git a/doc/images/架构.png b/doc/images/架构.png old mode 100755 new mode 100644 diff --git a/doc/images/案例01.jpeg b/doc/images/案例01.jpeg old mode 100755 new mode 100644 diff --git a/doc/images/案例02.jpeg b/doc/images/案例02.jpeg old mode 100755 new mode 100644 diff --git a/doc/images/生成本地打包资源.png b/doc/images/生成本地打包资源.png old mode 100755 new mode 100644 diff --git a/doc/images/选择插件01.png b/doc/images/选择插件01.png old mode 100755 new mode 100644 index b8cc5c0..93bdbd6 Binary files a/doc/images/选择插件01.png and b/doc/images/选择插件01.png differ diff --git a/doc/images/选择插件02.png b/doc/images/选择插件02.png old mode 100755 new mode 100644 index a5d7ba2..6e64305 Binary files a/doc/images/选择插件02.png and b/doc/images/选择插件02.png differ diff --git a/finclip-uniapp-test/App.vue b/finclip-uniapp-test/App.vue index cb561bb..c9552a0 100644 --- a/finclip-uniapp-test/App.vue +++ b/finclip-uniapp-test/App.vue @@ -8,14 +8,64 @@ 'sdkKey': '22LyZEib0gLTQdU3MUauAa2CctUv+NxTLFWyPxC28y2gA4x+JWh7hhNS5aO52BFs', 'sdkSecret': '65146ffa924ecfdc', 'apmServer': 'https://api.finclip.com', - 'apiServer': 'https://api.finclip.com' + 'apiServer': 'https://api.finclip.com', + 'enableAppletDebug': true, + 'uiConfig': { + 'hideTechSupport': true + } }, (ret) => { console.log('App Launch Success', ret) }, (ret) =>{ console.log('App Launch Fail', ret) - }); + }) + //小程序关闭按钮事件 + MopSdk.setNavigationBarCloseButtonClicked((res) => { + console.log('小程序关闭按钮事件', res) + }) + //设置小程序button获取用户信息getUserInfo + MopSdk.setUserInfo({ + name: '测试', + sex: '男' + },(res) => { + console.log('设置小程序用户信息成功', JSON.stringify(res)) + },(res) => { + console.log('设置小程序用户信息失败', JSON.stringify(res)) + }) + //设置小程序button获取用户头像信息chooseavatar + MopSdk.setChooseAvatar('https://dddd.com/12121.jpg') + //设置小程序button获取用户手机信息getPhoneNumber + MopSdk.setGetPhoneNumber('13800000000') + + //自定义小程序API + MopSdk.registerExtensionApi('getJWToken', (res) => { + + //回调值 + MopSdk.onSuccess(res.uuid, { + jwToken : 'jwToken' + }) + }) + MopSdk.registerExtensionApi('getJWToken2', (res) => { + //回调值 + MopSdk.onSuccess(res.uuid, { + jwToken2 : 'jwToken2' + }) + }) + //自定义小程序webview API + MopSdk.registerWebExtentionApi('getJWToken', (res) => { + + //回调值 + MopSdk.onSuccess(res.uuid, { + jwToken : 'webview===>jwToken' + }) + }) + MopSdk.registerWebExtentionApi('getJWToken2', (res) => { + //回调值 + MopSdk.onSuccess(res.uuid, { + jwToken2 : 'webview===>jwToken2' + }) + }) }, onShow: function() { //console.log('App Show') diff --git a/finclip-uniapp-test/manifest.json b/finclip-uniapp-test/manifest.json index 80cf7ed..3d71d72 100644 --- a/finclip-uniapp-test/manifest.json +++ b/finclip-uniapp-test/manifest.json @@ -44,16 +44,8 @@ "ios" : { "dSYMs" : false }, - /* SDK配置 */ "sdkConfigs" : { - "ad" : {}, - "share" : { - "weixin" : { - "appid" : "wxc90f49f097184bc6", - "UniversalLinks" : "" - } - }, - "payment" : {} + "ad" : {} } }, "nativePlugins" : { diff --git a/finclip-uniapp-test/nativeplugins/MopSdk/android/uniplugins_mopsdk-2.38.3.aar b/finclip-uniapp-test/nativeplugins/MopSdk/android/uniplugins_mopsdk-2.38.3.aar index 43e1028..d04790d 100644 Binary files a/finclip-uniapp-test/nativeplugins/MopSdk/android/uniplugins_mopsdk-2.38.3.aar and b/finclip-uniapp-test/nativeplugins/MopSdk/android/uniplugins_mopsdk-2.38.3.aar differ diff --git a/finclip-uniapp-test/nativeplugins/MopSdk/ios/Uniplugins_MopSdk.framework/Uniplugins_MopSdk b/finclip-uniapp-test/nativeplugins/MopSdk/ios/Uniplugins_MopSdk.framework/Uniplugins_MopSdk index cf20fc0..28a876c 100644 Binary files a/finclip-uniapp-test/nativeplugins/MopSdk/ios/Uniplugins_MopSdk.framework/Uniplugins_MopSdk and b/finclip-uniapp-test/nativeplugins/MopSdk/ios/Uniplugins_MopSdk.framework/Uniplugins_MopSdk differ diff --git a/finclip-uniapp-test/pages/index/index.vue b/finclip-uniapp-test/pages/index/index.vue index da1449d..64e27f8 100644 --- a/finclip-uniapp-test/pages/index/index.vue +++ b/finclip-uniapp-test/pages/index/index.vue @@ -4,6 +4,16 @@ + + + + + + + + + + @@ -16,7 +26,6 @@ } }, onLoad() { - }, methods: { handleOpenMiniProgram() { @@ -28,7 +37,7 @@ // query: 'a=1&b=2' // } const sequence = null // 小程序的上架序列号 - const isSingleton = false + const isSingleton = false //安卓单任栈（） MopSdk.openApplet({apiServer, appId, startParams, @@ -52,8 +61,37 @@ console.log('onProcess',ret) }) } + }) + }, + handleFinishMiniProgram(){ + MopSdk.finishRunningApplet('62566cbd3eb8ce0001b7761c') + }, + handleFinishAllMiniProgram(){ + MopSdk.finishAllRunningApplets() + }, + handleSendMessageToMiniProgram(){ + MopSdk.currentAppletId((res) => { + console.log('当前小程序appId:',res.currentAppletId) + // MopSdk.sendCustomEvent(res.currentAppletId,{ + // message: 'this is test' + // }) + MopSdk.sendCustomEventToAll({ + message: 'this is test' + }) + }) + }, + handleGetMiniProgramInfo() { + MopSdk.currentApplet((res) => { + console.log('当前小程序信息',res) + }) + }, + handleSearchMiniProgram() { + MopSdk.seachApplets({ + apiServer: 'https://api.finclip.com', + text: '测试' + },(res) => { + console.log('搜索小程序结果',res) }) - } } } diff --git a/ios.zip b/ios.zip index a6d0493..8b887f4 100644 Binary files a/ios.zip and b/ios.zip differ