Skip to content

jiaen188/ionic3-zhihu-project

Repository files navigation

一、前言

  九月份开始,公司开始使用ionic3 angular4开发建筑人app 2.0版本,参与项目开发之余,在元旦前后终于有时间开始利用ionic尝试学习开发一个仿知乎项目。 方便自己的知识结构梳理和入门学习之用。

  另一个原因是自己在工作之余,也在学习vue框架,希望通过一些小项目的开发,对于angular4和vue2有个更深入的对比。

vue-music-project github地址传送门


二、技术栈

ionic3 + angular4 + rxjs + typescript + cordova

  angular4本身是一个重量级的框架,相比vue,核心库中就已经带有很丰富的http模块,表单模块等等,适用于大项目多人团队开发。同时由于入门门槛相对较高,需要比较多的前置知识,在国内的使用程度和受众不是很高。

angular中文文档

ionic官方文档

教程 | RxJs 中文文档

三、环境搭建

npm install ionic cordova -g (可能需要翻墙)

git clone git@github.com:jiaen188/ionic3-zhihu-project.git

cd ionic3-zhihu-project

npm install 

ionic serve

如果想要打包成app请从官网中(https://ionicframework.com/getting-started)根据不同操作系统配置不同的环境


四、目录结构

|——node_modules                                         //npm项目依赖

|——platform                                             //平台 (运行ionic cordova platform add android 会生成)           

|——plugins                                              //cordova插件文件 (同上运行命令后会生成)

|——plugins                                              //打包app需要的资源(包括启动图,图标等)

|——src	
    |——app                                            
|       |——app.component.ts
    |
|       |——app.html
    |
|       |——app.module.ts
    |
|       |——app.scss
    |
|       |——main.ts
    |
|	
    |——assets                                           //静态资源,包括图片、mock数据等
|       |——icon
    |
|       |——images
    |
|       |——mock
    |
|
    |——common——                                        //公共的加载组件
|
	|——components——                                    //公共组件 
|			  |——emojipicker                           //表情包组件
	|
|			  |——question-list                         //问题列表组件
	|		
|			  |——components.module.ts                     
	|
|
	|——pages——                                         //业务页面 
|			  |——answer                                //答案页面
	|
|			  |——chat                                  //聊天面板
	|		
|			  |——chatdetails                           //聊天详情页面
	|
|			  |——details                               //问题详情页面
	|
|			  |——discovery                             //发现面板
	|		
|			  |——headface                              //头像页面
	|
|			  |——home                                  //首页面板
	|
|			  |——login                                 //登录页面
	|		
|			  |——more                                  //更多面板
	|
|			  |——notification                          //通知面板
	|
|			  |——question                              //问题列表页面
	|		
|			  |——register                              //注册页面
	|
|			  |——scan                                  //扫描二维码页面
	|
|			  |——tabs                                  //tab页面
	|		
|			  |——user                                  //用户页面
	|
|			  |——userdetatalist                        //详情页面
	|
|			  |——versions                              //版本页面
    |
|
    |——pipes——                                         //管道文件
|		      |——relativetime                          //处理时间管道
	|
|		      |——pipes.modules.ts                                  
    |
|
    |——providers——
|		      |——chatservice                            //聊天服务模块
	|
|		      |——emoji                                  //表情包模块
    |
|		      |——rest                                   //接口模块
	|
|		      |——settings                               //设置主题模块
    |
|
    |——theme                                            //主题
|
    |——index.html                                       //首页
|

github 上的 README.md 持续的会完善 ... ...

👉 This starter repo has moved to the ionic-team/starters repo! 👈