Ionic-start

程冥夜
2023-12-01

官网

安装

首先需要安装好nodeJS 和 npm.
其次安装cordova和ionic(需要翻墙)

npm install -g cordova ionic

安装好后, 在全局范围内都可以使用cordova 和 ionic的命令了.

创建Ionic项目

参考官网

使用官方模板

官网提供了3种template可以使用.

//创建空模板
ionic start projectName blank
//创建具有tabs样式(具有上下页头)的模板
ionic start projectName tabs
//创建具有sideMenu样式(边上有菜单列表)的模板
ionic start projectName sideMenu

自定义自己的页面

然后再去配置自己的页面,路由,过滤器等

#

下载tabs项目过程:
1. 下载ionic-app-base的master分支
2. 下载ionic-starter-tabs的master分支
3. 更新config.xml
4. 初始化cordova项目
5. 提示启动项目的快速步骤

cd myProject
//用Sass启动这个项目
ionic setup sass
//在浏览器中开发,可以实时加载
ionic serve
//添加一个平台<ios或安卓>
//ios开发需要OS X
//Android 请看全部的安卓安装介绍:  https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

ionic platform add ios [android]
//构建APP
ionic build <platform>
//simulate模仿app
ionic emulate <platform>
//在设备上运行app
ionic run <platform>
//用ionic打包service, 打包一个app
ionic package <MODE> <PLATFORM>
//更多的help
ionic --help 
ionic docs

运行

用ionic 工具去构建, 测试,运行自己的app或是直接用Cordova.
emulate : 仿真,模仿

//查看项目添加的平台列表
ionic platform list

构建Android

Android部署分真机和虚拟机,在部署之前需要安装JDK、Android SDK到开发环境中.
添加 JDK的JAVA_HOME 和 Android SDK的ANDROID_HOME 到环境变量中去,并把 Android SDK 安装目录添加到Path中。
配置好之后打开命令行, 输入命令adb version, 看返回是否正确:

cd projectName
ionic platform add android
ionic build android
//模拟器运行
ionic emulate android
//连接上手机运行,把手机连接到电脑,并开启usb调试模式,Ionic开始编译项目生成apk并远程安装到手机上后自动打开应用
ionic run android

构建IOS

ios部署需要一台mac电脑,在mac电脑上面根据本篇ionic的安装过程安装环境之后,添加ios平台到项目,因为apple开发的证书会限制我们在没有申请购买apple账号的情况下,使用虚拟机来部署我们的应用.

在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器的,执行命令:
npm install -g ios-sim

cd projectName
ionic platform add ios
ionic build ios
ionic emulate ios

如果采用的是模拟ios运行:
首先编译项目,编译完成之后用Xcode打开开发目录下platform->ios->myIonic.xcodeproj的项目文件,Xcode中选择要运行的虚拟机版本并执行快捷键cmd+R运行虚拟机,虚拟机打开后会自动运行你应用。

如果采用ios真实环境运行:

ionic run ios

运行技巧

部署到移动端后, 我们也可以开启livereload:

Android

ionic run android --livereload -c -s

这是android的调试模式,无论在虚拟机上还是在手机上都可以实现livereload,不用每次开发完成编译再部署!
-c是开启客户端日志输出,-s是开启服务器端日志输出。

IOS

ionic run ios --livereload -c -s

只要等他提示Build Success之后,我们在xcode上面运行虚拟机或者真机也可以实现livereload。

打包发布

Android

ionic build android -release 

找到www/platform目录下生成的apk包,此时的apk还不能被安装到手机上,还需要一步签名操作.
签名参考:
博客

IOS

ipa文件的打包, 需要现在apple develop网站上注册一个账号,在网站申请生产环境的证书导入到你的开发机中和开发机绑定才可以使用xcode导出,详情参阅:
博客

别人的经验

Ionic作为一个hybrid应用的开发框架总体来说还是很不错的,因为它的开发效率很高,并且可以跨平台的发布这两点可以让很多人心动了。
另外Ionic在实际应用中的表现情况是这样的,在IOS平台中运行效率和原生的效果非常好,但是在Android中的就不是太理想了尤其是Android的低端机。

下一步

ionic 建议从头开始看Docs, 然后大致了解下ionic的CSS和javascript组件.
确保加入论坛, 在下面键入你的email获取ionic的更新.

 类似资料: