跨端三剑客

近几年来，随着移动端开发的需求的不断变大，跨端框架也在不断的蓬勃发展，随之时间的推移，有三个跨端框架凭借其各自的优势，出现在大家的眼前Uniapp、Flutter、React Native。

其中uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等关键指标上拥有更强的优势.

这里盘点下已经支持小程序的超级 App：

微信、企业微信、QQ、支付宝、高德地图、手机淘宝、百度、百度贴吧、百度地图、今日头条、抖音……

前置知识

软件方面：这里推荐所有uniapp的跨端开发都使用HBuilderX进行开发，这里推荐不是因为webstorm、vscode怎么样不好，而是因为HBuilderX对uniapp的语法及vue相关的提示更为的方便，且更轻量。

知识准备：熟悉vue的相关语法。了解小程序的路由的配置方法。熟悉各自的生命周期等知识。这对于跨端开发的知识准备简直不能再简单。

APP开发过程中注意事项

了解编译条件

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

示例，如下代码仅在 App 下出现:

熟悉相关功能的配置(manifest.json)
(1).APP图标配置

建议使用1024X1024的图片，然后进行一键生成所有尺寸的图标。

基础配置
基础配置虽然读起来很基础，但却是APP的重要信息配置包括APP的名称、应用版本名称、版本号。这里的版本名称在我们进行版本升级时一定是要递增的，这里版本名称在IOS打测试版本时可以只增加版本号的数字

启动页
App启动时，因为应用自动需要一定时间，为了避免用户等待白屏，手机OS提供了特殊的启动界面设计，让用户先看到一个简单的界面，然后该界面消失，正式进入应用。

这个界面，即被称为启动界面，也成称为 splash 或 lauch screen。

启动界面原本是一个静态png图片方式。随着移动设备屏幕的多样化，为了让每种屏幕启动时界面都不变形，开发者需要为越来越多的屏幕尺寸制作不同的图片。

这带来很多问题，包括制作复杂、app包体积增大等。

于是Android发明了.9.png方式、iOS发明了storyboard方式，来解决多屏幕尺寸适配问题。

苹果公司的政策更为强硬，从2020年6月30日起，不再接受使用图片作为启动界面，必须使用storyboard，否则无法提交Appstore。

DCloud的App，支持所有Android和iOS的启动界面方式。

APP模块配置
这里主要配置APP中需要调用的地图、支付、推送、视频的功能配置。如key、appid等之类的填写需要各位到对应平台进行生成配置；

插件、其它配置
插件配置及其它配置没有特殊需求可以使用默认配置；不必进行变更；

APP打包
uniapp的打包操作其实十分傻瓜式；一般我们在开发的工程中需要移动端调试会打一个自定义基座，以便开发的调试等工作，唯一需要解决的就是证书文件的获取方式;下面就安卓和IOS的配置文件获取予以介绍;

安卓:

我们需要一个安卓证书，我们来生成一下安卓证书,Android平台打包发布apk应用，需要使用数字证书（.keystore文件）进行签名，用于表明开发者身份。

Android证书的生成是自助和免费的，不需要审批或付费。

可以使用JRE环境中的keytool命令生成。以下是windows平台生成证书的方法：

安装JRE环境（推荐使用JRE8环境，如已有可跳过）
可从Oracle官方下载jre安装包：https://www.oracle.com/technetwork/java/javase/downloads/index.html
下面以Windows平台，jre安装目录为“C:\Program Files\Java\jre1.8.0_201”为例，实际操作时请修改为自己安装目录
建议将JRE安装路径添加到系统环境变量，已配置可跳过此章节
打开命令行（cmd），输入以下命令：

复制代码d: set PATH=%PATH%;“C:\Program Files\Java\jre1.8.0_201\bin”

第一行：切换工作目录到D:路径
第二行：将jre命令添加到临时环境变量中
keytool -genkey -alias 别名 -keyalg RSA -keysize 2048 -validity 36500 -keystore 证书名称.keystore

testalias是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字
test.keystore是证书文件名称，可修改为自己想设置的文件名称，也可以指定完整文件路径
36500是证书的有效期，表示100年有效期，单位天，建议时间设置长一点，避免证书过期
2.

Enter keystore password:  //输入证书文件密码，输入完成回车  

Re-enter new password:   //再次输入证书文件密码，输入完成回车  

What is your first and last name?  

  [Unknown]:  //输入名字和姓氏，输入完成回车  

What is the name of your organizational unit?  

  [Unknown]:  //输入组织单位名称，输入完成回车  

What is the name of your organization?  

  [Unknown]:  //输入组织名称，输入完成回车  

What is the name of your City or Locality?  

  [Unknown]:  //输入城市或区域名称，输入完成回车  

What is the name of your State or Province?  

  [Unknown]:  //输入省/市/自治区名称，输入完成回车  

What is the two-letter country code for this unit?  

  [Unknown]:  //输入国家/地区代号（两个字母），中国为CN，输入完成回车  

Is CN=XX, OU=XX, O=XX, L=XX, ST=XX, C=XX correct?  

  [no]:  //确认上面输入的内容是否正确，输入y，回车  

Enter key password for <testalias>  

        (RETURN if same as keystore password):  //确认证书密码与证书文件密码一样（HBuilder|HBuilderX要求这两个密码一致），直接回车就可以

查看证书信息
在一些支付/地图配置时需要用到MD5 SHA1等指纹信息

可以使用以下命令查看:

keytool -list -v -keystore test.keystore  

Enter keystore password: //输入密码，回车

会输出以下格式信息：

Keystore type: PKCS12    

Keystore provider: SUN    

Your keystore contains 1 entry    

Alias name: test    

Creation date: 2019-10-28    

Entry type: PrivateKeyEntry    

Certificate chain length: 1    Certificate[1]:    

Owner: CN=Tester, OU=Test, O=Test, L=HD, ST=BJ, C=CN    

Issuer: CN=Tester, OU=Test, O=Test, L=HD, ST=BJ, C=CN    

Serial number: 7dd12840    

Valid from: Fri Jul 26 20:52:56 CST 2019 until: Sun Jul 02 20:52:56 CST 2119    

Certificate fingerprints:    

MD5: xxxxxxx    

SHA1: xxxxxxx  

SHA256: xxxxxxxxx    

Signature algorithm name: SHA256withRSA    

Subject Public Key Algorithm: 2048-bit RSA key    

Version: 3

至此就可以在生成的目录下获得一个结尾为.keystore文件,接下来就可以打包了。

在打包配置中依次填入上述文件的配置信息就可以开始打包了。平时开发中建议打测试包，正式包每天只有5次的打包机会，不要为此影响了你的正式发布哦~

IOS：

IOS的证书文件获取相对复杂许多。

iOS有两种证书和描述文件：

证书类型

使用场景

开发(Development)证书和描述文件

用于开发测试，在 HBuilderX 中打包后可在真机环境通过Safari调试

发布(Distribution)证书和描述文件

用于提交 AppStore，在 HBuilderX 中提交云打包后提交到 AppStore 审核发布

准备环境
必需要有苹果开发者账号，并且加入了 “iOS Developer Program”
Mac OS 10.9以上系统（如果已经申请p12证书则不需要）
登录 iOS Dev Center
页面右侧选择 “Certificates,IDs & Profiles” 进入证书管理页面.

申请开发证书、发布证书及相对应的描述文件。

首先需要申请苹果 App ID （App的唯一标识）
选择页面的 “Identifiers" 可查看到已申请的所有 App 应用标识，点击页面上的加号来创建一个新的应用标识：

选择标识类型为 “App IDs”，然后点击 “Continue”

平台选择 “iOS，tvOS，watchOS”，Bundle ID 选择 “Explicit”，在 Description 中填写描述，然后填写 Bundle ID，Bundle ID 要保持唯一性，建议填写反域名加应用标识的格式 如：“io.dcloud.hellouniapp”， 然后点击 “Continue”
注意：在 HBuilderX 中 App 提交云端打包时界面上的 AppID 栏填写的就是这个 Bundle ID

至此，App ID 已经创建完毕，接下来开始创建开发证书，在创建开发证书前，需要先生成证书请求文件

生成证书请求文件
不管是申请开发 (Development) 证书还是发布 (Distribution) 证书，都需要使用证书请求 (.certSigningRequest) 文件，证书请求文件需在Mac OS上使用 “钥匙串访问” 工具生成。

在“Spltlight Search”中搜索“钥匙串”并打开 “钥匙串访问” 工具

打开菜单 “钥匙串访问”->“证书助理”，选择“从证书颁发机构请求证书…”

打开创建请求证书页面，在页面中输入用户邮件地址、常用名称，选择存储到磁盘，点击 “继续”
文件名称为“CertificateSigningRequest.certSigningRequest”，选择保存位置，点击 “存储” 将证书请求文件保存到指定路径下，后面申请开发(Development)证书和发布(Production)证书时需要用到

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

申请开发(Development)证书
在证书管理页面选择 “Certificates" 可查看到已申请的所有证书（TYPE：Development 为开发证书，Distribution为发布证书），点击页面的加号来创建一个新的证书：
在 “Software” 栏下选中 “iOS App Development” 然后点击 “Continue”
接下来需要用到刚刚生成的证书请求文件，点击“Choose File…”选择刚刚保存到本地的 “CertificateSigningRequest.certSigningRequest”文件，点击 “Continue” 生成证书文件
生成证书后选择 “Download” 将证书下到本地 (ios_development.cer)
双击保存到本地的 ios_development.cer 文件，会自动打开 “钥匙串访问” 工具说明导入证书成功，可以在证书列表中看到刚刚导入的证书，接下来需要导出 .p12 证书文件，选中导入的证书，右键选择 “导出…”
输入文件名、选择路径后点击 “存储”
输入密码及确认密码后点击 “好”

至此，我们已经完成了开发证书的制作（得到了 xxx.p12 证书文件），接下来，继续生成开发阶段所需的描述文件，在生成描述文件之前，需要先添加调试设备（iPhone 、iPad）

添加调试设备
开发描述文件必须绑定调试设备，只有授权的设备才可以直接安装 App，所以在申请开发描述文件之前，先添加调试的设备。
(如果已经添加设备，可跳过此节)

在证书管理页面选择 “Devices”，可查看到已添加的所有设备信息，点击页面上的加号来添加一个新设备
填写设备名称 和 UDID（设备标识）

申请开发 (Development) 描述文件
在证书管理页面选择 “Profiles”，可查看到已申请的所有描述文件，点击页面上的加号来添加一个新的描述文件
在 “Development” 栏下选中 “iOS App Development”，点击“Continue”按钮
这里要选择之前创建的 “App ID” (这里是“io.dcloud.hellouniapp”)，点击“Continue”
接下来选择需要绑定的证书，这里建议直接勾选 “Select All”，点击“Continue”
选择授权调试设备，这里建议直接勾选 “Select All”，点击 “Continue”
输入描述文件的名称（如“HelloUniAppProfile”）, 点击 “Generate” 生成描述文件
点击“Download”下载保存开发描述文件（文件后缀为 .mobileprovision）

至此，我们已经得到了开发证书（.p12）及对应的描述文件（.mobileprovision），接下看一下如何制作发布证书及发布描述文件

申请发布(Distribution)证书和描述文件
发布 (Production) 证书用于正式发布环境下使用，用于提交到Appstore审核发布。发布证书打包的 ipa，不可以直接安装到手机上

申请发布(Production)证书
在证书管理页面选择 “Certificates" 可查看到已申请的所有证书（TYPE：Development 为开发证书，Distribution为发布证书），点击页面的加号来创建一个新的证书
在 “Software” 栏下选中 “App Store and Ad Hoc”，点击 “Continue”
接下来同样需要用到之前生成的证书请求文件，点击“Choose File…”选择刚刚保存到本地的 “CertificateSigningRequest.certSigningRequest”文件，点击 “Continue” 生成证书文件
生成证书成功，选择“Download” 将证书下载到本地 (ios_production.cer)
同样双击保存到本地的 ios_production.cer 文件将证书导入到 “钥匙串访问”工具中，可以在证书列表中看到刚刚导入的证书，接下来需要导出 .p12 证书文件，选中导入的证书，右键选择 “导出…”

这里注意证书前面有三角标的才能导出为.p12文件

输入文件名、选择路径后点击 “存储”
输入密码及确认密码后点击 “好”

至此，我们已经完成了发布证书的制作（得到了 xxx.p12 证书文件），接下来，继续生成发布描述文件

申请发布 (Distribution) 描述文件
在证书管理页面选择 “Profiles”，可查看到已申请的所有描述文件，点击页面上的加号来添加一个新的描述文件
在 “Distribution” 栏下选中 “App Store”，点击“Continue”按钮
这里要选择之前创建的 “App ID” (这里是“io.dcloud.hellouniapp”)，点击“Continue”
接下来选择需要绑定的发布证书（iOS Distribution），这里勾选刚刚生成的发布证书”，点击“Continue”
接下来输入描述文件的名称（如“HelloUniAppProfileDistribution”）, 点击 “Generate” 生成描述文件
然后点击 “Download” 将描述文件下载到本地（文件后缀为 .mobileprovision）

好了，现在我们已经得到了发布证书（.p12）及对应的发布描述文件（.mobileprovision）

END

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu 不胜感激 ！