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

# 本地工程文件配置

# 1. iOS 工程配置

# 1.1 准备工程

# 1.2 配置工程

打开 FinClip Studio 导出的文件夹-ios-工程名-工程名.xcworkspace,双击打开

WechatIMG1686

# 1.2.1 App的基本配置

配置App的工程名,版本号,支持的Apple系统最低版本,支持的设备类型。 WechatIMG1673

# 1.2.2 App的icon和闪屏页

配置App的icon和闪屏页的图片(如果在 FinClip Studio 导出App的时候配置了可忽略,如果不配置的话,icon会是系统默认的白色图标,无闪屏页)。

WechatIMG1674

WechatIMG1675

WechatIMG1676

WechatIMG1677

# 1.2.3 App的权限

配置App的权限,根据所使用的功能,可自行配置要申请的权限,Api对应所使用的权限可参考我们的文档说明finclip权限描述

# 1.2.4 生成证书

  • iOS Development:iOS开发证书(用于真机调试测试)
  • iOS Distribution:iOS发布证书(用于上架App Store)

前提条件:

  1. 必须具备 Apple Developer Program 会员资格,才能申请、下载和使用 Apple 签发的签名证书。
  2. 安装了MacOS系统的苹果电脑
# 1.2.4.1 生成证书请求文件
  1. 打开“钥匙串访问”工具iOS10.png
  2. 打开菜单 “钥匙串访问”->“证书助理”,选择“从证书颁发机构请求证书...”:iOS11.png
  3. 打开创建请求证书页面,在页面中输入用户邮件地址、常用名称,选择存储到磁盘,点击 “继续” :iOS12.png
  4. 文件名称为 “CertificateSigningRequest.certSigningRequest”,选择保存位置,点击 “存储” 将证书请求文件保存到指定路径下,后面申请 开发(Development)证书 和 发布(Production)证书 时需要用到iOS13.png
  5. 在保存位置可看到 生成的请求证书(CertificateSigningRequest.certSigningRequest)。
# 1.2.4.2 登录苹果开发者账号
  1. 打开网站 苹果开发者后台 (opens new window)
  2. 使用苹果开发者账号登录Apple DeveloperiOS14.png
  3. 登录成功后在页面选择 “Certificates,IDs & Profiles” 进入证书管理页面iOS15.png
# 1.2.4.3 申请苹果 App ID (App的唯一标识)
  1. 选择页面的“Identifiers”可查看到已申请的所有 App 应用标识,点击页面上的加号来创建一个新的应用标识iOS16.png
  2. 选择标识类型为“App IDs”,然后点击 “Continue”iOS17.png
  3. 选择标识类型为“App”,然后点击 “Continue” iOS18.png
  4. 平台选择“iOS,tvOS,watchOS”,Bundle ID 选择“Explicit”,在 Description 中填写描述,然后填写 Bundle ID,Bundle ID 要和finclip后台申请的应用的Bundle id保持一致,否则打开小程序会失败,比如:“com.xxxxxxxxx.xxxx”,然后点击 “Continue”iOS19.pngiOS20.png
  5. 确认后选择提交,回到 identifiers 页面即可看到刚创建的App ID:
# 1.2.4.3 生成开发证书

开发(Development)证书 及 对应的描述文件用于开发阶段使用,可以直接将 App 安装到手机上,一个描述文件最多绑定100台测试设备(开发证书不能用于发布应用到 App Store)。

# 1.2.4.3.1 申请证书
  1. 在证书管理页面选择 “Certificates" 可查看到已申请的所有证书(TYPE:Development 为开发证书,Distribution为发布证书),点击页面的加号来创建一个新的证书:iOS21.png
  2. 在 “Software” 栏下选中 “iOS App Development” 然后点击 “Continue”:iOS22.png
  3. 用到刚刚生成的证书请求文件,点击“Choose File...”,选择刚刚保存到本地的 “CertificateSigningRequest.certSigningRequest”文件,点击 “Continue” 生成证书文件:iOS23.png
  4. 生成证书后选择 “Download” 将证书下到本地 (development.cer):iOS24.png
  5. 双击保存到本地的 development.cer 文件,会自动打开 “钥匙串访问” 工具说明导入证书成功,可以在证书列表中看到刚刚导入的证书,接下来需要导出 .p12 证书文件,选中导入的证书,右键选择 “导出xxxxxx”:
  6. 输入文件名、选择路径后点击 “存储”,输入密码及确认密码后点击 “好”:
  7. 至此,我们已经完成了开发证书的制作(得到了 xxx.p12 证书文件)。
# 1.2.4.3.2 添加调试设备

开发描述文件必须绑定调试设备,只有授权的设备才可以直接安装 App,所以在申请开发描述文件之前,先添加调试的设备,获取UUID的方式,点击链接获取设备的UDID (opens new window),扫描二维码,会提示安装一个描述文件,点击安装之后,就会在浏览器中显示出设备信息。长按复制"设备信息UDID"下面的值,就是UDID了。

  1. 在证书管理页面选择 “Devices”,可查看到已添加的所有设备信息,点击页面上的加号来添加一个新设备:iOS25.png
  2. 填写设备名称 和 UDID(设备标识):iOS26.png
# 1.2.4.3.3 申请开发 (Development) 描述文件
  1. 在证书管理页面选择 “Profiles”,可查看到已申请的所有描述文件,点击页面上的加号来添加一个新的描述文件:iOS27.png
  2. 在 “Development” 栏下选中 “iOS App Development”,点击“Continue”按钮:iOS28.png
  3. 这里要选择之前创建的 “App ID” ,点击“Continue”:iOS29.png
  4. 接下来选择需要绑定的证书,点击“Continue”:iOS30.png
  5. 选择授权调试设备,这里建议直接勾选 “Select All”,点击 “Continue”:iOS31.png
  6. 输入描述文件的名称(如“xxxxProfile”), 点击 “Generate” 生成描述文件:iOS32.png
  7. 点击“Download”下载保存开发描述文件(文件后缀为 .mobileprovision)iOS33.png
  8. 至此,我们已经得到了开发证书(.p12)及对应的描述文件(.mobileprovision)
# 1.2.4.4 生成发布 (Distribution)证书

发布 (Production) 证书用于正式发布环境下使用,用于提交到Appstore审核发布。发布证书打包的 ipa,不可以直接安装到手机上

# 1.2.4.4.1 申请发布 (Distribution)证书
  1. 在证书管理页面选择 “Certificates" 可查看到已申请的所有证书(TYPE:Development 为开发证书,Distribution为发布证书),点击页面的加号来创建一个新的证书:iOS21.png
  2. 在 “Software” 栏下选中 “iOS Distribution(App Store and Ad Hoc)”,点击 “Continue”:iOS34.png
  3. 接下来同样需要用到之前生成的证书请求文件,点击“Choose File...”选择刚刚保存到本地的 “CertificateSigningRequest.certSigningRequest”文件,点击 “Continue” 生成证书文件:iOS23.png
  4. 生成证书成功,选择“Download” 将证书下载到本地iOS35.png
  5. 同样双击保存到本地的 ios_production.cer 文件将证书导入到 “钥匙串访问”工具中,可以在证书列表中看到刚刚导入的证书,接下来需要导出 .p12 证书文件,选中导入的证书,右键选择 “导出
  6. 输入文件名、选择路径后点击 “存储”:
  7. 输入密码及确认密码后点击 “好”:
  8. 如果弹出需要登录钥匙串的密码,输入当前设备账户密码即可。
  9. 至此,我们已经完成了发布证书的制作(得到了 xxx.p12 证书文件),接下来,继续生成发布描述文件
# 1.2.4.4.2 申请发布 (Distribution) 描述文件
  1. 在证书管理页面选择 “Profiles”,可查看到已申请的所有描述文件,点击页面上的加号来添加一个新的描述文件:iOS27.png
  2. 在 “Distribution” 栏下选中 “App Store”,点击“Continue”按钮:iOS36.png
  3. 这里要选择之前创建的 “App ID”,点击“Continue”:iOS29.png
  4. 接下来选择需要绑定的发布证书(iOS Distribution),这里勾选刚刚生成的发布证书”,点击“Continue”:iOS37.png
  5. 接下来输入描述文件的名称(如“AppProfileDistribution”), 点击 “Generate” 生成描述文件:iOS38.png
  6. 然后点击 “Download” 将描述文件下载到本地(文件后缀为 .mobileprovision)iOS39.png
  7. 至此,我们已经得到了发布证书(.p12)及对应的发布描述文件(.mobileprovision)。

# 1.3 运行工程

打开 FinClip Studio 导出的文件夹-ios-工程名-工程名.xcworkspace,双击打开后,可选择用模拟运行或者真机运行。

模拟器运行直接选择一个模拟器后点击command+R运行就可以了。

WechatIMG1682

真机运行需要配置证书后点击command+R运行就可以。

WechatIMG1685

# 1.4 打包上传

# 1.4.1 本地使用Xcode构建ipa上传

在上述应用bundle id,Version,Build,AppIcon,闪屏页,权限,证书等都配置后就可以打包上传了,在Xcode顶部点击Product-Archive,等到导出ipa包或者使用Xcode直接把ipa包上传到App Store Connect。如果导出了ipa包需要使用Transporter工具上传。

iOS1 iOS2 iOS3

# 1.4.3 使用云打包构建和上传

在使用云编译功能构建ipa包时,生成app->查看云打包进展->构建成功后,可以下载构建的ipa文件,并使用Transporter工具上传,直接把生成的ipa文件拖到登录了开发者账号的Transporter工具即可。

11.png

# 2. Android 工程配置

# 2.1 准备工程

# 2.2 配置工程

使用Android Studio打开导出的Android工程:

Android-1

选择打开的路径为:finclip_demo\android\finclip_demo

Android-2

第一次打开工程可能耗时较长,需要等待Android Studio自动下载各Android库、依赖库。

# 2.2.1 app/build.gradle

Android-3

Android-4

# 2.2.2 app\src\main\AndroidManifest.xml

可以查看到app声明所需要的权限,可以根据需要自行删减或增加。

Android-5

# 2.2.3 闪屏页

闪屏页的配置图片,可以根据需要使用对应分辨率的图片进行替换。

注意,若要替换,需将所有分辨率对应的图片都进行替换。

Android-6

# 2.2.4 应用图标

应用图标文件,根据需要使用对应分辨率进行替换。

注意,若要替换,需将所有分辨率对应的图片都进行替换。

Android-7

# 2.3 运行工程

# 2.3.1 打开手机开发者模式

不同品牌手机打开的方式可能不同,大部分为在设备详情界面连续点击5次版本号。

然后进到开发者选项界面,打开USB调试。(若有USB安装,也要一并打开)

Android-8

使用usb将手机连接到电脑,手机上会弹出调试授权窗口,点击允许。

Android-9

# 2.3.2 运行应用

最后回到Android Studio,点击右上角的运行图标即可直接在手机上运行debug版本的应用。

Android-10

# 2.4 构建正式应用

# 2.4.1 Build -> Generate Signed Bundle/APK

Android-11

# 2.4.2 选择构建APK

Android-12

# 2.4.3 生成证书

可以使用AndroidStudio或JDK工具包生成证书,根据需要自行选择一种即可。

# 2.4.3.1 使用AndroidStudio生成证书

在2.4.2步骤中点击Next,来到以下界面,点击Create new:

Android-13

填写证书相关信息:

Android-14

注意,我们所需要生成的PKCS12密钥库暂不支持不同的别名密码以及证书密码(即以上截图的两组密码),因此请将这两组密码设置为相同,否则会收到错误警告。

填写完成后按OK按钮即可生成证书。

# 2.4.3.2 使用JDK工具包生成证书

根据您的操作系统,自行安装JDK环境。

请选择 OpenJDK8 或 OpenJDK11,否则可能导致构建失败。

通过其中的keytool工具生成证书,该工具位于您的JDK安装目录的bin目录下,如:D:\jdk-11\bin

以下为生成命令示例:

D:\jdk-11\bin\keytool -genkey -keyalg RSA -keysize 2048 -dname "cn=名字与姓氏,ou=组织单位名称,o=组织名称,l=城市或区域名称,st=州或省份名称,c=两字母国家代码" -alias 证书别名 -keypass 别名密码 -storepass 证书密码 -validity 36500 -keystore 证书文件路径及名字

其中的证书信息段cn=名字与姓氏,ou=组织单位名称,o=组织名称,l=城市或区域名称,st=州或省份名称,c=两字母国家代码请尽量至少填写一个,剩余的可以将值留空。

注意,我们所需要生成的PKCS12密钥库暂不支持不同的别名密码以及证书密码,因此请将这两个密码设置为相同,否则会收到keytool的错误警告。

以下为完整生成示例:

D:\jdk-11\bin\keytool -genkey -keyalg RSA -keysize 2048 -dname "cn=,ou=,o=finogeeks,l=,st=,c=" -alias finogeeks -keypass 123456 -storepass 123456 -validity 36500 -keystore D:\keystore.jks

注意

  • 生成后的证书文件请务必保管好,并牢记密码。

  • 若您无法安装AndroidStudio或JDK工具包,可以考虑使用其它第三方在线生成证书网站如香蕉云编 (opens new window)。我们不对以上第三方网站生成的证书提供安全保证。

# 2.4.4 构建应用

回到构建窗口,选择证书并填写密码。

Android-15

点击Next,选择指定生成的apk文件路径,选择release版本,最后点Finish,开始构建apk。

Android-16

待Android Studio提示构建成功之后,可以在上一步指定的位置找到apk文件。

Android-6

注意,点击Android Studio直接运行的debug应用使用的是默认的自带证书文件,与release应用不同,因此无法覆盖安装,需手动卸载debug应用后再安装release应用。

© FinClip with ❤ , Since 2017