ionic 2.x の初见与坑

<h3>1、简单介绍:</h3> <p >博主是从来没有碰过angularJS 1.x与ionic 1.x的初学者,面对它们两者同时进入2.0时代(隔壁vue.js也进入了2.0时代),感觉十分有兴趣去捣鼓这两个框架,对于H5时代,与时俱进是一名合格的开发者必要的素质,所以在2.0时代,利用自己很多的时间来学习这两个框架。同时在捣鼓环境的时候遇到一些坑,希望在一点一点的学习中把自己遇到的坑,和解决方式拿来和初学者们进行分享,也欢迎提出我的问题,可发邮件至: STOKID@126.COM 邮箱 。</p> <h3>2、搭建环境:</h3> **必要神器:Node.JS ** Node.js 大名我想任何开发者都有所耳闻,我们这里不深入研究它,它现在是一个工具,我们只需要使用它即可。在官网http://nodejs.cn/ 进行下载,这里推荐下载最新特性的稳定版本6.2.0【以后版本更新可能更高】,原因也不言而喻,因为只有新特性稳定版才有对最新的语言的支持。在下载过后环境变量中已经填充系统path,安装好后我们可以使用cmd进行后续操作。 必要配置:JDK环境 配置%JAVA_HOME% 这里就不再阐述,百度一大堆,而且实在不会就用绝对路径吧,毕竟,一般配置了很少再升级版本的。 重要配置: (1) ANDROID_SDK环境:%ANDROID_HOME% 指向本地的SDK地址 ,这是完成项目build的重要条件。 (2) IOS_XCODE 环境:由于博主是用的win,没有使用mac(穷死),所以对于xcode环境只能说略知一二,搭建主要还是和搭建ios的开发环境一样就可以了。 npm配置特殊说明:因为国内墙的限制,github在某些时候网速特别卡,所以性子急的同志们可以在cmd上面使用国内的地址: npm install -g cnpm --registry = https://registry.npm.taobao.org 这里点击回车,遇到我们第一个坑,初学者很多人都会在这里调试半天,废话不多说直接上图看明原因:

安装国内镜像输入问题.jpg

<b>正确的写法:要去掉这两个空格才能成功完成,如下:</b> <b>npm install -g cnpm --registry=https://registry.npm.taobao.org</b>

这里博主因为使用了蓝灯,这样的免费(因为穷)工具,土豪推荐天行与自由门翻墙,速度快效率高,所以可以直接npm【主要是npm加载的时候动态效果直观,cnpm在后面build项目的时候,一直显示“......”,初学者如果性子不好很容易直接关掉,导致没有建成项目】 <h3> 3、创建项目:</h3><b> 下载ionic :</b> 在cmd里面运行 npm install -g ionic 执行下载等待许久便好了,这里安装好后,在控制台输入ionic会显示ionic 不是内部或外部命令 这里初学者一定要注意,保持镇定,只是系统默认的环境问题,多重复安装即可,如果反复出现都不行,建议重启或者重装Node.js再进行下载。

<b>下载cordova:用于项目build和调试程序必需品</b> 同样运行npm install -g cordova指令执行下载并等待

<b>在自己的某个项目磁盘下创建自己的目录</b> mkdir workspace 然后输入 cd workspace 到达你的项目位置

<b>让系统自动创建项目</b> ionic start xxxx --v2 这里的“xxx”是你项目的名字,这个时候在项目建立的时候相当漫长,请耐心等待。这里会遇到以下错误提示:

python版本问题.png

是的,你没有看错,为了支持gyp,我们需要更换python版本,博主开始用的是3.5.2版本,按照提示版本应该大于2.5.0小于3.0.0于是乎在360管家里面查了一下:

下载并安装python 2.7.jpg

博主电脑是64位的,32位的下载底下的就可以了,下载完成后,自动填系统path,这样再次执行start,就可以看到成功创建项目:

成功完成.jpg

<b>下载过后的项目目录</b>

项目目录.png

现在这里是个项目模版,最基本的ionic2的项目元素都在里面,但是需要运行项目,还需要做后续的事情

<h3>4、运行项目</h3><b>配置项目:</b> IOS配置:在项目目录下输入ionic platform add ios等待许久完成后ionic build ios项目build完成然后 ` 即可运行项目。 Android 配置:在项目目录下输入 ionic platform add android 等待许久后完成,然后:ionic build android 即可获得apk路径:

build成功后获取自己的apk.png

拿到这个debug的apk可以在自定义的模拟器上运行,查看效果。

<b>项目运行:</b> 在项目目录下输入ionic serve等待完成便可弹出浏览器,此时在浏览器访问的页面即是当前项目的页面,推荐使用谷歌浏览器的开发者工具预览。 在项目目录下输入:ionic emulate ios或者ionic run android在默认模拟器上进行运行,运行效果:

运行效果.png

<h3>5、IDE选择:</h3><b>(1)notepad++或者editplus</b>

notepad.png

选择这些敲代码简直就是封神级别的人物,很多都需要手写,除非对代码滚熟,不然不建议用这类编辑器写,editplus由于更新比较慢,而且国人喜欢用破解版本,所以很多提示没有,但是轻量级别的应用可以使用它来编辑。 <b>(2)eclipse、hbuild</b>

eclipse_hbuild.png

键位相同,插件相同,所以将两者放在一起,如果单纯从应用编程来说,使用HBuilder要好些,因为它的中文,国有化,免费都很不错,可惜的是,其eclipse插件需要网上下载,这又不得不请出我们的神器——翻墙软件,所以在不嫌麻烦的情况下可以使用。【题外话:MUI框架在Hbuild上开发效果很棒,博主体验过20分钟开发出一个首页出来,效果也比较流畅,可惜的是MUI框架对于跨域的问题迟迟得不到官方的说明,所以这个框架还待有考虑】 <b>(3)visual studio code</b>

visual studio code.png

微软的IDE,很实用,对于TypeScript语法天生的支持,在使用的时候,非常cool,蓝黑色的界面,扁平化的主题,界面很是优雅,非常讨人喜欢,唯一不好的地方,没有自动补齐以及我的个人习惯问题,不过对于VS的开发人员强烈推荐使用它来开发ionic2.x的项目。 <b>(4)sublime_text3</b>

sublime_text.png

不用多说,前端开发者专用的IDE,它从一开始就有着强大的插件支持,强大的动态插入DOM功能,界面主题可依照个人喜好进行调整,对于当前很多开发人员是非常友好的IDE,强烈推荐,可惜的是,IONIC2还是有部分标签不支持,可能是插件还没有更新,期待以后更新吧。 <b>(5)IDEA&webstorm</b>

idea.png

强大的IDE,对很多语言支持,特别惊喜的是,支持全部的新API,特别值得推荐,如果你是做JAVA的,自然不言而喻,这款IDE操作起来十分熟悉,强烈推荐!

<h5>写在结尾的话:每个人对新东西都抱有好奇的精神,对于这样的精神应该发扬光大,学习,思考,从基础理论到实际项目,从零开始,零到一的质变,成长。这便是学习新知识的动力所在,学的越多,出的问题越多,疑问也越多,思考也越多,这便是从咸鱼到大神的道路。路在脚下,道在远方……</h5>

<b>坑的补充:http://www.jianshu.com/p/6f236236bba6</b>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张戈的专栏

WordPress发布文章自动同步到新浪微博(带特色图片)

WordPress 发博客后自动同步到新浪微博,这是我从无主题博客看到的方法,一直沿用至今。感觉对博客宣传和提升“逼格”都有显著的作用: ? 一、老版代码 先来...

5427
来自专栏FreeBuf

看我如何利用开发人员所犯的小错误来盗取各种tokens

实际上,在日常的开发过程中,开发人员很有可能会犯各种各样貌似“无伤大雅”的小错误,单独一个这样的小错误可能并不能搞什么事情,但如果将这些错误串起来形成一个漏洞链...

2755
来自专栏LEo的网络日志

coding感想(三)

3888
来自专栏大魏分享(微信公众号:david-share)

厉害了:全数据中心密码管理系统的建设--构建数据中心一体化运维平台第三篇

前言:本文中所引用的文档均为Redhat 技术专家杨金锋所提供。此方案,大卫也多次请教红帽技术专家陈镇。 密码管理系统的必要性 在大多数客户数据中心内部,密...

5687
来自专栏无题

秒杀系统解决方案

从架构、产品、前端、后端四个层面针对秒杀场景(可以扩展到所有高并发场景)分别总结了一些解决方案。 要点总结: 1.架构:扩容,业务分离,数据分离 2.产品:下...

4854
来自专栏逸鹏说道

亿级Web系统搭建:单机到分布式集群

当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题。为了解决这些性能...

4727
来自专栏CSDN技术头条

亿级Web系统搭建:单机到分布式集群

当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题。为了解决这些性能...

3046
来自专栏ThoughtWorks

大型项目程序配置管理演化之路|TW洞见

今日洞见 文章作者、图片来自ThoughtWorks:窦衍森。封面图片来自网络。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司...

3436
来自专栏软件测试经验与教训

用例和bug描述规范参考

3505
来自专栏FreeBuf

开发者误读芯片厂商调试文档,导致主要操作系统均出现新内核漏洞

美国计算机安全应急响应中心(以下简称“CERT”)日前发布公告称,Windows、macOS、Red Hat、Ubuntu、SUSE Linux、FreeBSD...

1205

扫码关注云+社区

领取腾讯云代金券