直接上答案，如果出现这个错误，直接在component里添加一行代码： import { FileOpener } from '@ionic-native/file-opener'; @Component
： ionic start --help 常用的命令有(不区分大小写)： ionic Start ionic Serve ionic Build ionic Emulate ionic Run ionic...当出现下面内容时，说明项目创建成功。 ?...成功提示 其中，我们可以cd myDemo进入到项目，然后根据上图，敲入命令在浏览器预览： ionic serve 也可以两步并作一步执行： cd myDemo && ionic serve 命令执行完...成功运行界面 如果你的是苹果系统，装了xcode，可以敲入以下命令直接在真机或模拟器中运行。...，有兴趣可以看此文： http://www.jianshu.com/p/f508b3e2ecc7 8、建议使用chrome调试 调试Web时，调出【开发者工具】，选【终端】模式，以更好查看应用效果，在
UI选项卡 所以我们在cli命令行创建一个基于选项卡模版的应用： ionic start appetite tabs 等项目创建成功后，我们执行下面的命令： cd appetite && ionic serve...便会在浏览器看到运行起来的页面： ?...为了入手简单点，先不使用懒加载，于是使用命令行创建页面时加上--no-module参数： ionic g page person --no-module 页面生成后在app.module.ts里添加配置...如果都找不到，就用浏览器的默认字体显示你的网页 2. 留意到UI上有这样的颜色说明： ?...ion-header>标签添加该class，同时加上no-border的指令去掉底下的border线： 再次查看浏览器运行界面
本文收集一些遇到的问题及其处理方法： Console.log 不输出 最近升级了Ionic 2到正式版，发现console.log输出的内容不会显示到命令窗口了，这时我们修改一下package.json...就行： 修改pagckage.json，如下： 将 "ionic:serve": "ionic-app-scripts serve" 替换为： "ionic:watch": "ionic-app-scripts...build", "ionic:build": "ionic-app-scripts build", "ionic:watch": "ionic-app-scripts watch"...@latest --save-dev 错误：Error: listen EADDRINUSE 0.0.0.0:53703 这有可能是端口53703被占用了，知道该怎么解决了吧。...如何使用ionic命令时使用代理 在使用ionic命令创建工程，或其他需要联网的操作时可能出现网络异常。
浏览器运行调试 cd myApp ionic serve 2..../www => 浏览器运行调试时自动生成 config.xml => 配置文件 ionic.config.json => 上传到 ionic.io 会被使用 .tsconfig.json & tslint.json...常用命令 打印出Ionic运行环境信息 ionic info 更新Ionic到最新版本 npm install -g ionic@latest 生成新的page、provider等 ionic generate...[] [] []: e.g. component, directive, page, pipe, provider, tabs 在浏览器中运行调试，可打开iOS、...Android、Windows3个界面 ionic serve --lab 生成一个平台图标、启动画面 ionic cordova resources ios ionic cordova resources
cd ionic-auth ionic serve 这个命令默认打开浏览器的 http://localhost:8100。...使用 Ionic serve 命令的特点是它会在浏览器中显示编译错误，而不是（有时会隐藏）在开发控制台。...LoginPage ], providers: [ OAuthService, ... ] }) 运行 ionic serve，确认 LoginPage在 app 首次加载后可以展示出来...为了查看应用程序在不同设备上的效果，你可以运行 ionic serve --lab。--lab 标识会在浏览器中打开一个页面让你查看在不同设备中的效果。 ?...当出现提示时输入 "y"，按回车。 TIP: 我发现在模拟器中运行应用程序时的最大问题是键盘很难弹出。
cordova 创建项目 ionic start myApp tabs start 命令代表创建新app项目....myApp 是新项目的工程及文件名 tabs是采用提供的模板类型 ionic提供了一些模板 tabs sidemenu blank super tutorial 运行项目 ionic serve...运行效果 这个运行是在浏览器中查看到的效果。...还是有错误 还是有错误，在执行cordova platform add android --save时错误了， 关于cordova 的操作指令可以查看https://cordova.apache.org...我们来看下ionic项目文件 ? 和我们的angular项目很相似 小结 ionic框架使我们构建手机网站更加便捷，提供强大的ui组件库。
创建Ionic项目 $ ionic start MyIonic2Project tutorial --v2 使用 start 命令，MyIonic2Project 这是项目名，tutorial是模版名，...如果不指定该参数则默认使用tabs 模版，--V2说明使用ionic2。...安装更新cordova 错误依旧，加上参数--verbose ionic start MyIonic2Project tutorial --v2 --verbose 发现需要安装git和python2，...创建项目成功 测试运行项目 进入项目目录 cd MyIonic2Project 启动 ionic serve 启动过程需要一点时间，如下图所示： ?...运行效果
网页测试 运行命令即可： weex run web 或者npm命令运行： npm run serve 2....weex platform add android 一直等待下载安装完成，就会发现platform目录下多了个android的项目目录，然后执行： weex run android 然后可能会报如下错误...weex ionic weex ionic 2. UI weex好像自身不带UI框架，但是可以很简单地集成weex-ui，而ionic自带UI，两者打个平手吧。...此外weex基于vue2+，ionic基于angular2+，都是比较热门的框架，所以组件这方面两者都不用愁。 3....页面展示 weex有单页和多页面方式，直观就是一个webview显示所有页面，另一个是多个webview各显示一个页面，而ionic只有单webview显示，所以从某种情况来说，多webview时，weex
---- Q: 在实机上使用 livereload 功能时出现空白、连接失败等情况。...A: http://ionicons.com ---- Q: 在 ionic platform add xxx 时卡住 A: 挂 V** ，或者丢着睡一觉（不确定是不是网络原因，就遇过两次没深究...A: 超级弱逼的模态框，因为 uirouter 的限制，给它转状态非常不方便。确定只需要一个页面就能完成的操作才用他。下一 Q 提供个解决办法。...在需要关闭时，后来加入导航栈的任意 view 中设置 backView 为记录下来的 view ，然后 back 。...serve 或在实机调试时开启了 livereload 功能时的跨域问题 A: 道理还是因为这两种状态下， APP 实际是在访问电脑上的一个网站，任何指向其他地方的链接都是跨域。
2、集成百度语音合成和百度语音识别。 3、集成腾讯闲聊能够语音与计算聊天。 4、实现扫一扫，能够识别二维码和条形码。 5、nfc读读取卡标签（Android串口开发）。...2、安装Ionic 上面步骤成功之后执行npm install -g cordova ionic命令安装cordova和ionic，安装完执行ionic -v，返回版本号表示已安装成功。...创建之后可以使用ionic serve命令查看效果，使用ionic build 会生成www目录，然后我们www的目录下文件放到服务器上的IIS就可以使用手机访问。...2、创建页面（组件） 我使用命令创建about页面，会帮我们生成一下文件。 1.创建命令：ionic g page 页面名称。 2. app.module.ts 引入声明组件。...新建项目：ionic start 项目名称 --type=ionic-angular 运行项目：ionic serve 发布：ionic build Android打包 ionic cordova platform
【注：博主这次使用的是国内镜像】 1、ionic2创建项目的坑： 这是在使用ionic start xxx --v2 的时候下载好对应的目录的同时，在项目建成的最后，会显示如下的错误提示...： ionic start无法生成项目.png 这样的错误博主之前从未遇到，一时间慌了神，再紧接着去查看项目log： 错误log.png 于是博主积极的百度与谷歌，想弄清楚问题的原因...于是在项目根目录下运行指令：cnpm install --save如果没有报错，说明项目可以正常运行，执行ionic serve来看看自己建成的项目。提议：最好不要在系统盘上建立自己的项目！... 2、ionic2第一次build项目的坑：在第一次build项目的时候，会从maven上下载相关的cordova的lib和gradle的lib，这个时候会因为国内的墙的问题...4、关于cordova版本的坑：在新的node版本下，cordova已经更新到6.5.0版本，这个时候在ionic 项目创建的时候系统会提示： ionic运行时提示.png
创建Vue项目并运行 使用Vue来创建项目： npm install -g @vue/cli vue create envt-iot-overall 这是Vue很基础的东西，安装依赖并运行看下： cd...envt-iot-overall npm i npm run serve 此时可以看到项目能正常运行的，一般来说，应用都需要和路由打交道，所以添加下路由： vue add router 安装Ionic依赖...中添加配置： import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic); 再次运行...，没有告警也没有错误提示，但是还是空白页面，调试页面发现有这样一个样式： html:not(.hydrated) body { display: none; } 我也不知道这是干嘛用的，改了再说...true, cssClass: 'custom-class custom-loading' }); loading.present(); } } 运行
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使用...Ionic 在发布了1.0版本以后，被越来越多的关注和支持，社区也十分的活跃。本文将继续上篇，使用Ionic 框架来开发应用。 1....2. 安装 Ionic：http://www.ionicframework.com/getting-started/ 执行命令。...ionic start DeliveryApp blank ? 4. 运行 ionic serve 看一下在网页中的模拟效果。 ionic serve ? 5....ionic emulate ios ? 到这里 ionic 就搭建完成了。 下一步下载 WebStorm，使用WebStorm作为开发的IDE吧。 6.
ionic start ionic2 --v2 创建一个ionic2 项目 ionic g page myPage 创建一个页面 ionic serve 启动ionic2项目 ionic platform...项目的根目录下面 ionic build ios 编译ios项目并打包ios ionic build 在ionic2 项目中生成一个www的目录里面存放编译后的代码，适用于ES5(浏览器可读的代码) ionic...info 查看ionic2项目中添加了那些平台 ionic g page myPage 添加一些页面 比如我们通过命令行创建一个页面。...platform 命令会为你的应用增添新的平台，运行ionic platform add $platform 增加一个特定平台，这里的$plateform是一个假定参数，可以替换成ios或者android...ionic serve 可以为app分支和测试提供一个本地开发服务。
2 APP 反复练习，应该是很熟悉了： ionic start Ionic2RestAuth --v2 我习惯上会先启动看看，确保项目创建成功： cd Ionic2RestAuth ionic serve...serve --lab 整个功能界面应该是这个样子的： ?...Rest API 功能界面 五一更一发，更多内容请查看百度阅读： Ionic 2 实例开发 ---- 序 Ionic 2 安装 环境安装 创建Ionic项目 测试运行项目 Ionic 2 项目结构...总结 Ionic 2 添加页面 创建页面 创建附加页面 使用 Ionic 2 开发Todo应用 0 开始之前 1 创建新的Ionic 2工程 2....一些更新命令 错误：Error: listen EADDRINUSE 0.0.0.0:53703
下载后点击下一步一步步安装，安装完nodejs npm也同时安装完成 （2）新建ionic 文件夹，并在控制台进入此文件夹 假如在e:盘中建个ionic的文件夹，敲cmd打开控制台...，输入e:回车，接着输入cd ionic,进入ionic文件夹 （3）安装ionic 输入命令npm install -g ionic@beta 我的电脑这步怎么都安装不成功...，在网上查找，安装ionic之前先输入命令npm config set proxy null （4）在ionic文件夹中start ionicdemo2, ionic start...ionicdemo2 --v2 ( 5 ) 然后启动模板页要在控制台上进入 ionicdemo2 输入ionic serve ionic $ q 关闭服务 如果在ionic的文件夹中没有...serve启动的项目与ionic文件夹中不一致，原因应该是pages里面的与www里面的文件不一致，重新ionic start ionicdemo1 --v2 建个文件夹试试 (adsbygoogle
HTML5手机APP开发入门(2) 课程内容 使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作，有三个页面: ListPage，DetailPage，AddItemPage...创建完成后 运行一下看看 注意：这里又有可能出现很多error，warn，一般都是网络的延时造成的；还是得FQ。...$ cd contact-app $ ionic serve 注意：这里有一个bug This error is caused by incompatibility between TypeScript...and Angular and will be resolved with the next Ionic2 release (beta.4) because the master is already...运行结果如下 ? 做一个新建联系人的page，单击New button时页面导航到新增页面 打开cmd 执行添加页面的命令 $ ionic g page AddItem ?
0 开始之前 通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的机器上。...要做到这一点，您需要运行以下命令： ionic start ionic2-tutorial tutorial --v2 现在您的应用程序将自己开始建立。...为运行后续的命令，你应当将项目目录作为当前工作目录： cd ionic2-tutorial 简单瞟一眼应用效果，使用serve命令： ionic serve 上面也说了，这些命令应该在当前项目目录下执行...因此我们先来看看Ionic 2中是怎样的： <!...使用类型的好处是给你的应用程序增加了错误检查和一个基础水平的测试——如果你的pages数组被传入了一个数字，那么你的应用将被中断，而这将直观的去了解和处理。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
