跨端三剑客

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

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

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

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

uniapp适配ios uniapp适配灵动岛_uniapp适配ios

前置知识

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

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

APP开发过程中注意事项

了解编译条件

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

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

uniapp适配ios uniapp适配灵动岛_vue.js_02

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

uniapp适配ios uniapp适配灵动岛_javascript_03

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

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

uniapp适配ios uniapp适配灵动岛_描述文件_04

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

uniapp适配ios uniapp适配灵动岛_描述文件_05

启动页
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的配置文件获取予以介绍;

uniapp适配ios uniapp适配灵动岛_vue.js_06

安卓:

我们需要一个安卓证书,我们来生成一下安卓证书,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” 进入证书管理页面.

uniapp适配ios uniapp适配灵动岛_vue.js_07

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

uniapp适配ios uniapp适配灵动岛_javascript_08

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

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

uniapp适配ios uniapp适配灵动岛_uniapp适配ios_09

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

uniapp适配ios uniapp适配灵动岛_uniapp适配ios_10

至此,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 证书文件,选中导入的证书,右键选择 “导出…”

uniapp适配ios uniapp适配灵动岛_javascript_11

这里注意证书前面有三角标的才能导出为.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