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

# 设置加载页 UI

# 1. 效果展示

FinClip 小程序 SDK支持对加载页、错误页进行个性化配置。其中:

  • 加载页是指:当启动小程序时,如果小程序未下载到设备,小程序容器会启动加载页提示用户等待,待小程序安装到设备上,加载页关闭并跳转至小程序。用户首次打开小程序、或小程序版本更新后,加载页停留时间会相对较长
  • 错误页是指:小程序加载失败、或产生其他未知错误时,展示给用户的页面

具体UI效果可参考下图:

# 2. 覆盖范围

该设置由App实现,可配置加载页、错误页的视图,一经设置,App内的全部小程序均将按照本效果实现。

# 3. iOS 设置方法

# 3.1 实现自定义加载页

对于 iOS 小程序,SDK 支持开发者自定义加载页内容,您可按照以下步骤进行配置: 1.在继承自FATBaseLoadingView的子类中修改加载页的样式。

代码示例如下:

@interface LoadingView : FATBaseLoadingView
@end
@implementation LoadingView
- (instancetype)initWithFrame:(CGRect)frame {
    if ([super initWithFrame:frame]) {
        self.loadingView.padding = 20;
        self.loadingView.dotView.backgroundColor = [UIColor blackColor];
        self.loadingView.animation.duration = 5;
        self.titleLabel.textColor = [UIColor redColor];
    }
    return self;
}
- (void)layoutSubviews
{
    [super layoutSubviews];
    
    // 如果要改logo,必须在这里修改。
    // 修改小程序logo应该是从管理后台上传新的小程序图标,因为更多面板、关于页面也会展示小程序logo,只改这里只是loding页面生效
    self.loadingView.iconImageView.image = [UIImage imageNamed:@"mini_logo"];
}
@end

注意

因为小程序在加载过程中可能会更新加载页的背景色、小程序标题、小程序图标和各控件的frame,所以对这些属性的修改需要放在layoutSubviews内。 小程序的标题和图标建议通过开放平台修改。

2.将FATConfig对象的baseLoadingViewClass属性设置自定义加载页的类名。

FATConfig *config = [FATConfig configWithStoreConfigs:storeConfigs];
config.baseLoadingViewClass = @"LoadingView";
[[FATClient sharedClient] initWithConfig:config error:nil];

# 3.2 实现自定义加载失败页

实现方式与自定义加载页类似,具体步骤如下: 1.在继承自FATBaseLoadFailedView的子类中修改加载失败页的样式。

@interface LoadFailedView : FATBaseLoadFailedView
@end
@implementation LoadFailedView
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.errorLabel.textColor = [UIColor redColor];
    }
    return self;
}
- (void)layoutSubviews {
    [super layoutSubviews];
    CGFloat bottom = self.fat_height;
    self.errorImageView.fat_bottom = bottom - 110;
    self.errorLabel.fat_top = self.errorImageView.fat_bottom + 30;
    self.detailLabel.fat_top = self.errorLabel.fat_bottom + 15;
}
@end

2.将FATConfig对象的baseLoadingViewClass属性设置自定义加载失败页的类名。

FATConfig *config = [FATConfig configWithStoreConfigs:storeConfigs];
config.baseLoadFailedViewClass = @"LoadFailedView";
[[FATClient sharedClient] initWithConfig:config error:nil];

# 4. Android 设置方法

SDK提供了抽象类IFinAppletLoadingPage,开发者可继承该类,实现自己的加载页视图和失败页视图,并在初始化SDK时配置实现类。

# 4.1 IFinAppletLoadingPage 抽象方法说明

/**
 * 小程序加载中的布局ID
 */
abstract fun getLoadingLayoutRes(): Int

/**
 * 小程序加载失败的布局ID
 */
abstract fun getFailureLayoutRes(): Int

/**
 * 小程序加载失败回调
 *
 * @param msg   错误信息
 */
@Deprecated("自2.36.3版本之后不再回调,请使用 onLoadingFailure(title: String, msg: String)")
abstract fun onLoadingFailure(msg: String)

/**
 * 小程序加载失败回调
 *
 * @param title 错误标题
 * @param msg   错误信息
 */
abstract fun onLoadingFailure(title: String, msg: String)

/**
 * 更新小程序相关信息,参数为小程序基本信息,会多次回调,
 * 初次回调时可能为空(如小程序初次启动,基本信息还未下载),
 * 需开发者自行进行判空。
 *
 * @param appTitle      app名字
 * @param appAvatarUrl  app图标链接
 */
abstract fun onUpdate(appTitle: String, appAvatarUrl: String)

该类提供两个布局实例:

  • failureLayout

    对应 getFailureLayoutRes 方法返回的错误页布局文件layout

  • loadingLayout

    对应 getLoadingLayoutRes 方法返回的加载页布局文件layout

# 4.2 自定义加载页完整实现示例

注意

由于SDK内部使用了反射技术将实现类进行实例化,因此加载页实现类必须包含仅有Context作为参数的构造函数。

示例如下:

class CustomLoadingPage constructor(context: Context) : IFinAppletLoadingPage(context) {

    override fun getFailureLayoutRes(): Int {
        // 错误页布局资源文件
        return R.layout.layout_applet_failure
    }

    override fun getLoadingLayoutRes(): Int {
        // 加载页布局资源文件
        return R.layout.layout_applet_loading
    }

    override fun onLoadingFailure(msg: String) {
        // 该方法已废弃,请使用下面的 onLoadingFailure(title: String, msg: String)
    }
    
    override fun onLoadingFailure(title: String, msg: String) {
        // 错误页错误消息正文
        failureLayout.findViewById<TextView>(R.id.tvLoadingFailedTitle).text = title
        failureLayout.findViewById<TextView>(R.id.tvLoadingFailedMsg).text = msg
    }

    override fun onUpdate(appTitle: String, appAvatarUrl: String) {
        // 加载页小程序名字
        loadingLayout.findViewById<TextView>(R.id.tvTitle).text = appTitle
        // 加载页小程序图标
        ImageLoader.get(context).load(appAvatarUrl, object : DrawableCallback {
            override fun onLoadFailure() {

            }

            override fun onLoadSuccess(r: Drawable) {
                loadingLayout.findViewById<RoundedImageView>(R.id.ivAvatar).setImageDrawable(r)
            }
        })
    }
}

# 4.3 在SDK初始化时配置加载页

val uiConfig = FinAppConfig.UIConfig()
// 配置自定义加载页
uiConfig.setLoadingLayoutCls(CustomLoadingPage::class.java)

val config = FinAppConfig.Builder()
        // 其它配置项省略
        .setUiConfig(uiConfig)
        .build()

FinAppClient.init(application, config, object : FinCallback<Any?> {
    override fun onSuccess(result: Any?) {

    }

    override fun onError(code: Int, error: String) {

    }

    override fun onProgress(status: Int, error: String) {
    }
})
© 2022 FinClip with ❤

👋🏻 嘿,你好!

「FinClip」是一套基于云原生框架设计的小程序容器。能够让任何移动应用在集成小程序SDK之后,获得可用、安全的小程序运行能力。

>> 点我免费注册体验

查看产品文档
了解与 FinClip 相关的一切信息

产品博客 👈  了解产品更新与核心功能介绍
资源下载 👈  获取小程序 SDK 与开发工具
文档中心 👈  查询 FinClip 小程序开发指南与答疑

商务咨询热线
预约 FinClip 产品介绍,咨询商务报价或私有化部署事宜

0755-86967467

获取产品帮助
联系 FinClip 技术顾问,获取产品资料或加入开发者社群

联系线上
人工客服

或 👉  点击这里,提交咨询工单