首页 > 编程知识 正文

vue.createApp,vue Android

时间:2023-05-04 01:34:53 阅读:111442 作者:3528

Cordova Vue编写了Hybird App Cordova,介绍了Cordova是使用Apache基金会支持的HTML5 CSS3 JS构建多平台APP程序的开发框架。 支持手机系统(Android、IOS、Windows phone )的本机API调用,可以把你写的Web程序包含在本机APP外壳,也就是常说的混合APP中本文是前端开发人员通过从0到Vue的组合来构建简单的APP的方法 环境介绍nodeJs V10.3.0 VueCli V4.5.9 Cordova V10.0.0 JDK V1.8.0 Gradle V6.0.1 安卓SDK API level 29 Cordova安装使用npm在全球安装Cordova脚手架。 npm install -g cordova//下载完成后输入cordova -v验证安装是否成功,版本号出现后cordova -v安装成功并创建Cordova项目使用命令行成功创建Cordova项目cordova create cordovaVueDemo//后,导航至该目录,然后导航至平台cdcordovavuedemocordovaplatformaddandroimo 这里需要注意的是platforms、plugins和www文件夹,用于存储平台文件(如Android、ios和browser )、Cordova插件文件和包资源文件 此时,我们将Vue项目集成到Cordova中,直接在Cordova中执行命令来创建Vue项目 vue create app最终得到了这样的目录。 其中,app文件夹是vue项目。 将vue项目打包到apk中时,必须将vue的静态资源文件构建到Cordova项目的www文件夹中。 经常使用vue的伙伴们都很熟悉在vue.config.js上构成打包文件输出目录 module.exports={ output dir : ' ./www ',assetsDir: 'static ',}//此时,将Vue项目添加到Cordova的www文件夹NPM run buibui 必须安装cordova-plugin-splashscreen插件才能配置启动图 cordovapluginaddcordova-plugin-splash screen//注意,安装插件后,cordovaplatformremoveandroidcordovaplatformaddandroid XML version=' 1.0 ' encoding=' utf-8 '? //id标识APP应用程序//version APP应用程序的版本此版本号是项目的实际版本号构件id=' XXX.xx.XXX ' version=' 1.0.0 ' xmlns widgets ' xmlns : CDV=' http://Cordova.Apache.org/ns/1.0 ' name app名称/name description App介绍/description author email=xxxxx

ow-intent rel="external nofollow" href="market:*" /> // app icon <icon src="resources/icon/36.png" density="ldpi" /> <icon src="resources/icon/48.png" density="mdpi" /> <icon src="resources/icon/72.png" density="hdpi" /> <icon src="resources/icon/96.png" density="xhdpi" /> <icon src="resources/icon/144.png" density="xxhdpi" /> <icon src="resources/icon/192.png" density="xxxhdpi" /> // app启动图 <splash density="port-hdpi" src="resources/splash/480_800.png" /> <splash density="port-ldpi" src="resources/splash/200_320.png" /> <splash density="port-mdpi" src="resources/splash/320_480.png" /> <splash density="port-xhdpi" src="resources/splash/720_1280.png" /> <splash density="port-xxhdpi" src="resources/splash/960_1600.png" /> <splash density="port-xxxhdpi" src="resources/splash/1280_1920.png" /> <splash density="land-hdpi" src="resources/splash/800_480.png" /> <splash density="land-ldpi" src="resources/splash/320_200.png" /> <splash density="land-mdpi" src="resources/splash/480_320.png" /> <splash density="land-xhdpi" src="resources/splash/1280_720.png" /> <splash density="land-xxhdpi" src="resources/splash/1600_960.png" /> <splash density="land-xxxhdpi" src="resources/splash/1920_1280.png" /> </platform> <platform name="ios"> <allow-intent rel="external nofollow" href="itms:*" /> <allow-intent rel="external nofollow" href="itms-apps:*" /> </platform></widget>

Cordova构建自签名android APK

我们在根目录上新建一个叫keyStore的文件夹存放我们自己生成的签名包

在keyStore目录上执行命令生成签名包

keytool -genkey -v -keyalg RSA -keystore xxx.keystore -alias xxx -validity 1000输入密钥库口令: 再次输入新口令: 您的名字与姓氏是什么? [Unknown]: 您的组织单位名称是什么? [Unknown]: 您的组织名称是什么? [Unknown]: 您所在的城市或区域名称是什么? [Unknown]: 您所在的省/市/自治区名称是什么? [Unknown]: 该单位的双字母国家/地区代码是什么? [Unknown]: CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=Unknown是否正确? [否]: Y正在为以下对象生成 2,048 位RSA密钥对和自签名证书 (SHA256withRSA) (有效期为 1,000 天): CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=Unknown输入 <xxx> 的密钥口令 (如果和密钥库口令相同, 按回车): [正在存储xxx.keystore]// PS:这里除了密钥库口令是必须要写的,其他都可以为空,一般这条命令我会执行两次,生成一个release跟一个debug的签名包keytool -genkey -v -keyalg RSA -keystore debug.keystore -alias debug -validity 1000// 接下来还需要在跟目录下新建一个build.json,该文件主要是配置签名包,在cordova官网有说到https://cordova.apache.org/docs/en/10.x/guide/platforms/android/index.html#using-buildjson{ "android": { "debug": { "keystore": "keystore/debug.keystore", // 签名包名 "storePassword": "******", // 密钥库密码 "alias": "debug", // 别名 "password": "******", // 签名包密码 "keystoreType": "" }, "release": { "keystore": "keystore/xxx.keystore", "storePassword": "******", "alias": "xxx", "password": "******", "keystoreType": "" } }}

做完上面一系列操作后,我们可以开始构建Android Apk了

Cordova构建Android Apk

在构建Apk之前要先确认我们是否安装了Android平台,,最直接的方法就是查看platforms文件夹里面是否有android文件夹,有的话就说明已经安装,若没有就执行命令安装一下

cordova platform add android // 这样一般默认安装的都是最新版本cordova platform add android@xxx // 若需要安装指定版本需在后面加上版本号// 运行构建命令cordova build android // debug版本cordova build android -release // 正式版/发布版// 当控制台显示如下图所示,能看到successful字样并给出apk路径时,代表构建成功

构建apk常见的一些问题以及解决方法 // gradle文件下载失败,报错如下,原因是因为网络问题,我的解决方法是使用科学上网FAILURE: Build failed with an exception.* What went wrong:A problem occurred configuring root project 'android'.> Could not resolve all artifacts for configuration ':classpath'. > Could not download proguard-gradle-6.0.3.jar (net.sf.proguard:proguard-gradle:6.0.3) > Could not get resource 'https://jcenter.bintray.com/net/sf/proguard/proguard-gradle/6.0.3/proguard-gradle-6.0.3.jar'. > Could not GET 'https://jcenter.bintray.com/net/sf/proguard/proguard-gradle/6.0.3/proguard-gradle-6.0.3.jar'. > java.net.SocketException: Connection reset // 字面上意思,不能解压这个包,我尝试过直接把它解压完了再放回去,结果是可行的,但是有几次不行,所以我直接进入目录把这个包删了在重新执行打包命令 Unzipping C:UsersHD.gradlewrapperdistsgradle-2.13-all7hsc6vr6mi3i6i5m7q9hj4ci1qgradle-2.13-all.zip to C:UsersHD.gradlewrapperdistsgradle-2.13-all7hsc6vr6mi3i6i5m7q9hj4ci1q// 还有一种就是一直卡在下载某个文件的地方download,最后超时导致失败,这种情况一般是downloading https://xxxxxxxxxxx.comxxxxxxxxx文件路径// 他是有个文件链接和文件下载后存放的路径给你的,我一般的做法是直接去下载这个文件然后放到这个路径上,再次执行打包命令时他会检查这个文件的存在,存在的话他就不会再去下载了

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。