前端UniappAPP开发适配指北Vue手把手从零入门

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

前置知识

APP开发过程中注意事项

了解编译条件

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

%PLATFORM%:平台名称

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

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

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

这个界面,即被称为启动界面,也成称为splash或lauchscreen。

启动界面原本是一个静态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平台生成证书的方法:

复制代码d:setPATH=%PATH%;"C:\ProgramFiles\Java\jre1.8.0_201\bin"

第一行:切换工作目录到D:路径第二行:将jre命令添加到临时环境变量中keytool-genkey-alias别名-keyalgRSA-keysize2048-validity36500-keystore证书名称.keystore

Enterkeystorepassword://输入证书文件密码,输入完成回车

Re-enternewpassword://再次输入证书文件密码,输入完成回车

Whatisyourfirstandlastname

Whatisthenameofyourorganizationalunit

Whatisthenameofyourorganization

WhatisthenameofyourCityorLocality

WhatisthenameofyourStateorProvince

Whatisthetwo-lettercountrycodeforthisunit

IsCN=XX,OU=XX,O=XX,L=XX,ST=XX,C=XXcorrect

Enterkeypasswordfor

(RETURNifsameaskeystorepassword)://确认证书密码与证书文件密码一样(HBuilder|HBuilderX要求这两个密码一致),直接回车就可以查看证书信息在一些支付/地图配置时需要用到MD5SHA1等指纹信息

可以使用以下命令查看:

keytool-list-v-keystoretest.keystore

Enterkeystorepassword://输入密码,回车

会输出以下格式信息:

Keystoretype:PKCS12

Keystoreprovider:SUN

Yourkeystorecontains1entry

Aliasname:test

Creationdate:2019-10-28

Entrytype:PrivateKeyEntry

Certificatechainlength:1Certificate[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

Serialnumber:7dd12840

Validfrom:FriJul2620:52:56CST2019until:SunJul0220:52:56CST2119

Certificatefingerprints:

MD5:xxxxxxx

SHA1:xxxxxxx

SHA256:xxxxxxxxx

Signaturealgorithmname:SHA256withRSA

SubjectPublicKeyAlgorithm:2048-bitRSAkey

Version:3

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

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

IOS:

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

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

证书类型

使用场景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

THE END
1.uniApp零基础学习第1章之uniapp介绍以及首个项目运行uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、HarmonyOS、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。 DCloud 公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群https://www.jianshu.com/p/c162948546b1
2.uniapp特点以及简单实用uniapp好用吗uni-app是一个跨平台开发框架,能够帮助开发者快速地构建同时支持多个平台的应用程序。uni-app基于Vue.js框架,通过一套代码,实现同时在iOS、Android、Web等多个平台上运行的应用。uni-app提供了丰富的组件和API,使开发者能够轻松地开发出功能丰富、性能优越的应用程序。 https://blog.csdn.net/2303_78975788/article/details/139118962
3.uniapp开发的优势和劣势近年来,uni-app在软件开发领域备受瞩目,甚至不少企业客户都对其有所耳闻。今天,就由老猿为大家深入剖析uni-app的本质,以及它所具备的优势与劣势,助力各位老板在挑选app开发模式时能够更加明智。 uni-app定义简述。 uni,即统一之意,这款国产产品通过官方介绍可知,它是一个基于Vue.js的跨平台应用开发前端框架。只需https://www.yoojia.com/ask/17-14374465202950189496.html
4.app开发uniapp有什么优势?技术博客总结 本文从UniApp的简介、工作原理、优势、以及实际开发实践四个方面,对UniApp进行了详细的介绍。作为一款优秀的跨平台开发框架,UniApp使得开发者可以轻松应对多APP个平台的应用开发需求,大大提高开发效率。希望本文对初学者和开发者的学习和实践有所帮助。https://www.yimenapp.net/knowledge/blog-10508.html
5.uniapp是什么?优势和略势有哪些?优势和略势有哪些? uni-app是一款跨平台开发框架,可以快速地开发出微信小程序、H5、App 等多个平台的应用。uni-app 的特点是开发效率高、代码复用率高、跨平台性能好,能够帮助开发者快速地开发出高质量的应用。 UNI-APP是什么? uni-app的出现很大程度上解决了跨平台开发的难题。通常情况下,开发者需要根据不同https://www.infocode.com.cn/blog/18967.html
6.uniapp特效教程,uniapp插件:在线特效教程大全uni-app是什么? https://uniapp.dcloud.net.cn/ uni-app 是使用 Vue 语法开发小程序、H5、App的统一框架 uni-app 可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。 uni-app优势 https://edu.xinpianchang.com/article/texiao-600161
7.5+App和uniapp在App开发上的对比uni-app有十几万人的官方QQ群/微信群,各个群都活跃。网络上的视频教程、经验分享也更多。 5+App的使用人数比uni-app少很多,交流群活跃程度、资料丰富度都不及uni-app。 5+App的优势 虽然uni-app优于5+App很多,但5+App也有一些优势: 入门简单:uni-app要求开发者必须掌握vue。而5+App只需要会html即可。 https://www.laiketui.com/14125.html
8.uniapp可以开发app吗uniapp可以开发app。uniapp对于独自开发是相当友好的,一套代码可以兼容app(安卓,ios),小程序,h5等,一定程度上降低了开发的成本,个人开发的压力也在某种程度上减小了。关于uniapp开发app的具体内容我们将在文章中展开。 uniapp开发app的优势 1、uniapp对于独自开发是相当友好的,一套代码可以兼容app(安卓,ios),小程https://worktile.com/blog/know-741/
9.思途智旅采用Uniapp技术开发优势Uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到IOS、Android、Web(响应)、以及各种小程序(微信、支付宝、百度、头条、QQ、钉钉、淘宝)、快应用等多个平台。 对于运营者和开发者使用Uni-app有非常多的优势,这里为大家详细介绍一下: https://www.stourweb.com/peixun/fangfa-1508
10.uniapp框架演示示例:优点缺点及学习资源全解析Uni-app的专用编程工具,我亲自体验过,编程感觉很好 缺点 对于git和svn的支持不够完善,依赖-git工具进行提交和pull,虽然功能可以实现,但是体验不佳,不过弊大于利。 优势 我最喜欢的代码智能提示是中文的,还支持F1直接跳转到方法讲解的网页。 用这个工具很大一个原因是用来运行包的,在这个工具里可以一键直接运行到网页https://m.bjhwtx.com/h-nd-187755.html
11.Uniapp是什么?Uniapp跨平台开发框架的优势和应用嘲深度解读Uniapp开发框架具有高效开发、性能优秀、功能扩展灵活等优势。目前已被广泛应用于中小企业、电商、社交、媒体等不同行业领域的 移动应用开发中 本文带你了解,我们基于Uniapp开发框架 开发的OpenCart移动跨平台APP,向你介绍其特点、优势以及与传统开发模式差别 https://www.guangdawangluo.com/articles/325
12.UniAppp开发特点与优势多端跨平台的好处 1.多人工作一人完成,节省成本; 2.创业型企业青睐; 3.个人开发者接私活利器; 学前必备基础 1.前端css,html,javascript; 2.了解小程序; 3.了解VUE.JS语法; 什么是UniApp 1.Union Appplication 2.前端框架 3.基于Vue.js 4.开发规范同小程序 https://wsa.jianshu.io/p/11c9cc4fe44f
13.uniapp软件AR开发uniapp软件软件开发请联系上方廖经理,uniapp软件APP开发,uniapp软件系统开发,uniapp软件公众号开发,uniapp软件小程序开发,uniapp软件模型开发,uniapp软件平台软件,uniapp软件AR开发,uniapp软件开发方案,uniapp软件开发公司,uniapp软件开发需要多少钱,uniapp软件源码开发。 http://shenzhen0381690.11467.com/news/6911950.asp
14.UNIAPP技术分享什么是UNIAPP,介绍UNIAPP 用途和技术基本原理 1. uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。 2. 据 DCloud 称, uni-app 在手,做啥都不愁。即使不跨端,uni-app也是更好https://www.sctjsj.com/go-a795.htm
15.uniAPP入门:从零开始的跨平台应用开发指南什么是uni-APP? uni-APP 是一款由阿里云团队开发的跨平台前端框架,旨在提高开发者在开发 iOS、Android、Web 和小程序等不同平台应用的效率。它提供了丰富的组件库和API,有助于开发者使用统一的代码库在多平台上部署应用。 优势与应用场景 跨平台性:uni-APP 使得开发者只需编写一次代码,即可在多个平台上运行应用,https://www.imooc.com/article/350863
16.详解uniapp分包的实现方式及优点javascript技巧为了解决这个问题,Uniapp提供了分包功能,可以将应用程序按照不同的模块进行分割,实现较快的加载速度和更好的用户体验。本文将详细介绍Uniapp分包的功能和优势,包括如何通过配置文件实现分包,如何避免分包加载失败和维护分包之间的依赖关系等。 正文开始 一、什么是 uniapp 分包https://www.jb51.net/javascript/2970349f4.htm
17.uniapp2.2发布,大幅度优化H5端性能体验技术头条这其实也符合uni-app的初衷,uni-app的定位并不是需要多端发布时才用uni-app。uni-app是一个使用vue.js开发所有前端应用的统一框架。对于一个前端工程师来说,使用uni-app做多端效率会更高,做单一端也是没问题的。 在过去的版本迭代中,uni-app已经成为不错的小程序开发框架,比使用原生微信开发更有优势。 在unihttps://www.163.com/dy/article/EML69CSH0511FQO9.html
18.uniappios执行的代码uniapp开发小星星的技术博客3.组件丰富:uni-app内置了一些常用组件,如表单、列表、滑动、加载中等,这些常用组件可以满足开发者的各种开发需求。 4.通用技术栈:uni-app基于Vue.js框架,学习成本低,内嵌mpvue。 uni-app优势介绍 三、uni-app开发环境准备 开始之前,开发者需先下载安装如下工具 HBuilderX:官方IDE下载地址 https://blog.51cto.com/u_87634/7423534