FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# SDK 初始化

在使用小程序的API之前,需要先初始化小程序SDK。只有SDK初始化成功之后,才能使用SDK提供的API,否则 API调用都会失败。

# 1. 初始化

初始化SDK的API有两个,建议使用第二个(MopSDK.initSDK)

1、不推荐使用(后续不再维护)

/**
   * @description 
   * @param {Object} params 
   * @param {string} params.appkey 
   * @param {string} params.secret 
   * @param {string} params.apiServer 
   * @param {string} params.apiPrefix 
   * @param {string} params.userId 
   * @param {string} params.appletText  注入小程序统称appletText字符串,默认为“小程序”。
   * @param {number} params.language  SDK的语言类型,默认为中文,0:中文,1:英文,其他语言得使用 customLanguagePath、localeLanguage属性。具体看文档
   * @param {string} params.customLanguagePath  【iOS属性】自定义SDK的语言,优先级高于内置的 language 属性;示例:如果是放在 mainBundle 下,则设置相对路径:@"abc.lproj";如果是放在自定于 Bundle 下,则设置相对路径:@"bundleName.bundle/abc.lproj"
   * @param {string} params.localeLanguage 【Android属性】自定义SDK的语言,优先级高于内置的 language 属性;语言列表可以参考:https://uutool.cn/info-i18n/ 或者Java类 【java.util.Locale】;示例:简体中文:zh_CN,繁体中文:zh_TW,英文:en
   * @param {Object} param.nativeEventEmitter eventEmitter 实例
   * @param {Object} param.finMopSDK  nativeModules.FINMopSDK 引用
   * @returns 
   */
  MopSDK.initialize(params)

初始化示例:

import MopSDK from 'react-native-mopsdk';
import { NativeModules, NativeEventEmitter } from 'react-native';

const eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);
MopSDK.initialize(
      {
        appkey: 'xxxxxxx',
        secret: 'xxxxxxx',
        apiServer: 'xxxxxxx',
        userId: '123456',
        language: 0, // 默认为中文 ; 0:中文,1:英文
        customLanguagePath:"br.lproj",//【iOS属性】如果是放在 mainBundle 下,则设置相对路径:@"abc.lproj",如果是放在自定于 Bundle 下,则设置相对路径:@"bundleName.bundle/abc.lproj"
        appletText:"快应用", // 如果需要修改小程序公共UI里面的中文的:“小程序”,英文的“mini-app”;你需要设置属性:appletText
        localeLanguage:"ja_JP",// 【Android属性】自定义SDK的语言,优先级高于内置的 language 属性;语言列表可以参考:https://uutool.cn/info-i18n/ 或者Java类 【java.util.Locale】;示例:简体中文:zh_CN,繁体中文:zh_TW,英文:en
        nativeEventEmitter: eventEmitter,
        finMopSDK: NativeModules.FINMopSDK
      }
    ).then((res) => {
      console.log('message: ', res);
      const s = JSON.stringify(res);
      this.setState({
        status: 'native callback received',
        message: s,
      });
    }).catch((error) => {
      console.log('init error: ', error);
      const s = 'initialize fail'
      this.setState({
        status: 'native callback received',
        message: s,
      });
    })

2、推荐使用

/**
   * @description Initialize the SDK with the provided configuration
   * @param {Object} params
   * @param {Config} params.config - Main SDK configuration
   * @param {UIConfig} params.uiConfig - UI related configuration
   * @param {Object} params.finMopSDK 
   * @param {Object} params.nativeEventEmitter 
   * @returns 
   */
  MopSDK.initSDK(params)

初始化示例:

import { NativeModules, NativeEventEmitter } from 'react-native';
// 配置项比较很多,根据初始化对于方法上面的注释导入对应需要配置的类。
// 所有和配置相关类和常量为: BOOLState, ConfigPriority, LogLevel, LanguageType, FinStoreConfig, Config, CapsuleConfig, NavHomeConfig, FloatWindowConfig, AuthButtonConfig, AuthViewConfig, UIConfig ;
// 根据需求导入即可。

import MopSDK, { Config, FinStoreConfig,BOOLState, UIConfig } from 'react-native-mopsdk';

    const eventEmitter = new NativeEventEmitter(NativeModules.FINMopSDK);

    
    let finStoreConfigA = new FinStoreConfig(
      "xxxxxxxx",
      "xxxxxxxx",
      "xxxxxxxx");

    // 可配置多个服务器
    let finStoreConfigs = [finStoreConfigA];

    let config = new Config(finStoreConfigs,    
                            {userId:"123456789",
                             debug:true,
                             appletDebugMode:BOOLState.BOOLStateTrue
                            }) ;
    let uiConfig = new UIConfig({isHideClearCacheMenu:true});
    let params = {
      config: config,
      uiConfig: uiConfig,
      finMopSDK: NativeModules.FINMopSDK,
      nativeEventEmitter: eventEmitter
    }

    MopSDK.initSDK(params).then((res) => {
      console.log('message: ', res);
      const s = JSON.stringify(res);
      this.setState({
        status: 'native callback received',
        message: s,
      });
    }).catch((error) => {
      console.log('init error: ', error);
      const s = 'initialize fail'
      this.setState({
        status: 'native callback received',
        message: s,
      });
    })

# FinStoreConfig配置项

配置名称 类型 是否必填 说明
sdkKey string 创建应用时生成的sdkKey
sdkSecret string 创建应用时生成的sdkSecret
apiServer string 服务器地址,客户部署的后台地址
apmServer string apm事件上报的服务器地址,不设置时使用apiServer
cryptType string 网络接口加密类型。默认为"MD5",也可以设置为"SM"(国密)
fingerprint string SDK指纹,在证联环境时必须传,否则接口访问不通
encryptServerData boolean 默认为false。目前只能设置为false,设置为true会导致接口访问失败
enablePreloadFramework boolean 默认为true。是否预下载基础库,如果设置为false,则初始化SDK时不会预下载基础库

# 2. 配置项

初始化SDK时的配置项为ConfigUIConfig

  • Config中主要是与UI不相关的配置项;
  • UIConfig主要都是与UI相关的配置项。

# 2.1 Config中的配置项

配置名称 类型 配置描述
finStoreConfigs Array<FinStoreConfig> 要初始化的服务器配置对象列表,具体参数见FinStoreConfig
userId string 当前用户唯一标识,小程序缓存信息会以userId做隔离
productIdentification string 产品的标识,影响缓存根目录,以及userAgent中的标识
disableRequestPermissions boolean 是否禁止SDK触发权限申请,默认为false。如果设置为true,则SDK内使用权限的api,不会主动申请权限。
appletAutoAuthorize boolean 申请权限时是否会弹出对话框让用户确认,默认为false。如果设置为true,自动向SDK申请权限,不展示弹框
disableGetSuperviseInfo boolean 是否禁用SDK的监管接口API,默认为false,如果设置为true,则SDK禁用监管接口API(getSuperviseInfo)
appletIntervalUpdateLimit int 后台自动检查更新的小程序个数,取值范围:0~50。0代表不检查更新;不设置默认是3。
apmExtendInfo Map<string, string> apm 统计的扩展信息。Map类型
startCrashProtection boolean 是否开启Crash防崩溃,默认值为false(仅iOS支持)。UnrecognizedSelector、KVO、Notification、Timer、Container(数组越界,字典插入nil等)、String (越界、nil等)
enableApmDataCompression boolean apm数据上报时,是否压缩数据,默认值为false
encryptServerData boolean 平台接口返回的数据是否要加密,默认值为false。
appletDebugMode BOOLState 是否开启小程序的debug模式,即显示vConsole。
enableWatermark boolean 是否显示水印,默认值为false。
watermarkPriority ConfigPriority 显示水印优先级设置,默认全局配置优先
baseLoadingViewClass string 小程序的自定义loading视图的class类名,仅iOS支持
baseLoadFailedViewClass string 小程序的加载失败视图的class类名,仅iOS支持
header Map<string, string> 统一设置小程序中网络请求的header
headerPriority ConfigPriority header优先级设置,默认全局配置优先
enableH5AjaxHook boolean 是否开启小程序中加载的H5页面hook功能,默认为false。仅iOS支持,详情见api中的注释
h5AjaxHookRequestKey string 开启enableH5AjaxHook后,会hook request请求,可设置requestKey。仅iOS支持
pageCountLimit int 小程序中页面栈的最大限制。默认值为0,表示不限制。
schemes List<string> 自定义的scheme数组。 SDK内部默认支持微信、支付宝、 FinClip App 、tel这些scheme
debug boolean 设置debug模式,影响调试和日志。
maxRunningApplet int 设置最大同时运行的小程序个数。仅Android支持
webViewMixedContentMode int WebView mixed content mode。仅Android支持
bindAppletWithMainProcess boolean 小程序进程是否与主进程绑定,默认值为false。设置为true时,App被杀死,小程序同步关闭。仅Android支持
killAppletProcessNotice string App被杀后关闭小程序的提示文案。仅Android支持
enableScreenShot boolean 是否允许截屏录屏,默认为true。仅Android支持
screenShotPriority ConfigPriority 截屏录屏配置项的优先级,默认GLOBAL。仅Android支持
logLevel LogLevel 日志记录等级,默认为NONE。
logMaxAliveSec int 日志文件最长缓存时间,单位秒,默认为10天。
logDir string Log日志文件保存的目录。
enablePreNewProcess boolean 是否提前创建进程,默认为true。仅Android支持
language LanguageType SDK公共UI的语言类型,默认为中文
customLanguagePath string SDK公共UI自定义语言的相对路径,优先级高于 language 属性(仅 iOS 平台生效)
localeLanguage string 自定义SDK的语言,优先级高于内置的 language 属性(仅 android 平台生效),语言列表可以参考:https://uutool.cn/info-i18n/ 或者Java类 【java.util.Locale】。示例:简体中文:zh_CN,繁体中文:zh_TW,英文:en
useLocalTbsCore boolean 是否使用本地加载tbs内核,默认为false。仅Android支持
tbsCoreUrl string tbs内核的下载地址,不包含文件名。仅Android支持
enableJ2V8 boolean 是否开启j2v8,默认为false。仅Android支持
backgroundFetchPeriod int 周期性更新的时间间隔(小时), 设置为0不会发起周期性更新请求,接收设置范围为3-12小时

# 2.2 UIConfig中的配置项

配置名称 类型 配置描述
navigationTitleTextAttributes Map<string, any> 导航栏标题的样式,目前仅支持字体的配置。仅iOS支持
navigationBarHeight double 导航栏高度,默认为44。仅iOS支持
navigationBarTitleLightColor string 导航栏的标题Light颜色(系统深色主题下的颜色),默认值为白色 #ffffffff
navigationBarTitleDarkColor string 导航栏的标题Dark颜色(系统明亮主题下的颜色),默认值为黑色 #ff000000
navigationBarBackBtnLightColor string 导航栏的返回按钮Light颜色(系统深色主题下的颜色),默认值为白色
navigationBarBackBtnDarkColor string 导航栏的返回按钮Dark颜色(系统明亮主题下的颜色),默认值为黑色
moreMenuStyle int 弹出的菜单视图的样式 0:默认 1:Normal
isHideBackHomePriority ConfigPriority 隐藏导航栏返回首页按钮的优先级设置,默认全局配置优先。仅iOS支持
isAlwaysShowBackInDefaultNavigationBar boolean 当导航栏为默认导航栏时,是否始终显示返回按钮,默认值为false。仅Android支持
isClearNavigationBarNavButtonBackground boolean 是否清除导航栏导航按钮的背景,默认为false。仅Android支持
isHideFeedbackAndComplaints boolean 隐藏...弹出菜单中的 【反馈与投诉】 菜单,默认为false
isHideBackHome boolean 隐藏...弹出菜单中的 【返回首页】 菜单。默认为false
isHideForwardMenu boolean 隐藏...弹出菜单中的 【转发】 菜单,默认为false
isHideShareAppletMenu boolean 隐藏...弹出菜单中的 【分享】 菜单,默认为true
isHideAddToDesktopMenu boolean 隐藏...弹出菜单中的 【添加到桌面】 菜单,默认为true
isHideFavoriteMenu boolean 隐藏...弹出菜单中的 【收藏】 菜单,默认为true
isHideRefreshMenu boolean 隐藏...弹出菜单中的 【重新进入小程序】 菜单,默认为false
isHideSettingMenu boolean 隐藏...弹出菜单中的 【设置】 菜单,默认为false
capsuleConfig CapsuleConfig 右上角胶囊的样式配置,具体参数见CapsuleConfig
navHomeConfig NavHomeConfig 返回首页按钮的配置的样式配置,具体参数见NavHomeConfig
floatWindowConfig FloatWindowConfig 安卓浮窗样式配置,具体参数见FloatWindowConfig表。仅Android支持
authViewConfig AuthViewConfig 授权弹框样式配置,具体参数见AuthViewConfig表。
webViewProgressBarColor string 小程序里加载H5页面时进度条的颜色 格式 #FFFFFFFF
hideWebViewProgressBar boolean 隐藏小程序里加载H5时进度条,默认为false
autoAdaptDarkMode boolean 是否适配暗黑模式,默认值为false
appendingCustomUserAgent string 要拼接至userAgent中的内容。
transtionStyle TranstionStyle 打开小程序时的默认动画方式。默认为TranstionStyleUp。可设置如下场景:1. scheme 打开小程序;2. universal link 打开小程序;3. navigateToMiniprogram的动画方式。仅iOS支持
hideTransitionCloseButton boolean 是否小程序loading页的关闭按钮,默认为false。
disableSlideCloseAppletGesture boolean 是否禁用侧滑关闭小程序的手势,默认为false。
appletText string 默认为“小程序”,您需要替换展示的名称。比如设置为"轻应用",所有显示"小程序"的地方,都会变为"轻应用"
loadingLayoutCls string Loading页Class,仅Android支持
useNativeLiveComponent boolean 是否使用内置的live组件,默认为false。

# 2.3 CapsuleConfig(胶囊)中的配置项

配置名称 类型 配置描述
capsuleWidth double 胶囊的宽度
capsuleHeight double 胶囊的高度
capsuleRightMargin double 胶囊的右边框距离屏幕右边框的距离
capsuleCornerRadius double 胶囊的圆角半径
capsuleBorderWidth double 胶囊的边框宽度
capsuleBgLightColor string 胶囊的浅色背景颜色,在系统深色主题下使用,默认颜色 android:#33000000 ,iOS:#80ffffff
capsuleBgDarkColor string 胶囊的深色背景颜色,在系统明亮主题下使用,默认颜色 android:#80ffffff ,iOS:#33000000
capsuleBorderLightColor string 胶囊的浅色边框颜色,在系统深色主题下使用,默认颜色 #80ffffff
capsuleBorderDarkColor string 胶囊的深色边框颜色,在系统深色主题下使用,默认颜色 #26000000
capsuleDividerLightColor string 胶囊里浅色分割线颜色,在系统深色主题下使用,默认颜色 #80ffffff
capsuleDividerDarkColor string 胶囊里的深色分割线颜色,在系统深色主题下使用,默认颜色 #26000000
moreLightImage int 胶囊的浅色更多按钮图片,暂未支持
moreDarkImage int 胶囊的深色更多按钮图片,暂未支持
moreBtnWidth double 胶囊的更多按钮宽度,高度与宽度相等,android默认值为32;ios默认值为20
moreBtnLeftMargin double 更多按钮的左边距,android默认值为6;ios默认值为12
closeLightImage int 胶囊里的深色关闭按钮图片,暂未支持
closeDarkImage int 胶囊里的深色关闭按钮图片,暂未支持
closeBtnWidth double 胶囊里关闭按钮的宽度,android默认值为32;ios默认值为20
closeBtnLeftMargin double 胶囊里关闭按钮的左边距,android默认值为6;ios默认值为12

# 2.4 NavHomeConfig(返回首页按钮)中的配置项

配置名称 类型 配置描述
width double 返回首页按钮的宽度
height double 返回首页按钮的高度
leftMargin double 返回首页按钮的左侧距离屏幕左边框的距离,Android默认值为8,iOS默认值为10
cornerRadius double 返回首页按钮的圆角半径,默认值为5
borderWidth borderWidth 返回首页按钮的边框宽度,Android默认值为0.75,iOS默认值为0.8
borderLightColor string 返回首页按钮的浅色边框颜色,默认值 #80ffffff
borderDarkColor string 返回首页按钮的深色边框颜色,默认值 #26000000
bgLightColor string 返回首页按钮的浅色背景颜色,默认值 #33000000
bgDarkColor string 返回首页按钮的深色背景颜色,默认值 #80ffffff

# 2.5 AuthViewConfig(权限弹框)的配置项

配置名称 类型 配置描述
appletNameTextSize double 小程序名称字体大小,默认为16
appletNameLightColor string 小程序名称的浅色颜色(明亮模式),默认#ff222222
appletNameDarkColor string 小程序名称的深色颜色(暗黑模式),默认#ffd0d0d0
authorizeTitleTextSize double 权限标题字体大小,默认大小17
authorizeTitleLightColor string 权限标题的浅色颜色(明亮模式),默认#ff222222
authorizeTitleDarkColor string 权限标题的深色颜色(暗黑模式),默认#ffd0d0d0
authorizeDescriptionTextSize double 权限描述字体大小,默认大小14
authorizeDescriptionLightColor string 权限描述的浅色颜色(明亮模式),默认#ff666666
authorizeDescriptionDarkColor string 权限描述的深色颜色(暗黑模式),默认#ff5c5c5c
agreementTitleTextSize double 协议标题字体大小,默认大小16
agreementTitleLightColor string 协议标题的浅色颜色(明亮模式),默认#ff222222
agreementTitleDarkColor string 协议标题的深色颜色(暗黑模式),默认#ffd0d0d0
agreementDescriptionTextSize double 协议描述字体大小,默认大小14
agreementDescriptionLightColor string 协议描述的浅色颜色(明亮模式),默认#ff222222
agreementDescriptionDarkColor string 协议描述的深色颜色(暗黑模式),默认#ffd0d0d0
linkLightColor string 链接的浅色颜色(明亮模式),默认#ff4285f4
linkDarkColor string 链接的深色颜色(暗黑模式),默认#ff4285f4
allowButtonLightConfig AuthButtonConfig 同意按钮配置(明亮模式),详细配置见AuthButtonConfig
allowButtonDarkConfig AuthButtonConfig 同意按钮配置(深色模式),详细配置见AuthButtonConfig
rejectButtonLightConfig AuthButtonConfig 拒绝按钮配置(明亮模式),详细配置见AuthButtonConfig
rejectButtonDarkConfig AuthButtonConfig 拒绝按钮配置(深色模式),详细配置见AuthButtonConfig

# 2.6 AuthButtonConfig(权限弹框里的按钮)的配置项

配置名称 类型 配置描述
cornerRadius double 按钮的圆角半径
normalBackgroundColor string 按钮默认背景颜色
pressedBackgroundColor string 按钮按下背景颜色
normalTextColor string 按钮默认文字颜色
pressedTextColor string 按钮按下文字颜色
normalBorderColor string 按钮默认边框颜色
pressedBorderColor string 按钮按下边框颜色

我们的默认胶囊是这样:

那么,我们只需要这样设置,就可以变成圆角:

CapsuleConfig capsuleConfig = new CapsuleConfig({capsuleCornerRadius:16});
UIConfig uiconfig = new UIConfig({capsuleConfig:capsuleConfig});

效果如下:

© 2022 FinClip with ❤