ionic仿微信

一。项目搭建

用ionic命令来进行项目搭建

1.环境需要配置

本篇开发以windows环境，测试环境为android机器为主。mac环境，ios测试同理。

环境配置大概介绍：

1.nodejs环境：官网下载最新版本安装即可。

2.ant：官网下载最新安装配置环境变量即可。

搭建开发环境：

1.安装npm

npm install -g

 2.npm安装ionic

npm install -g ionic

创建一个ionic项目

ionic start wetalk tabs

创建一个名为wetalk 的还有tabs的项目（ionic start <project-name> <optional-template>） 可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白）

进入项目为项目添加android开发平台，ios同理ionic platform add ios

ionic platform add android

搭建成功！

浏览器调试运行

ionic server

服务运行成功。

手机真机运行编译平台

ionic build android

编译时根据需要下载sdk platforms

ionic run android

wetalk的目录结构

 

使用gulp

npm install gulp 
npm install gulp-sass

ionic setup sass
npm install gulp-minify-css 
npm install gulp-concat 
npm install gulp-rename

编译Sass (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
缩小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
丑化(Uglify) (gulp-uglify)
图片压缩 (gulp-imagemin)
即时重整(LiveReload) (gulp-livereload) 参考文档：https://www.npmjs.com/package/gulp-livereload
清理档案 (gulp-clean)
图片快取，只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)

sass使用方法：参考https://segmentfault.com/a/1190000004223786

安装sass

百度上有一些教程，嗷嗷嗷嗷安装。最大的问题就是网络，只能随缘了。
我大概这么装的：
国内先更换gem安装源

gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/

命令行输入：

gem install sass 
gem install compass

修改html包含项目

将index.html中所有link到的css删除。然后加上：
<link href="css/ionic.app.css" rel="stylesheet">

监听sass

gulp sass

运行ionic

再打开一个cmd,cd到ionic项目下，运行ionic serve