Uni-app APP开发、适配指北

跨端三剑客

近几年来，随着移动端开发的需求的不断变大，跨端框架也在不断的蓬勃发展，随之时间的推移，有三个跨端框架凭借其各自的优势，出现在大家的眼前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/techne...
下面以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?

What is the name of your organizational unit?

What is the name of your organization?

What is the name of your City or Locality?

What is the name of your State or Province?

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

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

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 不胜感激 ！