1.背景
- 介绍
  
  Ionic是一个开源UI工具包，用于使用Web技术（HTML，CSS和JavaScript）构建高性能的高质量移动和桌面应用程序。（构建和部署跨多个平台的应用程序，例如iOS，Android，桌面和Web作为渐进式Web应用程序）
- 版本：
  
  目前Ionic最新版本是V4，V4仍然通过@ionic/angular包与Angular深度集成，可以与任何其他JavaScript框架（Vue，React，Preact等）一起使用。
2.创建项目
- 搭建环境
  - 安装node.js 前往官网
  - 安装Ionic CLI npm install -g ionic
  - 查看ionic是否安装成功 ionic -v
  - 安装成功之后，创建项目 ionic start myApp tabs (官方提供3种模板：blank，tabs，sidemenu)
  - 创建成功，运行项目 ionic serve
3.项目目录
- src目录：项目代码和资源
  - app文件：项目代码
  - assets文件：存放样式，图片资源和引入第三方js文件等
  - theme文件：存放默认样式
  - global.scss：引入样式

4.app目录
- app.routing.module.ts:路由文件
- app.component.html:主页面
- app.module.ts ：模板文件

5.theme/variables.scss文件
- 由于ionic样式是用sass框架写的，所以想改默认样式，必须先F12找出所定义样式的变量，然后重新赋值覆盖之前的。（修改默认样式的坑很大，祝好运~）

6.Ionic文档之“巨坑”

由于Ionic目前还不是很成熟，Ionic3和Ionic4的差别巨大，Ionic版本一直在更新，所以官方给出的文档并不是很清晰。下面就介绍之前做项目使用官方提供的插件。

"ion-tabs"(底部导航)

安装Ionic项目是选择tabs的模板，自动生成一个tab组件，无需配置就可以使用；假如你是选择其他模板，你必须自行创建tab组件，再配置路由就可。

这里要介绍的是官方提供的API文档中的方法，如下：（看完一脸懵逼~！！）

场景：更换Ionic自带的tabs模板中的图标?? 通过getSeclect方法获取选中tabs的值，控制显示自定义图标 ???

"ion-picker"(选择器)

一般应用都有选择器，例如选择性别，日期，时间，城市或者其他。

文档中只提供了一个Demo，但没有提供如何在项目中使用该控件。

贴出代码，如下： xxxx.component.ts

    import { PickerController } from '@ionic/angular'
    /.../
    public pickercontroller: PickerController
     /.../
     
     const multiColumnOptions = [
  [
    'Minified',
    'Responsive',
    'Full Stack',
    'Mobile First',
    'Serverless'
  ],
  [
    'Tomato',
    'Avocado',
    'Onion',
    'Potato',
    'Artichoke'
  ]
]
     async  creat(multiColumnOptions: any, type: any) {
	const picker = await this.pickercontroller.create({
		columns: this.getColumns(numColumns, numOptions, multiColumnOptions),
		buttons: [
			{
				text: '取消',
				role: 'cancel'
			},
			{
				text: '完成',
				handler: (value) => {
					console.log(`Got Value ${value}`);
				}
			}
		],
	})
	await picker.present();	};
	function getColumns(numColumns, numOptions, columnOptions) {
  let columns = [];
  for (let i = 0; i < numColumns; i++) {
    columns.push({
      name: `col-${i}`,
      options: this.getColumnOptions(i, numOptions, columnOptions)
    });
  }
  
  return columns;
}

function getColumnOptions(columnIndex, numOptions, columnOptions) {
  let options = [];
  for (let i = 0; i < numOptions; i++) {
    options.push({
      text: columnOptions[columnIndex][i % numOptions],
      value: i
    })
  }
  return options;
}

结尾

以上就是Ionic4项目中遇到问题的总结，如果文章中有误的，可以留言告知。希望这篇文章对你有帮助！一起成长！一起进步！