如何把小程序游戏运行到自有App中？（IOS篇）

Posted 2023-04-02 finogeeks

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何把小程序游戏运行到自有App中？（IOS篇）相关的知识，希望对你有一定的参考价值。

千呼万唤始出来！FinClip 终于支持小游戏了。

我们团队算是 FinClip 的老用户了，年初就向官方提出了希望 FinClip 支持微信小游戏的建议。随着前段时间 “羊了个羊” 微信小游戏的爆火，官方也把小游戏支持提上了日程，近期官方开启了公测通道。我们用周末用小游戏进行了测试，记录分享一下测试情况。

第一步：获取凭据（ SDK KEY 及 SDK SECRET）

首先，集成 SDK 需要先在 FinClip 平台中创建应用并绑定小程序游戏应用，获得每个应用专属的 SDK KEY 及 SDK SECRET 后，随后就可以在集成 SDK 时填写对应的参数。打开小程序时 SDK 会自动初始化，并校验 SDK KEY，SDK SECRET 与 BundleID (Application ID) 是否正确，这一步正确了才能初始化成功并正常使用。

1.1 创建小程序游戏

需要登录 FinClip 管理后台「应用管理 - 新增合作应用」，完成小游戏应用创建；

1.2 获取 SDK KEY 及 SDK SECRET

创建应用并添加 Bundle ID 后，选择对应 Bundle ID 后的「复制」，就可以导出对应的 SDK KEY 与 SDK SECRET 了。

SDK KEY：是合作应用能使用小程序 SDK 的凭证，如果 SDK Key 校验失败，则 SDK 的所有 Api 都无法使用。
SDK SECERT：是访问服务的安全证书。

第二步：集成 SDK

FinClip 小程序 SDK 目前支持 pod 集成或者手动集成，此次测试我们用的是 pod 集成。

2.1.1 安装 pod 环境

Cocoapods 提供了一个非常简单的依赖管理系统，避免手动导入产生的错误，非常方便。官方安装指南（英文） (opens new window) 或 CocoaPods 安装教程（中文） (opens new window)。

sudo gem install cocoapods
pod setup

2.1.2 创建 Podfile 文件

如果你不需要使用扩展 SDK，那么在 podfile 中只依赖 FinApplet 即可。如果你需要使用扩展 SDK 中的 API，那么你还需要依赖 FinAppletExt。比如：如果需要在小程序中使用蓝牙功能，可以在 podfile 中添加 FinAppletBLE 依赖；

集具体操作方法可以去详细查看官方的的文档。iOS 如何引入一个 SDK

2.1.3 安装或更新依赖

然后，执行 pod update 或者 pod install 即可。

2.1.4 打开工程

执行完 pod update 或者 pod install ，打开工程目录，找到 xxx.xcworkspace 文件，双击打开即可。

三、添加 SDK 头文件

在需要使用 FinClip 小程序 SDK 的地方，添加如下代码：

#import <FinApplet/FinApplet.h>

如果还集成了扩展 SDK，那么调用扩展 SDK 中的 api，还需要加上下面的代码：

#import <FinAppletExt/FinAppletExt.h>

当然，最方便的方式是在 pch 文件中添加以上代码，这样在使用的地方就不用再引用了。

四、初始化 SDK

在工程的 AppDelegate 中的以下方法中，调用 SDK 的初始化方法。

NSMutableArray *storeArrayM = [NSMutableArray array];
FATStoreConfig *storeConfig = [[FATStoreConfig alloc] init];
storeConfig.sdkKey = @"您的sdkKey信息";
storeConfig.sdkSecret = @"您的sdkSecret信息";
storeConfig.apiServer = @"服务器域名";
storeConfig.apmServer = @"apm统计事件的域名";
[storeArrayM addObject:storeConfig];
    
FATStoreConfig *storeConfig2 = [[FATStoreConfig alloc] init];
storeConfig2.sdkKey = @"您的sdkKey信息";
storeConfig2.sdkSecret = @"您的sdkSecret信息";
storeConfig2.apiServer = @"服务器域名";
storeConfig2.apmServer = @"apm统计事件的域名";
storeConfig2.cryptType = FATApiCryptTypeSM;
[storeArrayM addObject:storeConfig2];
 
FATConfig *config = [FATConfig configWithStoreConfigs:storeArrayM];
[[FATClient sharedClient] initWithConfig:config error:nil];

本次测试需要使用微信的登录，获取用户信息等能力，因此需要进行初始化注册组件。

// 微信扩展SDL初始化
[FATWXExtComponent registerComponent:@"微信appid" universalLink:@"universalLink"];

并在 AppDelegate.m 中增加下面的代码。

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options 
    /*  微信登录和分享    */
    if ([WXApi handleOpenURL:url delegate:[FATWXApiManager sharedManager]]) 
        return YES;
    
    return YES;

 
// ios 9.0 之前
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
    /*  微信登录和分享    */
    // `WeChatHandleURLDelegate ` 为 `WXApiDelegate`代理文件
    if ([WXApi handleOpenURL:url delegate:[FATWXApiManager sharedManager]]) 
        return YES;
    
    return YES;

 
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
    /*  微信登录和分享    */
    if ([WXApi handleOpenURL:url delegate:[FATWXApiManager sharedManager]]) 
        return YES;
    
    return YES;

 
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler 
  return [WXApi handleOpenUniversalLink:userActivity delegate:[FATWXApiManager sharedManager]];

五、handleOpenURL 处理

一般来说小游戏都需要支持外部通过链接打开，便于分享。则需要做如下处理。

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation

    if ([[FATClient sharedClient] handleOpenURL:url]) 
        return YES;
    
    return YES;

 
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options

    if ([[FATClient sharedClient] handleOpenURL:url]) 
        return YES;
    
    return YES;

六、打开小程序

FATAppletRequest *request = [[FATAppletRequest alloc] init];
request.appletId = @"小游戏id";
request.apiServer = @"服务器地址";
request.transitionStyle = FATTranstionStyleUp;
request.startParams = startParams;
     
[[FATClient sharedClient] startAppletWithRequest:request InParentViewController:self completion:^(BOOL result, FATError *error) 
    NSLog(@"打开小游戏:%@", error);
 closeCompletion:^
    NSLog(@"关闭小游戏");
];

打开效果如下：

本次测试使用的是官方给到的 demo，整体流程跑下来是比较顺利的，没有遇到特别卡壳的地方，目前官方正在做内测，感兴趣的朋友都可以去官方平台看看。小游戏开发指南

接下来，安卓系统我们打算使用自己的小游戏再跑一次流程，届时再给大家做分享。

Hbuilder用自有证书打包 ios App上架AppStore流程

最近在用Hbuilder做跨平台开发，经过一番研究终于在苹果商店上架成功了一款产品！这款产品就很简单，直接用hbuilder打包好，然后上传到商店即可。这里参照ios app提交应用商店这篇文章结合hbuilder，从应用打包，到提交到苹果商店的流程详细介绍一下，希望对有需要的哥哥姐姐们有帮助、

一、打包：

应用写好了之后就可以打包了，hbuilder云打包很简单，但是你想要发布到应用商店的话是需要自有证书的，

添加图片注释，不超过 140 字（可选）

选择“使用苹果证书”

1。前期工作

这里就需要用到 AppId，描述文件profile，以及私钥证书。下面详细讲解这三项的申请步骤

必须条件：苹果开发者账号，mac系统

苹果开发者账号：我是直接用公司额账号，所以省去了申请账号的步骤，访问苹果开发者中心https://developer.apple.com/account/overview.action注册或者登录账号，

添加图片注释，不超过 140 字（可选）

登录界面

1.1创建appId

登录进去之后,找到Identifiers

添加图片注释，不超过 140 字（可选）

点击appId

下一步点加号，对点加号

添加图片注释，不超过 140 字（可选）

然后会跳出一个界面，有两个表单是要自己填写的，分别是Name和Bundle Id

添加图片注释，不超过 140 字（可选）

App Name

上面这段话翻译过来就是：App ID字符串包含两个部分，以句点（.）分隔 - 应用ID前缀（默认情况下定义为您的Team ID）和App ID后缀（定义为Bundle ID搜索字符串）。 App ID的每个部分都有不同的重要用途

这边Name就可以随便填，没有什么限制，最好是项目名称，这样方便自己辨识（不允许中文）；

另外一个就是Bundle Id

添加图片注释，不超过 140 字（可选）

Bundle Id

这是你appid的后缀，这个需要仔细。因为这个内容和你的程序直接相关，后面很多地方要用到，最好是com.yourcompany.yourappname的格式，我用的是项目中的Bundle ID（反正这样是最保险的）

还有几个App server，建议就选择一下推送Push Notifications，至于为什么我也不太清楚，选上肯定没错..

添加图片注释，不超过 140 字（可选）

App server

下面就是一路点击过去continue，registe，done，最后注册成功的id是这样的

添加图片注释，不超过 140 字（可选）

成功啦

1.2申请证书

这里呢需要一个mac系统的电脑，如果有苹果机那最好了，没有也没关系，可以用虚拟机安装一个呀。

这里抛一个虚拟机装mac系统的链接：从0到100安装，虚拟机装mac；

如果遇到报错，可以参照下面链接，找不到安装磁盘看这里：请选择要插入的磁盘；不可恢复错误报错看这里：不可恢复错误: (vcpu-0) ；锁定文件失败，打不开磁盘或快照所依赖的磁盘的解决方案：方案；

好了，现在我们有了苹果电脑，可以进行正式的申请工作了。

1.1.1 请求文件CertificateSigningRequest.certSigningRequest

在实用工具找到-钥匙串访问（KEY CHAIN）,在证书助理中，选择"从证书颁发机构求证书"，如下图：

添加图片注释，不超过 140 字（可选）

在下图所示的界面，你的电子邮件地址：填你申请idp的电子邮件地址，常用名称，默认就好，CA空，选择存贮到磁盘，点击"继续"：

添加图片注释，不超过 140 字（可选）

选择保存的位置，比如选择桌面。下一步点击完成，你就可以看到你的桌面多了一个CertificateSigningRequest.certSigningRequest的证书请求文件。

注：CSR文件尽量每个证书都制作一次，将常用名称区分开来，因为该常用名称是证书中的密钥的名字。

1.1.2 制作描述文件Provisioning Profile

登陆到开发者中心，找到证书配置的版块，选择点击右上角的加号：

添加图片注释，不超过 140 字（可选）

发布证书和开发者证书需要操作两次，分别创建，开发者证书用于真机调试，发布证书用于提交到AppStore。注意这两个文件的区分。

添加图片注释，不超过 140 字（可选）

然后下一步，会提示上传CSR文件，也就是证书签名请求文件。前面申请的那个CertificateSigningRequest.certSigningRequest，

添加图片注释，不超过 140 字（可选）

提交上去后就会生成一个cer证书，如图所示，有效期为一年。

添加图片注释，不超过 140 字（可选）

下载下来是这样的，如图：

添加图片注释，不超过 140 字（可选）

做到这一步还不够，我们最终的目标是一个后缀名是.mobileprovision的证书。

所以继续

找到Provisioning Profiles，然后点加号添加

添加图片注释，不超过 140 字（可选）

按照需要选择证书类别，开发者证书或者提交应用商店的证书，然后continue就会出现让你选择AppId的界面。选择你刚创建的AppId

添加图片注释，不超过 140 字（可选）

选好了点继续，然后会让你选一个certificates，这个大概就是开发者许可证书，就是那个后缀cer的，就选你刚创建的那个。

添加图片注释，不超过 140 字（可选）

然后下一步填描述文件的名字，这个就因人而异没什么限制

添加图片注释，不超过 140 字（可选）

填好名字就可以有一个描述文件了，下载即可，后缀名是.mobileprovision，下载下来就可以用。

添加图片注释，不超过 140 字（可选）

1.1.3 私钥证书

这个是非常重要的证书，

这个呢，就是把之前下载的ios_distribution2.cer，或者(ios_development.cer)，

添加图片注释，不超过 140 字（可选）

然后双击添加文件到钥匙串

添加图片注释，不超过 140 字（可选）

点击添加，既可以在钥匙串中看到啦

添加图片注释，不超过 140 字（可选）

下一步就是导出.p12后缀的证书，右键你要打包的文件，然后点导出

添加图片注释，不超过 140 字（可选）

存储的时候回提示你设一个密码，在hbuilder打包的时候也会有一个私钥密码，就是在这里设置的，

添加图片注释，不超过 140 字（可选）

好了该填的都填好了，导出的文件就会出现在你的文稿里边

添加图片注释，不超过 140 字（可选）

做到这一步，准备工作就做好了。下面就是利用hbuilder进行打包，选择使用自有证书，选择生成的对应文件，然后打包生成.ipa的文件。

二、上架

打包好了ipa文件就可以通过xcode上架了，我电脑装的是最新的mac系统，macOS sierra。为什么要强调这一点呢？因为最新的苹果系统要上架应用，就必须下载最新的xcode。要不然会报错的

添加图片注释，不超过 140 字（可选）

2.1 在itunes中创建程序

登录ios开发者中心，找到并选择Itunes Connect（在account点进去登录后就能看到，或者在页面底部的Distribute下），选择我的app

添加图片注释，不超过 140 字（可选）

点击左上角的+选择“新建App”，根据自己的app然后填写相应的信息即可，因为项目较多，就不一一讲解了，但是其中的注意事项会写到：

添加图片注释，不超过 140 字（可选）

（1）选择语言的时候，简体中文是Simplified Chinese，不要再找Chinese了，找不到的~

（2）套装ID与SKU主要是app的唯一标识吧，我是用的项目中Bundle Identifier的内容，即com.company.projectname

2.1.1 图片上传尺寸要求：

（1）另外屏幕截图一定要按照尺寸哦，那边会有提示尺寸是多少，可以只上传一组5.5寸屏幕的，然后其他的都勾选用5.5寸显示即可。

（2）上传logo的尺寸也有要求，必须是1024*1024，而且不能有圆角

2.2 构建版本

添加图片注释，不超过 140 字（可选）

这个构建版本就是上架一开始提到的，如果你是最新版本的系统就一定要下载最新的xcode

打开xcode，选择开发工具里边的Application Loader。

添加图片注释，不超过 140 字（可选）

打开之后，双击交付应用，把打包好的.ipa文件上传上去

添加图片注释，不超过 140 字（可选）

成功之后，过个30分钟左右吧，就会在构建版本那边出现一个加号，然后就可以把需要上架的软件添加上去。

另外，审核信息的填写要按照标准

添加图片注释，不超过 140 字（可选）

至于演示账号，我在提交的时候没有填写，不过还是建议填写一下，据说不填可能被拒。

都差不多了就可以保存，提交审核了，审核成功就可以在应用商店下载喽~

添加图片注释，不超过 140 字（可选）

The end

版本更新：

版本更新如果直接按照前面的步骤进行会报错

所以这边要做一些修改在mainfest.json里边修改版本号，这个按照自己需要填写

以上是关于如何把小程序游戏运行到自有App中？（IOS篇）的主要内容，如果未能解决你的问题，请参考以下文章

ios企业包可以跳转小程序吗

小程序取消IOS虚拟支付解决方案

Hbuilder用自有证书打包 ios App上架AppStore流程

如何将智能设备关联至云开发中的项目？

把git上微信小程序项目拉到本地运行