做网站销售怎么做,易语言怎么做无限打开网站,wordpress 显示错误,网站建设属于资产cordova 一个将web应用程序封装成app的框架 cordova的详细介绍请参考这个链接#xff1a;http://www.zhoujingen.cn/blog/7034.html 我接下来主要将如何搭建。 1.首先你需要下载几样东西 1.jdk. 2.android_SDK. 2.安装这两个#xff0c;并配置环境变量 这里jdk的环境变量配置… cordova 一个将web应用程序封装成app的框架 cordova的详细介绍请参考这个链接http://www.zhoujingen.cn/blog/7034.html 我接下来主要将如何搭建。 1.首先你需要下载几样东西 1.jdk. 2.android_SDK. 2.安装这两个并配置环境变量 这里jdk的环境变量配置我就不细说了。 android_SDK的环境变量配置 C:\Development\android-sdk\platform-tools C:\Development\android-sdk\tools 将这两个目录添加到系统path中注意这里一定是你的android-sdk目录不要直接用我的奥 3下载cordova并安装平台等操作 下载cordova是用node本身自带的npm所以在这之前你还需要安装node(这里默认你已经安装好了node) 首先你可以在某个盘里面新建一个文件夹名字随意命名webApp。然后在命令行中进入到那个目录下面在执行下面的操作。 1 安装Cordova Cordova的命令行运行在Node.js 上面并且可以通过NPM安装。 根据 平台具体指导 安装相应平台的依赖。打开命令提示符或终端然后键入npm install -g cordova. 例如$ npm install -g cordova 2 创建一个项目 使用命令行创建一个空的Cordova项目。导航到你希望创建项目的目录然后键入 cordova create path。 要知道这个命令完整的选项键入cordova help create。 例如cordova create myApp 3. 添加一个平台 在创建完一个Cordova项目后导航到项目目录。在项目目录中你需要添加你想构建app的平台 为了添加平台 键入 cordova platform add platform name。 为了知道你可以添加的平台你可以运行cordova platform。 例如 1.cd myApp//首选要进入到那个文件中 2.cordova platform add android//添加平台 4. 运行App 在命令中,键入cordova run platform name。 注意这里的平台名可以是browser android iOS等很多。 例如cordova run android 安装好了我们来看一下你的文件中的目录 我们来分析一下文档借结构 hook文件夹是我们的钩子文件夹这俩主要用来放钩子的 platforms文件夹放的都是一些平台信息你添加一个平台的话都会在这个文件夹中生成相应的文件。 plugins文件主要存放插件的。 www文件下主要 这里我暂时不说等我说config.xml文件的时候来说。 config.xml文件 我来细说一下config.xml文件。这个文件是全局配置文件。 这里的name ,description,author显然可以知道他意思的.分别是项目的名字描述以及作者。 content srcindex.html/这个标签标示的是打开cordova应用程序最先呈现的页面就是index.html页面 plugin标签标示的是已经安装的插件。 等详细信息可以参考官网 好重点来了我来说说如何将将远端web应用程序引入到cordova中具体操有一下几点 第一步 allow-navigation hrefhttps://cordovahostedweb-starter.azurewebsites.net / 将上面这句话添加到config.xml文件中放在name标签上面。 这里href中的地址就是你的远端首页面的地址。 第二步 var app { // Application Constructor initialize: function() { this.bindEvents(); }, bindEvents: function() { document.addEventListener(deviceready, this.onDeviceReady, false); }, onDeviceReady: function() { app.receivedEvent(deviceready); // Here, we redirect to the web site. var targetUrl https://cordovahostedweb-starter.azurewebsites.net/; var bkpLink document.getElementById(bkpLink); bkpLink.setAttribute(href, targetUrl); bkpLink.text targetUrl; window.location.replace(targetUrl); }, // Note: This code is taken from the Cordova CLI template. receivedEvent: function(id) { var parentElement document.getElementById(id); var listeningElement parentElement.querySelector(.listening); var receivedElement parentElement.querySelector(.received); listeningElement.setAttribute(style, display:none;); receivedElement.setAttribute(style, display:block;); console.log(Received Event: id); } }; app.initialize(); 将你的www文件下的index.js文件复制成这个其中targetURL也是你的远端程序的首页面。 3 Verifying connectivity.. a idbkpLink hrefhttps://cordovahostedweb-starter.azurewebsites.netcordovahostedweb.azurewebsites.net/a div classapp h1Apache Cordova/h1 div iddeviceready classblink p classevent listeningConnecting to Device/p p classevent receivedDevice is Ready/p /div /div script typetext/javascript srccordova.js/script script typetext/javascript srcscripts/index.js/script 将www文件夹下的index.html文件内容改为上面的。 5 meta http-equivContent-Security-Policy contentdefault-src self data: gap: https://cordovahostedweb-starter.azurewebsites.net https://ssl.gstatic.com unsafe-eval; style-src self unsafe-inline; media-src * 将index.html文件中的meta中变成这样其实也就是加上gap:....;后面还是你远端首页面的地址。 主要原理是点开cordova程序他会导航到index.html文件然后加载index.html文件所以最先显示的是index.html文件然后加载index.js文件然后在js文件中又重定向到你的远端页面主要实现就是这个 这里附加上参考地址https://taco.visualstudio.com/en-us/docs/create-a-hosted-app/# 四如何打包apk 参考文章 http://www.tuicool.com/articles/673mE3m 介绍 TL;DR Android app 的打包分为 debug 和 release 两种后者是用来发布到应用商店的版本。这篇文章会告诉你 Cordova 如何打包 Android release 版本也会让你了解 Android app 的打包流程。 创建一个 demo app 为了演示首先我们需要创建一个 Cordova 项目的基本步骤。如果你已经对此很熟悉可以跳过这一步。 先全局安装 Cordova CLI npm install -g cordova 在 cordova-demo 目录创建一个项目ID 为 com.example.cordovaDemo 项目名为 cordovaDemo 。 cordova create cordova-demo com.example.cordovaDemo cordovaDemo 加上 Android 平台这会下载一个 Android 项目的框架并把版本信息保存到 config.xml 。你可以去 platforms/android 目录下查看它。 cordova platform add android --save 你可以检查下平台需求是否满足。基本上 Cordova 需要你把 Java SDK Android SDK 和 Gradle 都配置好。 cordova requirements android 现在一个 Cordova 项目就已经准备好了。你可以尝试构建一个版本。一切顺利的话你会在 platforms/android/build/outputs/apk 目录下看到 APK 文件。这个目录后面会经常用到为了方便我们建立一个符号链接 android-apk 。 # 构建 apk
cordova build android# 建立符号链接 android-apk
ln -s platforms/android/build/outputs/apk android-apk# 查看一下这个目录你应该会看到 android-debug-unsigned.apk
ls android-apk 搞定但这个构建的 APK 是 debug 版本的。要构建 release 版本我们需要先了解一下 Android 手动打包的流程。 Android APK 手动打包流程 Android app 的打包流程大致分为 build , sign , align 三部分。 build是构建 APK 的过程分为 debug 和 release 两种。release 是发布到应用商店的版本。 sign是为 APK 签名。不管是哪一种 APK 都必须经过数字签名后才能安装到设备上签名需要对应的证书keystore大部分情况下 APK 都采用的自签名证书就是自己生成证书然后给应用签名。 align是压缩和优化的步骤优化后会减少 app 运行时的内存开销。 debug 版本的的打包过程一般由开发工具比如 Android Studio自动完成的。开发工具在构建时会自动生成证书然后签名不需要我们操心。而 release 版本则需要开发者自己生成证书文件。Cordova 作为 hybrid app 的框架不像纯 Android 开发那么自动化所以第一次打 release 包我们需要了解一下手动打包的过程。 Build 首先我们生成一个 release APK 。这点在 cordova build 命令后加一个 --release 参数局可以。如果成功你可以在 android-apk 目录下看到一个 android-release-unsigned.apk 文件。 cordova build android --release Sign 我们需要先生成一个数字签名文件keystore。这个文件只需要生成一次。以后每次 sign 都用它。 keytool -genkey -v -keystore release-key.keystore -alias cordova-demo -keyalg RSA -keysize 2048 -validity 10000 上面的命令意思是生成一个 release-key.keystore 的文件别名alias为 cordova-demo 。 过程中会要求设置 keystore 的密码和 key 的密码。我们分别设置为 testing 和 testing2 。这四个属性要记牢下一步有用。 然后我们就可以用下面的命令对 APK 签名了 jarsigner -verbose -sigalg SHA1 withRSA -digestalg SHA1 -keystore release-key.keystore android-apk/android-release-unsigned.apk cordova-demo
这里运行有可能会出错原因是android/android-release-unsigned.apk这里写的不对原因是因为你的apk的位置写的不对你可以找到apk将他复制到根目录下然后地址改为./android-release-unsigned.apk或者你直接写你apk的位置。这个命令中需要传入证书名 release-key.keystore 要签名的 APK android-release-unsigned.apk和别名 cordova-demo 。签名过程中需要先后输入 keystore 和 key 的密码。命令运行完后这个 APK 就已经改变了。注意这个过程没有生成新文件。 Align 最后我们要用 zipalign 压缩和优化 APK zipalign -v 4 android-apk/android-release-unsigned.apk android-apk/cordova-demo.apk 这一步会生成最终的 APK我们把它命名为 cordova-demo.apk 。它就是可以直接上传到应用商店的版本。 这一步不操作也可以。 自动打包 一旦有了 keystore 文件下次打包就可以很快了。你可以在 cordova build 中指定所有参数来快速打包。这会直接生成一个 android-release.apk 给你。 cordova build android --release -- --keystorerelease-key.keystore --aliascordova-demo --storePasswordtesting --passwordtesting2 但每次输入命令行参数是很重复的Cordova 允许我们建立一个 build.json 配置文件来简化操作。文件内容如下 {android: {release: {keystore: release-key.keystore, alias: cordova-demo, storePassword: testing, password: testing2 } } } 下次就可以直接用 cordova build --release 了。 为了安全性考虑建议不要把密码放在在配置文件或者命令行中而是手动输入。你可以把密码相关的配置去掉下次 build 过程中会弹出一个 Java 小窗口提示你输入密码。 用 Gradle 配置自动打包 另一种配置方法是使用 Gradle 一个 Android 的自动化构建工具。 cordova build android 的过程其实就是使用它。你要在 platforms/android 目录下建立 release-signing.properties 文件内容类似下面这样 storeFilerelative/path/to/keystore
storePasswordSECRET1
keyAliasALIAS_NAME keyPasswordSECRET2 这个文件的名称和位置也是可以通过 Gradle 的配置 cdvReleaseSigningPropertiesFile 修改的。我觉得一般情况使用 build.json 就足够了。有兴趣的可以看这个 Cordova 官方教程 4.cordova app 图标更改 如何更改app图标 1.首先下载插件 cordova plugin add cordova-plugin-splashscreen 2.在config.xml文件中添加下面的内容 platform nameandroid!-- you can use any density that exists in the Android project --splash srcres/screen/android/splash-land-hdpi.png densityland-hdpi/ 注意这里的density分别指的是不同手机的分辨率不同分辨率的手机采用的而logo大小是不一样的splash srcres/screen/android/splash-land-ldpi.png densityland-ldpi/splash srcres/screen/android/splash-land-mdpi.png densityland-mdpi/splash srcres/screen/android/splash-land-xhdpi.png densityland-xhdpi/splash srcres/screen/android/splash-port-hdpi.png densityport-hdpi/splash srcres/screen/android/splash-port-ldpi.png densityport-ldpi/splash srcres/screen/android/splash-port-mdpi.png densityport-mdpi/splash srcres/screen/android/splash-port-xhdpi.png densityport-xhdpi/
/platformplatform nameios!-- images are determined by width and height. The following are supported --splash srcres/screen/ios/Default~iphone.png width320 height480/splash srcres/screen/ios/Default2x~iphone.png width640 height960/splash srcres/screen/ios/Default-Portrait~ipad.png width768 height1024/splash srcres/screen/ios/Default-Portrait2x~ipad.png width1536 height2048/splash srcres/screen/ios/Default-Landscape~ipad.png width1024 height768/splash srcres/screen/ios/Default-Landscape2x~ipad.png width2048 height1536/splash srcres/screen/ios/Default-568h2x~iphone.png width640 height1136/splash srcres/screen/ios/Default-667h.png width750 height1334/splash srcres/screen/ios/Default-736h.png width1242 height2208/splash srcres/screen/ios/Default-Landscape-736h.png width2208 height1242/
/platformplatform namewindows!-- images are determined by width and height. The following are supported --splash srcres/screen/windows/splashscreen.png width620 height300/splash srcres/screen/windows/splashscreenphone.png width1152 height1920/
/platformplatform nameblackberry10!-- Add a rim:splash element for each resolution and locale you wish --!-- http://developer.blackberry.com/html5/documentation/rim_splash_element.html --rim:splash srcres/screen/blackberry/splashscreen.png/
/platformpreference nameSplashScreenDelay value10000 ///这个值表示这个图标显示10000毫秒后消失。 上面图片的路径你需要在你的根目录下面重新建一个文件夹res然后在这个文件夹下面在建一个screen再在不同的平台下面建立不同平台文件夹然后在这个文件夹下面添加图片。 下面还有几句话(书写在config.xml)中的。 preference nameSplashMaintainAspectRatio valuetrue / 设置为true的话那么图片会适应手机分辨率不会出现拉伸情况。 6.会遇到的bug 安装后手机app中无法打开应用程序中的外网链接 解决方案 在config中白名单中添加 allow-intent hrefhttp://*/* /
具体详情可以参考cordova中的白名单介绍
