FinClip小程序容器常见技术问题汇总（三）

1. 打开vsconsole的方法

app.json文件加入配置项"debug": true

2. 自定义组件json文件

为保证自定义组件正常渲染，组件json文件需声明"component": true

3. 导航栏配置navigationStyle

该属性在小程序中可以设置三个值： default/custom/hide

• default：默认样式
• custom：隐藏导航栏
• hide：隐藏胶囊

4. 暂不支持的用户登录等接口

• ft.checkSession
• ft.getAccountInfoSync
• UserInfo
• ft.authorize

5. wxss引用base64格式图片失败

没有遵循 base64标准，如：'data:'后有多余空格

6. 如何将H5工程转为小程序

即：在小程序中嵌入H5页面方法

6.1 小程序实现：

使用web-view组件，在src属性中写入H5页面url即可

<web-view src="www.baidu.com"></web-view>

也可以使用数据绑定方式

<web-view :src="{
  {webViewUrl}}"></web-view>

6.2 在本地磁盘中找到对应项目，将项目文件压缩为zip包

6.3 上传小程序代码包

在【开发设置-代码包管理】中，上传该代码包

6.4 完成域名配置

在【开发设置-域名管理】中，完成对应域名请求设置

6.5 通过 FinClip APP 或已集成SDK的APP查看小程序

7. transitionend 事件

目前不支持 transitionend 事件，请开发者注意避免使用。

8. FinClip小程序可以在支付宝或字节的开发工具上开发么？

可以。

但目前FinClip与微信小程序兼容最佳，基于微信开发的小程序可在FinClip平台中完成一键上传、直接使用，运行效果与微信基本无异。

如果开发者是在支付宝或字节上直接开发的原生小程序，可参考：

• 使用支付宝或字节提供的工具，将小程序直接转换成微信小程序后，再将转换后的代码包上传FinClip，此时即可直接使用；
• 开发者亦可自行手动替换，即：将文件后缀及API命名空间替换为 ‘ft.xxx’ ；
• 如果开发者在小程序开发时，使用了支持多平台的第三方小程序框架，此类框架在FinClip上也可直接运行。

当前，FinClip兼容性较好的第三方框架包括：

• 小程序开发框架

Taro
kbone
uni-app （仅支持通过 uni-app 生成的小程序）

• UI 框架

Vant
iView
WeUI组件库

除以上所述，如小程序中使用了某些平台的定制API，亦将导致小程序上传FinClip后，功能无法正常运行。此类定制API主要为支付、登录等与原生App业务息息相关的接口。

开发者在上传代码包时，应提前处理。

9. FinClip小程序中如何对接微信登录？FinClip小程序如何接入APP的授权登录？

通常来说，真正意义的微信小程序授权登录只能在微信的APP中进行，是指由微信APP授权给微信小程序；而FinClip小程序的授权登录则是通过集成了SDK的第三方APP进行授权（因为一般APP自己就具有账号体系）。

所以，即使第三方APP支持通过微信账号体系进行登录，然后再授权给FinClip小程序进行登录，也不能算真正意义的微信授权登录，本质上是第三方APP对FinClip小程序的授权登录。

综上，如果想实现APP对FinClip小程序的授权登录，具体可参考如下步骤：

9.1 APP接入微信登录

若您需要实现APP的微信账号授权登录，请参考微信开放平台的移动应用开发 (opens new window)和微信授权登录开发文档 (opens new window)进行实现，若不需要则直接从第2步开始即可；​

9.2 APP实现自定义注入接口

首先，APP需要参考iOS SDK自定义注入接口和Android SDK自定义注入接口两份文档，将账号的授权登录能力注入至SDK中，让小程序能调用。详细说明如下：​

Android端

为了让小程序能够获取到小程序以外的APP数据，需要注册小程序自定义接口，自定义小程序接口具体说明请参照FinClip小程序开放平台-自定义小程序接口、FinClip小程序开放平台-在小程序进程中注册api。

1、自定义login接口

自定义Api类，指定api名称为“login”；

 public class LoginApi extends AbsApi {
   
    
    private final static String API_NAME_LOGIN = "login"; // 小程序基础库调用的api名称

    @Override
    public String[] apis() {
   
        return new String[]{
   API_NAME_LOGIN};
    }
    }

2、注册自定义Api；

示例展示了用户授权提示Dialog，需要Activity对象作为Dialog的context参数， 所以需要在小程进程注册自定义Api。

if (FinAppClient.INSTANCE.isFinAppProcess(this)) {
   
      // 小程序进程
      // 小程序进程中注册api的方法能获取到小程序所在activity对象，可以用做创建对话框的context参数）
      FinAppProcessClient.INSTANCE.setCallback(new FinAppProcessClient.Callback() {
   
          @Override
          public List<IApi> getRegisterExtensionApis(@NotNull Activity activity) {
   
              ArrayList<IApi> apis = new ArrayList<>();
              apis.add(new LoginApi());
              return apis;
          }

          @Nullable
          @Override
          public List<IApi> getRegisterExtensionWebApis(@NotNull Activity activity) {
   
              return null;
          }
      });
      return;
  }

3、实现自定义Api invoke()方法；
先展示授权提示Dialog（开发者请根据需求决定是否展示授权提示Dialog）， 然后再从主进程（App进程）获取用户登录信息。

public class LoginApi extends AbsApi {
   

    @Override
    public void invoke(String event, JSONObject param, ICallback callback) {
   
        if (event.equals(API_NAME_LOGIN)) {
   
            showAuthDialog(callback);
        }
    }

    /**
     * 显示获取用户登录信息的授权提示对话框
     */
    private void showAuthDialog(final ICallback callback) {
   
        // 是否需要显示授权提示对话框请开发者按照产品需求自行处理
        new AlertDialog.Builder(activity)
                .setTitle("是否同意授权获取用户登录信息？")
                .setNegativeButton("拒绝", new DialogInterface.OnClickListener() {
   
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
   
                        callback.onFail();
                    }
                })
                .setPositiveButton("同意", new DialogInterface.OnClickListener() {
   
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
   
                        loginMainProcess(callback);
                    }
                })
                .