H5 商城 UI 业务包

介绍

涂鸦 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
  # TuyaSmart SDK
  pod "TuyaSmartHomeKit"
  # 添加 H5 商城业务包
  pod 'TuyaSmartMallBizBundle'
end

服务协议

提供服务

H5 商城 UI 业务包实现 TYMallProtocol 协议以提供服务，在 TYModuleServices 组件中查看 TYMallProtocol.h 协议文件内容为：

#import <Foundation/Foundation.h>

typedef NS_ENUM(NSUInteger, TYMallPageType) {
    TYMallPageTypeHome,      // Mall home page
    TYMallPageTypeOrders,    // Mall orders page
};

@protocol TYMallProtocol <NSObject>

/**
 * Check if mall enable for current logged user.
 * You should check this every time after logged user changed.
 */
- (void)checkIfMallEnableForCurrentUser:(void(^)(BOOL enable, NSError *error))callback;

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

/**
 * Check if mall enable for Cloud
 */
- (void)getMallEnabledFromCloud:(void(^)(BOOL enable , NSString * url))callback;

/**
 * Request special mall url with `TYMallPageType`
 * @param pageType Mall page type
 */
- (void)requestMallUrlWithPage:(TYMallPageType)pageType completionBlock:(void(^)(NSString *url, NSError *error))callback;

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

@end

依赖服务

无。

使用指南

注意事项

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

查询可用状态

Objective-C 示例

#import <TuyaSmartBizCore/TuyaSmartBizCore.h>
#import <TYModuleServices/TYMallProtocol.h>

id<TYMallProtocol> mallImpl = [[TuyaSmartBizCore sharedInstance] serviceOfProtocol:@protocol(TYMallProtocol)];
[mallImpl checkIfMallEnableForCurrentUser:^(BOOL enable, NSError *error) {
  if (error) {
    // 查询失败时返回 error
    NSLog(@"%@",error);
  } else {
    // enable 为 true 则商城可用，否则不可用
    NSLog(@"%@",@(enable));
  }
}];

Swift 示例

let mallImpl = TuyaSmartBizCore.sharedInstance().service(of: TYMallProtocol.self)
(mallImpl as? TYMallProtocol)?.checkIfMallEnable(forCurrentUser: { (enable, error) in
    if let e = error {
        print("\(e)")
        return
    }
    print("\(enable)")
})

查询用户所注册的服务区是否开通商城服务

Objective-C 示例

#import <TuyaSmartBizCore/TuyaSmartBizCore.h>
#import <TYModuleServices/TYMallProtocol.h>

id<TYMallProtocol> mallImpl = [[TuyaSmartBizCore sharedInstance] serviceOfProtocol:@protocol(TYMallProtocol)];
[mallImpl getMallEnabledFromCloud:^(BOOL enable, NSString *url) {
  if (error) {
    // 查询失败时返回 error
    NSLog(@"%@",error);
  } else {
    // enable 为 true 则商城可用，否则不可用
    // Url为当前商城首页的页面地址
    NSLog(@"%@",url);
  }
}];

Swift 示例

let mallImpl = TuyaSmartBizCore.sharedInstance().service(of: TYMallProtocol.self)
(mallImpl as? TYMallProtourl)?.getMallEnabledFromCloud(forCurrentUser: { (enable, url) in
    if let e = error {
        print("\ 用户所注册的服务区未否开通商城服务")
        return
    }
    print("\(url)")
})

获取商城页面 (UIViewController)

目前提供以下两个页面：

• 商城首页：TYMallPageTypeHome
• 商城订单页：TYMallPageTypeOrders

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

Objective-C 示例

#import <TuyaSmartBizCore/TuyaSmartBizCore.h>
#import <TYModuleServices/TYMallProtocol.h>

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

Swift 示例

let mallImpl = TuyaSmartBizCore.sharedInstance().service(of: TYMallProtocol.self)
(mallImpl as? TYMallProtocol)?.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)
})

获取商城页面 (PageUrl)

目前提供以下两个页面：

• 商城首页 (TYMallPageTypeHome)
• 商城订单页 (TYMallPageTypeOrders)

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

Objective-C 示例

#import <TuyaSmartBizCore/TuyaSmartBizCore.h>
#import <TYModuleServices/TYMallProtocol.h>

id<TYMallProtocol> mallImpl = [[TuyaSmartBizCore sharedInstance] serviceOfProtocol:@protocol(TYMallProtocol)];
[impl requestMallUrlWithPage:TYMallPageTypeHome completionBlock:^(NSString *pageUrl, NSError *error) {
		// 页面Url
		
    UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:page];
    [self presentViewController:nav animated:YES completion:nil];
}];

Swift 示例

let mallImpl = TuyaSmartBizCore.sharedInstance().service(of: TYMallProtocol.self)
(mallImpl as? TYMallProtocol)?.requestMallUrlWithPage(.home, completionBlock: { (pageUrl, 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)
})

根据页面 Url 获取页面 ViewController

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

Objective-C 示例

#import <TuyaSmartBizCore/TuyaSmartBizCore.h>
#import <TYModuleServices/TYMallProtocol.h>

id<TYMallProtocol> mallImpl = [[TuyaSmartBizCore sharedInstance] serviceOfProtocol:@protocol(TYMallProtocol)];
[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 = TuyaSmartBizCore.sharedInstance().service(of: TYMallProtocol.self)
(mallImpl as? TYMallProtocol)?.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：表示不展示商城导航栏。