H5 商城 UI 业务包

更新时间:2023-09-28 08:43:58下载pdf

涂鸦 H5 商城 UI 业务包提供承载 App 商城 的 iOS 容器,让您的 IoT App 具备丰富的商城能力,让移动端流量通过商城变现。App 商城 是嵌入在 App 的全球电商平台,详情请访问 App 商城

接入组件

在工程的 Podfile 文件中添加商城业务包组件,并执行 pod update 命令。

source "https://github.com/tuya/tuya-pod-specs"
source 'https://cdn.cocoapods.org/'
platform :ios, '11.0'

target 'your_target_name' do
  # ThingSmart SDK
  pod "ThingSmartHomeKit"
  # 添加 H5 商城业务包
  pod 'ThingSmartMallBizBundle'
end

服务协议

提供服务

H5 商城 UI 业务包实现 ThingMallProtocol 协议以提供服务,在 ThingModuleServices 组件中查看 ThingMallProtocol.h 协议文件内容为:

#import <Foundation/Foundation.h>
#import "ThingMallInfo.h"

typedef NS_ENUM(NSUInteger, ThingMallPageType) {
    ThingMallPageTypeHome,      // Mall home page
    ThingMallPageTypeOrders,    // Mall orders page
};

typedef void(^ThingMallInfoCompletion)(ThingMallInfo * _Nullable mall, NSError * _Nullable error);

@protocol ThingMallProtocol <NSObject>


/**
 * Get the store jump link and switch information.
 * Only one successful request will be executed per app lifecycle, and thereafter the cached data will be returned.
 * Always use cache first.
 */
- (void)fetchMallInfoWithCompletion:(ThingMallInfoCompletion)completion;

/**
 * Request special mall page with `ThingMallPageType`
 * You should replace the mall page every time after the logged user has changed.
 * @param pageType Mall page type
 */
- (void)requestMallPage:(ThingMallPageType)pageType completionBlock:(void(^)(__kindof UIViewController *page, NSError *error))callback;

/**
 * Request special mall page with url
 * You should replace the mall page every time after the logged user has changed.
 * @param url Mall url
 */
- (void)requestMallPageWithUrl:(NSString *)url completionBlock:(void(^)(__kindof UIViewController *page, NSError *error))callback;

/**
 * After the successful call of the fetchMallInfoWithCompletion method, you can directly obtain the cached information.
 */
- (ThingMallInfo * _Nullable)cachedMallInfo;

/**
 * Mall view controller, maybe MiniApp Container, H5 Container
 */
- (UIViewController *)mallViewController;


#pragma mark deprecated

/**
 * Check if mall is enabled for currently logged user.
 * You should check this every time after logged user changed.
 */
- (void)checkIfMallEnableForCurrentUser:(void(^)(BOOL enable, NSError *error))callback __attribute__((deprecated("use fetchMallInfoWithCompletion: instead.")));

/**
 * Request special mall url with `ThingMallPageType`
 * @param pageType Mall page type
 */
- (void)requestMallUrlWithPage:(ThingMallPageType)pageType completionBlock:(void(^)(NSString *url, NSError *error))callback __attribute__((deprecated("use fetchMallInfoWithCompletion: instead.")));


@end

依赖服务

无。

使用指南

注意事项

  1. 调用任何接口之前,务必确认用户已登录。
  2. 获取商城页面之前,请提前确认用户所注册的服务区是否开通商城服务。商城与用户信息强相关。
  3. 登录用户发生变化时,务必重新判断商城可用状态并重新获取商城页面。
  4. 获取商城页面为 UIViewController,请使用 UINavigationController 进行 pushpresent 展示。
  5. 商城页面依赖导航控制器,且会设置导航栏内容。因此,需要导航控制器进行包装。

获取商城页面(UIViewController

目前提供以下两个页面:

  • 商城首页:ThingMallPageTypeHome
  • 商城订单页:ThingMallPageTypeOrders

接入时,您可以根据需要获取对应页面来展示。后续还需要重新 Push 新的页面,必须包装 NavigationController。否则,会导致后续页面无法跳转。

Objective-C 示例

#import <ThingSmartBizCore/ThingSmartBizCore.h>
#import <ThingModuleServices/ThingMallProtocol.h>

id<ThingMallProtocol> mallImpl = [[ThingSmartBizCore sharedInstance] serviceOfProtocol:@protocol(ThingMallProtocol)];
[impl requestMallPage:ThingMallPageTypeHome completionBlock:^(__kindof UIViewController *page, NSError *error) {
    UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:page];
    [self presentViewController:nav animated:YES completion:nil];
}];

Swift 示例

let mallImpl = ThingSmartBizCore.sharedInstance().service(of: ThingMallProtocol.self)
(mallImpl as? ThingMallProtocol)?.request(.home, completionBlock: { (mallVc, error) in
    if let e = error {
        print("\(e)")
        return
    }
    // push
    yourNaviController.pushViewController(mallVc!, animated: true)
    // present
    let naviVc = UINavigationController.init(rootViewController: mallVc!)
    yourViewController.present(naviVc, animated: true, completion: nil)
})

查询可用状态

Objective-C 示例

#import <ThingSmartBizCore/ThingSmartBizCore.h>
#import <ThingModuleServices/ThingMallProtocol.h>

id<ThingMallProtocol> mallImpl = [[ThingSmartBizCore sharedInstance] serviceOfProtocol:@protocol(ThingMallProtocol)];
[mallImpl fetchMallInfoWithCompletion:^(ThingMallInfo * _Nullable mall, NSError * _Nullable error) {
        if (error) {
            // 查询失败时返回 error
            NSLog(@"%@",error);
        } else {
            if (mall.enableMall) {
                // enable 为 true 则商城可用,否则不可用
                NSLog(@"%@",@(enable));
        } 
    }
}];

Swift 示例

let mallImpl = ThingSmartBizCore.sharedInstance().service(of: ThingMallProtocol.self) as? ThingMallProtocol
mallImpl?.fetchMallInfo(completion: { mallInfo, error in
    if let e = error {
        print("\(e)")
        return
    }
    if ((mallInfo?.enableMall()) != nil) {
                
    }
})

获取商城页面(PageUrl)

目前提供以下两个页面:

  • 商城首页:ThingMallPageTypeHome
  • 商城订单页:ThingMallPageTypeOrders

接入时,可以根据需要获取对应页面路由地址,然后根据 Url 获取 ViewController。获取到 Url 之后,您可以对部分参数进行调整。

Objective-C 示例

#import <ThingSmartBizCore/ThingSmartBizCore.h>
#import <ThingModuleServices/ThingMallProtocol.h>

id<ThingMallProtocol> mallImpl = [[ThingSmartBizCore sharedInstance] serviceOfProtocol:@protocol(ThingMallProtocol)];
[mallImpl fetchMallInfoWithCompletion:^(ThingMallInfo * _Nullable mall, NSError * _Nullable error) {
    f (error) {
            
    } else if (mall.mallURL) {
            
    }
}];

Swift 示例

let mallImpl = ThingSmartBizCore.sharedInstance().service(of: ThingMallProtocol.self) as? ThingMallProtocol
mallImpl?.fetchMallInfo(completion: { mallInfo, error in
    if let e = error {
        print("\(e)")
        return
    }
    if let url = mallInfo?.mallURL() {
             
    }
})

根据页面 Url 获取页面 ViewController

针对注册过域名白名单的服务,您可以通过此方法根据页面 Url 生成一个 ViewController

Objective-C 示例

#import <ThingSmartBizCore/ThingSmartBizCore.h>
#import <ThingModuleServices/ThingMallProtocol.h>

id<ThingMallProtocol> mallImpl = [[ThingSmartBizCore sharedInstance] serviceOfProtocol:@protocol(ThingMallProtocol)];
[impl requestMallPageWithUrl:@"https://mallpage/pagetext/target" completionBlock:^(__kindof UIViewController *page, NSError *error) {
		UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:page];
    [self presentViewController:nav animated:YES completion:nil];
}];

Swift 示例

let mallImpl = ThingSmartBizCore.sharedInstance().service(of: ThingMallProtocol.self)
(mallImpl as? ThingMallProtocol)?.requestMallPageWithUrl("https://mallpage/pagetext/target", completionBlock: { (mallVc, error) in
    if let e = error {
        print("\(e)")
        return
    }
    // push
    yourNaviController.pushViewController(mallVc!, animated: true)
    // present
    let naviVc = UINavigationController.init(rootViewController: mallVc!)
    yourViewController.present(naviVc, animated: true, completion: nil)
})

FQAs

判断是否展示商城为异步操作,加载 Tab 页面有延迟

A:用户登录成功后,即可调用 checkIfMallEnableForCurrentUser 来判断是否需要展示商城。回调完成后,即可重新加载 Tab 商城页面。异步的操作判断无法避免。

商城页面悬浮窗或者跳转到自定义页面,导航栏消失

  1. 商城 Tab 页 跳转到 自定义页面 时,设置如下:self.navigationController.navigationBarHidden = NO
  2. 自定义页面 返回到 商城 Tab 页 时,设置如下:self.navigationController.navigationBarHidden = YES

加载商城页面时,提示:“出现了一些问题”

  1. 检查测试机有没有更改系统时间。
  2. 检查 App 域名配置是否正确。

商城页面跳转失败

页面跳转默认采用 ‘self.navigationController Push’。商城服务获取到的是一个UIViewController,需要增加外部套一个UINavigationController 后,才可以添加到 UITabbarController

调整商城导航栏默认展示逻辑

  1. requestMallUrlWithPage 获取商城主页或订单页的页面地址。
  2. 修改 UrlParams 里面的参数:
    • _ty_hideNav=1:表示展示商城导航栏。
    • _ty_hideNav=0:表示不展示商城导航栏。