fix: 修复部分api无效

master
yangbin 2022-11-04 22:26:55 +08:00
parent e8181fe897
commit 7dac9fc23e
28 changed files with 581 additions and 14 deletions

Binary file not shown.

487
doc.md 100755
View File

@ -0,0 +1,487 @@
# FinClip-Uniapp-demo
#### 介绍
FinClip SDK 凡泰Uniapp插件利用Uniapp[插件功能](https://nativesupport.dcloud.net.cn/NativePlugin/course/android),集成FinClip SDK实现打开小程序。
<figure class="half">
<img src="./doc/images/案例01.jpeg" width="150" />
<img src="./doc/images/案例02.jpeg" width="150" />
</figure >
#### 软件架构
![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
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<button type="primary" v-on:click="handleOpenMiniProgram">打开小程序</button>
<view class="padding-gap"></view>
<button type="primary" v-on:click="handleOpenMiniProgramByQrcode">二维码打开小程序</button>
</view>
</template>
<script>
const MopSdk = uni.requireNativePlugin('MopSdk');
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
handleOpenMiniProgram() {
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})
},
handleOpenMiniProgramByQrcode() {
uni.scanCode({
success: (result) => {
console.log(result)
const qrCode = result.result //二维码信息
const isSingleton = false //安卓启动单任栈
MopSdk.openAppletByQrcode({qrCode,isSingleton},
(ret) => {
console.log('onSuccess',ret)
},
(ret) => {
console.log('onFail',ret)
},
(ret) => {
console.log('onProcess',ret)
})
}
})
}
}
}
</script>
```
#### 插件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界面时调用关闭小程序方法效果不是很好如果要返回小程序界面再打开产品设计尽量避开这种设计。

Binary file not shown.

After

Width:  |  Height:  |  Size: 809 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 881 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 819 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

View File

Before

Width:  |  Height:  |  Size: 624 KiB

After

Width:  |  Height:  |  Size: 624 KiB

View File

Before

Width:  |  Height:  |  Size: 699 KiB

After

Width:  |  Height:  |  Size: 699 KiB

View File

Before

Width:  |  Height:  |  Size: 833 KiB

After

Width:  |  Height:  |  Size: 833 KiB

View File

Before

Width:  |  Height:  |  Size: 794 KiB

After

Width:  |  Height:  |  Size: 794 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 848 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 621 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 665 KiB

BIN
doc/images/引入插件.png 100755 → 100644

Binary file not shown.

Before

Width:  |  Height:  |  Size: 328 KiB

After

Width:  |  Height:  |  Size: 513 KiB

0
doc/images/架构.png 100755 → 100644
View File

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

0
doc/images/案例01.jpeg 100755 → 100644
View File

Before

Width:  |  Height:  |  Size: 162 KiB

After

Width:  |  Height:  |  Size: 162 KiB

0
doc/images/案例02.jpeg 100755 → 100644
View File

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 89 KiB

View File

Before

Width:  |  Height:  |  Size: 906 KiB

After

Width:  |  Height:  |  Size: 906 KiB

BIN
doc/images/选择插件01.png 100755 → 100644

Binary file not shown.

Before

Width:  |  Height:  |  Size: 415 KiB

After

Width:  |  Height:  |  Size: 501 KiB

BIN
doc/images/选择插件02.png 100755 → 100644

Binary file not shown.

Before

Width:  |  Height:  |  Size: 495 KiB

After

Width:  |  Height:  |  Size: 495 KiB

View File

@ -8,14 +8,64 @@
'sdkKey': '22LyZEib0gLTQdU3MUauAa2CctUv+NxTLFWyPxC28y2gA4x+JWh7hhNS5aO52BFs', 'sdkKey': '22LyZEib0gLTQdU3MUauAa2CctUv+NxTLFWyPxC28y2gA4x+JWh7hhNS5aO52BFs',
'sdkSecret': '65146ffa924ecfdc', 'sdkSecret': '65146ffa924ecfdc',
'apmServer': 'https://api.finclip.com', 'apmServer': 'https://api.finclip.com',
'apiServer': 'https://api.finclip.com' 'apiServer': 'https://api.finclip.com',
'enableAppletDebug': true,
'uiConfig': {
'hideTechSupport': true
}
}, },
(ret) => { (ret) => {
console.log('App Launch Success', ret) console.log('App Launch Success', ret)
}, },
(ret) =>{ (ret) =>{
console.log('App Launch Fail', ret) console.log('App Launch Fail', ret)
}); })
//
MopSdk.setNavigationBarCloseButtonClicked((res) => {
console.log('小程序关闭按钮事件', res)
})
//buttongetUserInfo
MopSdk.setUserInfo({
name: '测试',
sex: '男'
},(res) => {
console.log('设置小程序用户信息成功', JSON.stringify(res))
},(res) => {
console.log('设置小程序用户信息失败', JSON.stringify(res))
})
//buttonchooseavatar
MopSdk.setChooseAvatar('https://dddd.com/12121.jpg')
//buttongetPhoneNumber
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() { onShow: function() {
//console.log('App Show') //console.log('App Show')

View File

@ -44,16 +44,8 @@
"ios" : { "ios" : {
"dSYMs" : false "dSYMs" : false
}, },
/* SDK */
"sdkConfigs" : { "sdkConfigs" : {
"ad" : {}, "ad" : {}
"share" : {
"weixin" : {
"appid" : "wxc90f49f097184bc6",
"UniversalLinks" : ""
}
},
"payment" : {}
} }
}, },
"nativePlugins" : { "nativePlugins" : {

View File

@ -4,6 +4,16 @@
<button type="primary" v-on:click="handleOpenMiniProgram">打开小程序</button> <button type="primary" v-on:click="handleOpenMiniProgram">打开小程序</button>
<view class="padding-gap"></view> <view class="padding-gap"></view>
<button type="primary" v-on:click="handleOpenMiniProgramByQrcode">二维码打开小程序</button> <button type="primary" v-on:click="handleOpenMiniProgramByQrcode">二维码打开小程序</button>
<view class="padding-gap"></view>
<button type="primary" v-on:click="handleFinishMiniProgram">结束小程序</button>
<view class="padding-gap"></view>
<button type="primary" v-on:click="handleFinishAllMiniProgram">结束所有小程序</button>
<view class="padding-gap"></view>
<button type="primary" v-on:click="handleSendMessageToMiniProgram">发送信息小程序</button>
<view class="padding-gap"></view>
<button type="primary" v-on:click="handleGetMiniProgramInfo">获前小程序信息</button>
<view class="padding-gap"></view>
<button type="primary" v-on:click="handleSearchMiniProgram">搜索小程序</button>
</view> </view>
</template> </template>
@ -16,7 +26,6 @@
} }
}, },
onLoad() { onLoad() {
}, },
methods: { methods: {
handleOpenMiniProgram() { handleOpenMiniProgram() {
@ -28,7 +37,7 @@
// query: 'a=1&b=2' // query: 'a=1&b=2'
// } // }
const sequence = null // const sequence = null //
const isSingleton = false const isSingleton = false //
MopSdk.openApplet({apiServer, MopSdk.openApplet({apiServer,
appId, appId,
startParams, startParams,
@ -52,8 +61,37 @@
console.log('onProcess',ret) 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)
}) })
} }
} }
} }

BIN
ios.zip

Binary file not shown.