UniappAPP开发、适配指北

跨端三剑客

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


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

这里盘点下已经支持小程序的超级 App&＃xff1a;

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

前置知识

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

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

APP开发过程中注意事项

了解编译条件

写法&＃xff1a;以 #ifdef 或 #ifndef 加 %PLATFORM% 开头&＃xff0c;以 #endif 结尾。

#ifdef&＃xff1a;if defined 仅在某平台存在
#ifndef&＃xff1a;if not defined 除了某平台均存在
%PLATFORM%&＃xff1a;平台名称

示例&＃xff0c;如下代码仅在 App 下出现:

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

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

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

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

这个界面&＃xff0c;即被称为启动界面&＃xff0c;也成称为 splash 或 lauch screen。

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

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

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

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

DCloud的App&＃xff0c;支持所有Android和iOS的启动界面方式。

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

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

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

安卓:

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

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

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

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

d: set PATH&＃61;%PATH%;“C:\Program Files\Java\jre1.8.0_201\bin”

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

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

Enter keystore password: //输入证书文件密码&＃xff0c;输入完成回车 Re-enter new password: //再次输入证书文件密码&＃xff0c;输入完成回车 What is your first and last name? [Unknown]: //输入名字和姓氏&＃xff0c;输入完成回车 What is the name of your organizational unit? [Unknown]: //输入组织单位名称&＃xff0c;输入完成回车 What is the name of your organization? [Unknown]: //输入组织名称&＃xff0c;输入完成回车 What is the name of your City or Locality? [Unknown]: //输入城市或区域名称&＃xff0c;输入完成回车 What is the name of your State or Province? [Unknown]: //输入省/市/自治区名称&＃xff0c;输入完成回车 What is the two-letter country code for this unit? [Unknown]: //输入国家/地区代号&＃xff08;两个字母&＃xff09;&＃xff0c;中国为CN&＃xff0c;输入完成回车 Is CN&＃61;XX, OU&＃61;XX, O&＃61;XX, L&＃61;XX, ST&＃61;XX, C&＃61;XX correct? [no]: //确认上面输入的内容是否正确&＃xff0c;输入y&＃xff0c;回车 Enter key password for (RETURN if same as keystore password): //确认证书密码与证书文件密码一样&＃xff08;HBuilder|HBuilderX要求这两个密码一致&＃xff09;&＃xff0c;直接回车就可以查看证书信息
在一些支付/地图配置时需要用到MD5 SHA1等指纹信息可以使用以下命令查看:keytool -list -v -keystore test.keystore Enter keystore password: //输入密码&＃xff0c;回车会输出以下格式信息&＃xff1a;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&＃61;Tester, OU&＃61;Test, O&＃61;Test, L&＃61;HD, ST&＃61;BJ, C&＃61;CN Issuer: CN&＃61;Tester, OU&＃61;Test, O&＃61;Test, L&＃61;HD, ST&＃61;BJ, C&＃61;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文件,接下来就可以打包了。

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

IOS&＃xff1a;

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

iOS有两种证书和描述文件&＃xff1a;

证书类型

使用场景

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

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

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

用于提交 AppStore&＃xff0c;在 HBuilderX 中提交云打包后提交到 AppStore 审核发布

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

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

首先需要申请苹果 App ID &＃xff08;App的唯一标识&＃xff09;
选择页面的 “Identifiers" 可查看到已申请的所有 App 应用标识&＃xff0c;点击页面上的加号来创建一个新的应用标识&＃xff1a;

选择标识类型为 “App IDs”&＃xff0c;然后点击 “Continue”

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

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

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

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

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

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

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

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

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

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

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

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

至此&＃xff0c;我们已经得到了开发证书&＃xff08;.p12&＃xff09;及对应的描述文件&＃xff08;.mobileprovision&＃xff09;&＃xff0c;接下看一下如何制作发布证书及发布描述文件

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

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

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

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

至此&＃xff0c;我们已经完成了发布证书的制作&＃xff08;得到了 xxx.p12 证书文件&＃xff09;&＃xff0c;接下来&＃xff0c;继续生成发布描述文件

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

好了&＃xff0c;现在我们已经得到了发布证书&＃xff08;.p12&＃xff09;及对应的发布描述文件&＃xff08;.mobileprovision&＃xff09;

END

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