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