初学ionic--自学整理知识点总结(1)

2: https://ionicframework.com/docs/api/

这个网址我觉得就是对各个组件的api 单独进行更为详细的讲解,针对不同平台下的显示效果以及各属性的高级介绍解析.

3: https://github.com/ionic-team (这个网址就是ionic官方GitHub地址,针对一些ionic版本更新,新的效果使用功能以及bug修复等都能够在这里进行查阅)

4:https://blog.ionicframework.com/

5:https://forum.ionicframework.com/

6:https://ionicworldwide.herokuapp.com/

(以上三个都是比较大型的问答讨论社区,很多百度google到的东西其实都是跳转到这几个链接中的,之所以分享这几个全球的问答社区网址,是因为你在项目初学阶段无论遇到什么问题,在中国的搜索引擎下如百度都是找不到你所需要的结果返回的,不要问我为啥知道... ...这也是比较坑的一点,尤其是会遇到各种版本插件兼容性的问题真是十分头疼,建议初学的话都先使用一个不为最新的固定版本)

二.准备阶段(各个插件工具的安装配置)

1.nodejs的安装: https://nodejs.org/en/ (网址在这边) 正常下载安装就可以,然后通过命令行 node -v验证版本是否安装成功:

2.切换npm源的访问地址的切换(因为国内对于外网的诸多限制,很有可能在你下载npm下包的内容造成访问被墙,或是下载速度过慢的情况,而切换这个访问的网址到国内的镜像源,就可以很好的避免了访问受限和下载时间过长的问题)

你不做更改的访问地址为:  npm config set registry https://registry.npmjs.org/ (这也就是我们说的原始源地址)

更改访问地址后的路径:  npm config set registry http://registry.npm.taobao.org/ (这是国内镜像淘宝源地址)

更改源路径后,要想查证自己所切换的源路径是什么以及是否成功,可以使用命令:  npm config get registry 进行查验：

3.通过npm来安装ionic的指定版本,或当前最新版本(因为之前已经切换了源路径,所以下载速度大概30s~50s就可以完成)

npm install -g [email protected]  (安装指定版本)

npm install -g [email protected] (安装最新当前版本)

 ionic -v (安装完成后的查看版本的命令)

ionic info (查看当前ionic的全部版本信息)

        因为我当前版本是3.12.0 系统会提示是否更新到最新的版本,没必要非要升级到最新版本,因为ionic我在新学的路上感觉版本兼容有挺多坑存在,所以找到一个自己合适的版本先入门到有一定的理解之后,再去研究新版本的更新内容比较好一些.

4.代码编辑器的下载安装(我使用的是VSCode 也可以使用WebStorm啊都可以 但是VSCode更轻量级一些,下载安装也比较方便):

        这是VSCode的下载官网:https://code.visualstudio.com/   下载完成后,有必要的话可以下载一些VSCode的必备插件,例如:vscode-icons,vscode-tslint,Path Intellisense等...(多用于开发效率的提升以及界面的代码美化)

5.AndroidStudio的下载安装,SDK的下载和导入(这里网上很多的教程我就不费力总结了),然后就是android虚拟机Genymotion的下载安装(同样网上有很多的教程,当然你也可以使用真机有线或设置局域网进行无线连接调试手机)

6.Xcode的安装,对ionic的项目打包后再ios环境下进行测试用,Xcode中自带虚拟机,你也可以使用真机测试,但是Windows的电脑就别想了这步就可以省略了,除非下载个MAC的虚拟机,会很占空间也很卡我觉得没必要(这里注意的是当ionic项目打包生成ios平台下的项目后,使用Xcode进行项目的导入,可能会遇到权限的问题而导致无法打开的情况,注意用命令行 sudo chmod -R 777 + 目录地址  来获取文件夹权限)

三.初始项目的构建(官方网址介绍: https://ionicframework.com/getting-started/ )

1.第一步是安装ionic 之前准备阶段已经安装过了的,这步就可以省略

2.第二步是在目标目录下创建工程(官网给出了三种不同的样式, myApp就是项目文件名字):

3.项目创建好之后,在切换到项目目录下启动项目服务:

这里注意的是 输入的是serve而不是 server也不是service... 命令行运行成功后会显示:

运行成功后会自动弹出网页进行界面展示,这里就不用多说了.可以用google chrome开发者模式进行调试，然后这里我最近发现一个问题呀，就是启动serve后,当代码发生改变,或者刷新浏览器时,serve就会断开连接,只能重新运行serve很麻烦也很是不理解... 然后我去上面提到的论坛搜索后最终找到了解决方案,需要依次使用命令下载npm包:npm install @ionic/cli-utils 和 npm i -D -E [email protected] 就能解决掉此问题(真是坑啊)

4.初始化项目后,第一次打开工程的一些包,文件的作用描述:

四.对项目进行平台的添加,以及生成不同平台下的项目进行打包介绍:

sudo ionic cordova platform add ios (添加ios平台,Mac平台下命令需要添加sudo)

sudo ionic cordova platform add android(添加android平台,Mac平台下命令需要添加sudo)

安装完成后可以使用命令: cordova platform (进行检查已安装的平台有哪些)

生成好文件之后,用Xcode打开项目之前,注意命令行获取访问权限:

不获取权限会显示无法打开文件,或是其他一些种种问题,打开之后用虚拟机启动就可以正常运行这个项目了:

      

        以上就是ios的打包全程截图,android端的同理我就不费劲整理了,android端需要注意的是虚拟机版本不能过低,会造成启动ionicAPP应用白屏的情况.以上就是对于ionic的从最开始自学阶段的最最最基础的部分,但是也可能是最繁琐的阶段了吧,因为自己没有大前端的基础,所以可能别人和我同样刚接触的人会有很多不明白的地方,自己整理成博客的原因就是自学过程的一种知识点坑点的总结汇总,方便以后自己查阅,打算每篇已经发表的帖子以后遇到问题也能够搜集到其中来,整理的尽量详细点也是希望能给别人一点微不足道的帮助,这篇文章就是对于基础的框架以及环境的下载配置,还有一些官方资料网站的介绍,还有一个项目的开始到运行再到打包到不同平台来运行测试的部分,下篇博客开始会进行一个简单项目App的功能开发.