版权声明:作者已开启版权声明,如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/84573476
一.使用Ionic CLI进行项目的初始化构建
1.构建项目
- 执行
npm install -g cordova ionic
安装cordova和ionic插件 - 创建一个APP
ionic start 项目名 tabs
- 其中tabs是图标形式(下方图标)
ionic start 项目名 blank
创建空APPionic start 项目名 sidemenu
创建带有左侧menu的APP
- 启动项目
- 进入项目
cd 项目名
- 启动项目
ionic serve
- 默认启动项目在:
localhost:8100
- 进入项目
二.Ionic CLI初始化失败时的另一种构建项目方案
- 前提:已经通过执行
npm install -g cordova ionic
完成安装cordova和ionic插件(Ionic环境),但是由于没有网络的原因没法对项目进行初始化 - 事先创建启动项目,以备不时之需~
三.VSCode打开项目插件初始化设置
- Ionic目录结构
- .sourcemaps生成sourcemap相关文件,对于后期js和css调试相当方便
- hooks文件夹下是cordova的说明文档
- node_modules文件夹下是npm安装的依赖包
- resources文件夹下是文件的启动图标、启动图、ios和android分开放等等
- src文件夹下是项目的源代码
- www文件夹是整个项目生成之后的文件夹,供浏览器使用的,也可以放置到服务器中
- .editorconfig是编译器的配置文件
- .gitignore配置git哪些文件不被提交
- config.xml进行整个ionic项目的配置(配置项目的入口文件、是否支持跨域、对应的资源名称等等)
- ionic.config.json另外一个ionic项目的配置文件,基本上不会用到
- package.json是npm加载的所有的包
- tsconfig.json是整个typescript相关的配置
- tslint.json配置检测规则,用于代码的检测
- VSCode快捷键
ctrl+~
打开终端Terminal
- 相关插件
- Project Manager:项目保存插件
- Bracket Pair Colorizer:括号增强插件(配对的括号之类的符号进行彩色化标注)
四.编译项目的方法并在IOS环境下体验
- 执行
sudo ionic cordova platform add ios
添加ios平台【添加平台会多出一个platforms的文件夹,其中platforms.json文件中会多出一个ios平台】 - 修改生成项目文件的目录权限:
chmod -R 777 项目文件夹名
【否则无法打开对应打包的项目】 - 使用xcode打开ios文件项目,点击启动,运行项目
- 真机测试与发布需要Apple开发者账号,但是IOS9以上的用户可以不需要
- 如果想把项目共享给别人看
- 普遍操作:将项目上架,等待审核,等待上传到Apple Store,到Apple Store下载查看
- 快速操作:使用ionic view【手机下载ionic view,将自己开发的项目上传到ionic view中,别人登录时刷新就可以看到对应项目内容,可以快速发布与查看,通常用作演示】
- 常见问题处理:ionicframework.com/docs/intro/deploying
五.编译项目的方法并在Android环境下体验
-
执行
sudo ionic cordova platform add android
添加android平台[可以使用sudo ionic cordova platform ls
查看安装过的平台] -
执行
sudo chmod -R 777 项目文件夹名
修改项目目录权限 -
直接使用Android Studio进行连接调试
-
打包成apk拖入后进行测试
-
支持的版本:cordova.apache.org/docs/en/latest/guide/platforms/android
六.编译项目的方法并在浏览器环境下体验
- 执行
ionic serve
启动项目 - 通过Chrome浏览器可以设置对应的手机型号及浏览器信息进行项目查看及调试
七.编译项目的方法并在微信环境下体验
- 执行
ionic cordova platform add browser
添加浏览器平台(为微信使用) - 执行
ionic cordova build browser
编译broswer项目生成www项目,之后部署platform/browser/www文件夹到对应的服务器,其实就是一个静态站点的部署过程 - 注意微信的标题title问题:微信上方还有title,下方还有title,需要对title进行相关处理