Ionic项目开发环境初始化

版权声明:作者已开启版权声明,如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/84573476

一.使用Ionic CLI进行项目的初始化构建

1.构建项目

  • 执行npm install -g cordova ionic安装cordova和ionic插件
  • 创建一个APPionic start 项目名 tabs
    • 其中tabs是图标形式(下方图标)
    • ionic start 项目名 blank创建空APP
    • ionic 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进行相关处理

猜你喜欢

转载自blog.csdn.net/qq_34829447/article/details/84573476