Ionic-wechat项目边开发边学(一):环境搭建和创建一个项目
2024-08-25 03:02:10
之前学AngularJS,教程过了一遍觉得很简单,但真正写几个Demo就错误百出,一个小小的功能要折腾很久。所以这次学Ionic,准备以开发一个项目为切入点去学,那么问题来了,开发什么项目呢?
纠结了10秒,还是模仿微信吧^_^,大体列一下要实现的功能:
- 界面要像,呵呵
- 聊天消息列表,查看对话内容,来了消息推送提醒
- 通讯录展示,好友搜索,右侧字母快速索引
- 朋友圈展示,发朋友圈消息
- 扫一扫, 摇一摇功能
- 设置功能,设置消息提醒方式,设置聊天背景,关于等
之前根本没接触过上层应用这块,这些功能有点够呛,希望能坚持下去,把这个项目完成好,把博客写好,与各位共勉,加油!
摘要
本篇文章主要介绍一下Ionic,开发环境的配置,以及创建并运行一个官方的example
项目地址
Ionic介绍
Ionic是一个基于Cordova漂亮,开源的前端SDK,用web技术就可以开发跨平台移动app,它支持在线拖拽生成界面(ionic creator),并可以免费下载生成的代码。更多介绍
开始之前我觉得最好具备以下几点知识:
- HTML5,CSS3和Javascript三剑客
- AngularJS
- NodeJS
- 响应式布局
- Linux(我是ubuntu14.04)
环境搭建
安装NodeJS
- 直接在官网下载二进制包,并解压
$ tar -xvf node-v4.0.0-linux-x64.tar.gz
- 增加软连接
$ sudo ln -s ./node-v4.0.0-linux-x64/bin/node /usr/bin/node
$ sudo ln -s ./node-v4.0.0-linux-x64/bin/npm /usr/bin/npm
- 测试
$ npm -v
$ node -v
安装android开发环境
- 安装JDK
- 安装Android SDK,当然要FQ啦~
$ tar -xvf android-sdk_r24.4.1-linux.tgz
$ cd android-sdk-linux && tools && ./android
下载API22和默认勾选的项目(下载这个貌似不要FQ,我关掉这个能全速下载)
- 添加ANDROID_HOME和adb路径, 打开
~/.profile
,添加两行:
export ANDROID_HOME=~/usr/android-sdk-linux
export PATH=$PATH:${ANDROID_HOME}/platform-tools
- 创建一个AVD(建议使用Genymotion,原装的太太太卡),运行
./android-sdk-linux/tools/monitor
- 安装Ant
- 给大家看一下我最后的
~/.profile
文件
安装cordova和Ionic
安装Cordova
$ npm install -g cordova
安装Ionic
$ sudo npm install -g ionic
创建一个项目
$ ionic start myApp tabs
创建了一个myApp项目,使用了tabs模板,另外还有两个模板blank
和sidemenu
添加平台并编译(要添加ios,直接add ios)
$ cd myApp
$ ionic platform add android
$ ionic build android
在本地浏览器测试
$ ionic serve
打开http://localhost:8100/
在手机测试,连上adb(或者运行Genymotion),再运行下面命令
$ ionic run android
在模拟器测试(不建议使用,AVD太太太卡)
$ ionic emulate android
ok,这篇就写到这里,下一篇项目正式开始
最新文章
- 用WinForm写的员工考勤项目!!!!!!
- Python之路----------内置函数
- JavaScript实现简单的双向绑定
- DrClient 校园网客户端破解
- Spring注解@Scheduled定时任务
- 使用ContentProvider管理多媒体-----向多媒体数据中添加数据
- javascript设计模式-外观模式
- Qt 5 在Windows下 出现QApplication: No such file or directory 问题的解决办法
- WebService开发常用功能详解
- Eclipse 编译StanfordNLP
- c++优先级
- cocos2d-x-3.1 经常使用宏 (coco2d-x 学习笔记五)
- PHP fpm优化【转】
- day001-html知识点总结(二)不常见但很重要的元素汇总
- JavaScript+svg绘制的一个动态时钟
- Cube的高级设置
- [APIO2008]免费道路(生成树)
- adb push和adb install区别
- Mysql 於lampp xampp LinuxUbuntu下的配置
- dev代码拷贝中文乱码的解决方案
热门文章
- 使用 Rational AppScan 保证 Web 应用的安全性,第 2 部分: 使用 Rational AppScan 应对 Web 应用攻击
- 我的CCF备考指南
- Android之极光推送发送自定义消息
- 异常的概念和Java异常体系结构
- \(\rm LightOJ 1371 - Energetic Pandas 简单计数+组合\)
- 2015/8/10 Python基本使用(1)
- 解决配置JAVA_HOME JDK版本不变的问题
- vue装逼神器简述
- ”未能加载文件或程序集“Oracle.DataAccess”或它的某一个依赖项
- node遇到的一些坑,npm无反应,cordova安装以后显示不是内部或外部命令