ionic3开发笔记（连载）

VSCode扩展

• vscode-icons
  用于项目中文件类型显示对应的图标，提高文件定位的效率
• TSLint
  the linter for the TypeScript language
• Path Intellisense
  用于提示导入文件时候的路径
• ESLint
  JS代码的规范检测
• beautify
  进行代码的格式自动美化
• Project Manager
  项目管理
• Bracket Pair Colorizer
  括号增强功能
• Document This
  生成注释的VSCode插件

Android开发环境安装

• Android Studio 版本2.3.3
• Standalone SDK Manager
  1. 用于管理与更新本地的SDK
  2. 需要自己解决网络的问题
  3. /Users/YourAccount/Library/Android/sdk/tools MAC平台路径
  4. C:\Productivity\android-sdks\tools Windows平台的路径

Android模拟器GenyMotion安装

免费的，去官网注册一下就可以

Xcode简介与使用注意点

IOS平台的开发打包工具

• 只可以在Mac平台下使用
• 如果你需要打包发布（指发布到AppStore），系统和Xcode就不要安装beta版本
• 注意目录的权限问题 chmod -R 777

Ionic 使用的TypeScript语言

V2.3之前使用的是javascript，V2.3之后使用的是typescript

开发环境初始化

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

初始化命令行
1. install ionic
npm install -g cordova ionic
2. start an app
ionic start myApp tabs
3. run your app
cd myApp
ionic serve
4. supercharge your app
ionic link
建议使用tabs进行项目的初始化
--type ionic1
注意是ionic serve 不是ionic server
market.ionic.io/starters/

• Ionic CLI初始化失败时的另一种构建项目方案

确认安装了ionic环境
下载文件夹
直接启动

• VSCode打开项目插件初始化
• 编译项目的方法并在IOS环境下体验

sudo ionic cordova platform ls 会列出当前已有哪些平台
sudo ionic cordova platform ios
注意获取目录权限的问题
sudo chmod -R 777 项目文件夹名
真机调试与发布需要Apple开发者账号
IOS9及以后版本，开发与测试不需要付费苹果开发者账号

• 编译项目的方法并在Android环境下体验

ionic cordova platform ls
ionic cordova platform add android
可能会出错，墙的原因，官方解决方案：
npm install -g @ionic/cli-plugin-proxy
sudo chmod -R 777 项目文件名
windows下用管理员身份运行
项目打开后的构建也可能遇到网络的问题
直接使用android studio进行连接调试
打包成apk拖入后进行测试
支持的版本

• 编译项目的方法并在浏览器环境下体验

后面的开发、调试都在浏览器下进行
8100端口占用的问题

• 编译项目的方法并在微信环境下体验

ionic cordova platform add browser
为后期微信发布做准备
注意微信的标题title问题
ionic cordova build browser
部署platform/browser/www文件夹到对应的服务器，其实就是一个静态站点的部署过程