一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者TypeScript,语言的话就按个人喜好,喜欢JS就用JS,喜欢TS就用TS,推荐使用TS书写,代码结构和可读性相对更强.本文演示使用JS来书写,方便不会TS的用户阅读. 创建完项目后,项目结构如下: www目录为我们本地应用程序目录,和一般静态网站类似.默认主页为index.html.脚本对应为scripts/index.js config.xml为项目配置文件,该文件在VS中是可视化操作的. 包…

一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选项卡中,将显示名称和起始页,修改为自己想要的名称即可. 如需直接在xml文件中修改:右击config.xml,使用[查看代码]进行修改即可. 2.插件安装 一般在项目开发中,免不了使用第三方的插件,在VS中安装Cordova插件也是比较简单的. 可视化打开config.xml文件.切换到[插件]选项卡: 核心插件:是包中内置的一些插件. 自定义:可以安装第三方插件. 已安装:当前项目已安装的插件.…

一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选项: 运行依赖关系查看器,用来检测开发环境是否完整. 如果检测显示: 那么就是环境配置完成了.可以直接开发了. 如果显示有错误页面,那么按照错误页面的提示,进行对应的环境配置即可. 一般错误页面提示都是缺少对应的依赖组件,包括如下: Git Node.js Android SDK JDK 这些组件可以在安装VS时选择安装,不过版本不是最新的.所以一般自己手动安装就行了. 截至本文发布前:VS201…

本文转自:https://www.cnblogs.com/UltimateAvalon/p/5328642.html 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选项: 运行依赖关系查看器,用来检测开发环境是否完整. 如果检测显示: 那么就是环境配置完成了.可以直接开发了. 如果显示有错误页面,那么按照错误页面的提示,进行对应的环境配置即可. 一般错误页面提示都是缺少对应的依赖组件,包括如下: Git Node.js Android SDK…

一.布局 Ionic模板提供了一个侧边栏菜单示例项目和标签选项卡示例项目.本案例将两个布局进行结合,简单介绍下Ionic的布局.Ionic采用自定义标签和标准Html标签相结合.相对于全部使用div方式来说,自定义标签的可读性更强.Ionic的界面呈现既可以使用静态页面方式呈现,也可以使用Angular提供的路由机制和控制器来控制控制页面的呈现及数据绑定. 使用VS创建一个空白的Ionic项目.项目中包含一个index.html页面和app.js的脚本.依照惯例修改项目的基本属性后,打开inde…

一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目.将SideMenu和Tabs项目里的templates和js文件合并到空项目里,修改js对应的代码即可.完整项目工程如下: 2.App.js代码修改如下: /* * 加载所需要的各个模块 * 上篇教程中加载了controllers控制器模块 * 本篇教程加载了services服务模块 */ angular.module('starter', ['ionic', '…

VS2015已经出了正式版,想用来试一下cordova方面的开发.最近在看ionic这个框架,于是想能在VS2015里编辑js就好了. 下面说一下蛋疼的安装配置过程. 一.安装VS2015及Android SDK 首先Android的SDK最好提前下好,我是从另一个电脑上把已经下好的sdk复制到D盘Android目录下,这样安装VS2015的时候就不用选择SDK下载了,速度会快点. 安装VS2015的时候最好网络FQ一下,不然有些组件有可能会下载失败.安装的组件我没选Xamarin,这玩意太贵用…

http://www.cocoachina.com/webapp/20150707/12395.html 本文是一篇关于我本人在使用Cordova+Ionic以及AngularJS开发移动App的过程中的经验的总结,它不是一篇基础入门教程,而是和大家探讨一下关于如何更好的使用这些技术开发一个更好的App. 声明:这是一篇中立的文章,我无意于挑起孰好孰坏的争论,这只是一篇经验分享文,至于为什么选择这种技术,因为我会这个,感觉还不错. Cordova.Ionic.AngularJS都是什么? Cor…

    电脑操作系统 - windows 10 IDE - WebStorm 2019 Node v10.15.3 npm v6.4.1 Ionic v3 Angula v5 Cordova 移动设备 - 机型:OnePlus 6 Android 版本: 9 系统: H2OS 9.0.2   安装 Java JDK 8, 并且配置环境变量:  …

安装jdk 在命令下输入java如果没有安装会提示该命令包含于openjdk软件包 sudo apt-get install openjdk然后按下tab会列出openjdk开头的软件包 我这里就选择最新的版本 sudo apt-get install openjdk-8-jdk 网速快的话1分钟就差不多了 .................... 安装完成 试一下(一般是不需要配置环境变量的,安装过程中就已经配置好了) java -version 如果显示版本信息就ok了 androidSDK…

实践分享:开始用Cordova+Ionic+AngularJS开发App http://www.cocoachina.com/webapp/20150707/12395.html…

Cordova 开发hybird App 开发环境搭建 一．一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次手动输入太麻烦而且都是重复劳动,于是你下决心改变这种状况,然后学会了把javac命令写到一个bat文件中,以后编译只需要单击运行即可:然后随着你敲的代码越来越多,而且有了JAVA project概念,于是你手动新建了很多文件夹比如src.bin.lib,你有写了一个bat文件来减少你的重复劳动:再后…

Cordova/Ionic开发的Android APP,需要启用WebView的调试模式,才可以在Chrome浏览器中输入chrome://Inspect,然后使用大家熟悉的开发者工具进行调试.不启用的话,就看不到App中的WebView页面,也没有Inspect链接. 确保Android版本4.4以上 打开scr下的主活动文件,如MainActivity.java,导入名称空间: import android.os.Build; import android.util.Log; import…

cordova / Ionic 开发问题汇总 1. 导入工程的"The import android cannot be resolved"错误解决方法 2. MainActivity] Unable to resolve target 'android-xx' 出现 "Unable to resolve target 'android-XX'",解决办法进入你的android project跟目录,找到此文件 project.properties(或default…

以前公司开发了某手机APP是通过jquerymobile来实现的,发现它对手机上的原生设备无能为力.于是在下一个项目到来之际,通过筛选最终决定使用cordova+Ionic.看起来简单,但是因为他们各自有一些依赖,林林总总,最终涉及的内容便不少了. 如下所示: 环境搭建:window 1.JAVA-SDK 安装配置(版本7以上) 这个没什么难度,到官网下载jdk,然后按照步骤配置环境变量即可.配置完成后,记得校验jdk安装是否成功. JDK安装及环境变量配置 2.Android-SDK 安装配置…

hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cli 2.cordova create hello com.example.hello HelloWorld  //创建 hello:项目文件夹名, com.example.hello:java包名 HelloWorld:app应用安装名 3. cd hello cordova platform ad…

前颜(yan)最近公司有一个项目需求是利用h5进行跨平台开发,这里所说的跨平台开发指的是:将h5代码利用某种方式或工具环境进行打包,最后生成android的apk以及ios的ipa. 本文只讲解android开发环境,等以后有空了再介绍一篇关于ios的. 一.知识讲解本文基于ionic4+cordova构建android应用,首先做一下以下的知识梳理. 1 ionic是一套用于开发混合手机应用的开源h5框架,包含一套适合于mobile application的ui组件库以及相关访问原生设备的na…

命令:ionic platform add android 报错:Unable to start the daemon process…… 解决: 1)添加环境变量[_JAVA_OPTIONS],值:“-Xmx512m”(512m是分配的内存空间,还可以是1024m.2048m等)(*自己测通) 2)网上说在“C:\Users\[USERNAME]\.gradle”目录下(新建或)编辑“gradle.properties”文件,添加(或修改)内容:org.gradle.jvmargs=-Xmx5…

cordova + ionic 使用中碰到的一些问题     No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.解决办法index.html 中添加<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self'…

昨天写了第一篇 <Cordova webapp实战开发:(1)为什么选择 Cordova webapp?>,意料中看到大家对这个主题的兴趣,我新建的PhoneGap App开发 348192525   一下子就快1百人了.本来心想过几天在写第二篇吧,但昨天已在文中说到,如果点赞超过20就开始写下一篇,咱们要说到做到,那就开始第二篇吧.但是第二篇写点什么呢?我看到群中有人问 “ phonegap和cordova是什么关系?”,加入QQ群的时候,也看到一些人写着cordova初学者.正如我也说到,…

准备工作 资源 预装工具 安装bower npm install -g bower 安装ngCordova bower install ngCordova (*由于网络获取资源的原因,后面几次建项目后都无法下载到,自己便复制了原来的ngCordova目录(到YourProject\wwww\lib目录下),发现也是可以使用的) 下载好后,在项目的index.hmtl进行引用: <script src="lib/ngCordova/dist/ng-cordova.js"> 日…

我的ionic实战系列是基于<<Ionic实战>>[美]Jeremy Wilken著-这本书的读书笔记,有诸多借鉴,不详细的地方请参考书籍本身的内容. 1.1技术栈模型 Ionic的工作原理是通过cordova把一个Web应用嵌入原生应用.以下两张图介绍了Ionic的技术栈模型和Hybrid应用和其它类型的应用的区别,一目了然. ionic技术栈模型 比较原生应用.移动端网站和Hybrid应用的架构 原生应用 ios使用Objective-C,或者Swift.Android使用ja…

转自 http://www.itwap.net/ArticleContent.aspx?id=26 来源: itwap.net 作者: 词略 时间: 2015-4-2 16:57:28 (一)Ionic简单介绍:   首先,Ionic是什么. Ionic是一款基于PhoneGap及AngularJS开发Hybrid/Web APP的前端框架,类似的其他框架有:Intel XDK等. 简单来说就是可以将你的Web应用打包发布成IOS/Android APP,并且提供了PhoneGap之外很多强大的…

Ionic是一个前端的框架,帮助开发人员使用HTML5, CSS3和JavaScript做出原生应用. ionic的理念类似前端开发的BootStrap,目标是封装HTML5移动跨平台开发的最佳实践.就像Twitter Bootstrap在前端开发中做的一样. Ionic框架眼下发展非常迅速.我们从2014年3月開始使用,当时是1.0.0beta2,如今已经更新到1.0.0beta10,大概每2个星期会出一个beta版本号,而且都包括实质性更新.Ionic框架非常先进,js部分是基于Angula…

上一篇博客讲了phonegap+cordova+ionic的环境搭建,今天再来分享一篇cordova调用原生API的文章.从技术角度上来讲,这并不是很难,只是有些细节要是没有注意,或者某些步骤不知道的,那么在坑里一时半会很难爬出来.所以这两篇博客旨在帮助小伙伴们节省更多的时间去做其他有意义的事情. 1.新建工程 新建工程和添加平台支持的操作已经在上一篇博客中讲到了, 这里不再赘述. 2.Bower的使用 首先确认是否安装了bower,如果没有安装,打开cmd命名,输入npm install -g…

原文:配置cordova的android开发环境(无android studio) 趁元旦放假想试一下cordova,不想安装庞大的android studio,所以想最小化安装,居然花了一整天的时间才能正常编译cordova工程,记录一下过程,备将来参考. 安装环境:操作系统:windows 10 x64 第一步:安装nodejs,下载最新版本v10.15.0 第二步:设置npm安装源 npm config set registry http://registry.npm.taobao.org…

原文:vs2015 cordova环境安装 1.参照其他高手的来 http://www.songker.com/index.php/post/151.html VS2015安卓开发Apache Cordova环境安装 正常环境下,下面几个环境都安装成功了 jdk-7u55-windows-x64.exe Android SDK Tools Node.js apache-ant-1.9.3-bin 可以利用下面按钮检测缺失项: 注意点: Android Sdk包的下载,有可能老不完全  图中Obs…

本文使用的系统是win10 因为后期需要使用nodejs 所以先把node装好 https://nodejs.org/download/ 下载JDK并配置Java运行环境 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 安装后配置环境变量 如下: 新增JAVA_HOME:(自己的安装路径和版本) C:\Program Files\Java\jdk1.8.0_73 (注意:JAV…

最近学习ionic+nodejs开发混合app中遇到了一些问题,在此总结一下. 开发环境搭建 项目地址 https://github.com/ytudt/nodejsApp 代码和问题都会在之后的学习中持续更新 1.跨域问题: 之前一直想用ionic+angular打包app时代码在客户端,因为客户端js有ajax请求,这样去请求服务器数据时是不是跨域? 在实际调试中后台nodejs起一个服务器 192.168.0.19:3000,然后前端我用sublime的server起一个服务器这样的确是跨…

到<Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?>为止,我们已经大体学会了如何使用Cordova了,那些都是使用Cordova的开发者必备的技能.今天我们要说一下开发者应该具备的一些额外经验,这些经验简单有效,如果希望要更系统更好的方法,那就持续关注本系列文章吧,与敏捷个人一起成长. 本次练习你能学到的 学习如何动态不发布APP来修复bug 学习如何动态增加功能 学习如何躲开苹果的一些严格审核 如何动态不发布APP来修复bug 做过网站的都知道,修复b…