# 设置加载页 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) {
}
})