Ionic4 入坑之谈

• 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项目中遇到问题的总结，如果文章中有误的，可以留言告知。希望这篇文章对你有帮助！一起成长！一起进步！