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;}   复制代码

结语

以上就是之前在Ionic项目中遇到问题的总结，不得不说头发掉了好几十根~希望对您有帮助