移动端angular10+ionic项目开发踩坑笔记

1、移动端唤醒数字键盘，输入框采用的是，出现问题：苹果手机不能输入小数点，但type='tel'安卓还是很好用的

解决方式：用公司封装的SDK判断设配类型，ios设备采用type='number'类型输入框，百度搜查了下只加type可能小数点还是不能输入，要再添加属性pattern='number',亲测生效

<ion-input type='number' pattern='number'></ion-input>

2、使用ion-picker包装成公用组件，ios手机选中选项后，只展示出来一条线，你信吗这个bug我搞了近四五个小时？不过开始用ion-picker的时候也很懵逼，看下面，这是官方给的使用案例

/* Using with useIonPicker Hook */

import React, { useState } from 'react';
import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react';

const PickerExample: React.FC = () => {
  const [present] = useIonPicker();
  const [value, setValue] = useState('');
  return (
    <IonPage>
      <IonContent>
        <IonButton
          expand="block"
          onClick={() =>
            present({
              buttons: [
                {
                  text: 'Confirm',
                  handler: (selected) => {
                    setValue(selected.animal.value);
                  },
                },
              ],
              columns: [
                {
                  name: 'animal',
                  options: [
                    { text: 'Dog', value: 'dog' },
                    { text: 'Cat', value: 'cat' },
                    { text: 'Bird', value: 'bird' },
                  ],
                },
              ],
            })
          }
        >
          Show Picker
        </IonButton>
        <IonButton
          expand="block"
          onClick={() =>
            present(
              [
                {
                  name: 'animal',
                  options: [
                    { text: 'Dog', value: 'dog' },
                    { text: 'Cat', value: 'cat' },
                    { text: 'Bird', value: 'bird' },
                  ],
                },
                {
                  name: 'vehicle',
                  options: [
                    { text: 'Car', value: 'car' },
                    { text: 'Truck', value: 'truck' },
                    { text: 'Bike', value: 'bike' },
                  ],
                },
              ],
              [
                {
                  text: 'Confirm',
                  handler: (selected) => {
                    setValue(`${selected.animal.value}, ${selected.vehicle.value}`);
                  },
                },
              ]
            )
          }
        >
          Show Picker using params
        </IonButton>
        {value && <div>Selected Value: {value}</div>}
      </IonContent>
    </IonPage>
  );
};

官方给了个react案例，也没有对应的组件使用案例，angular项目要怎么搞呢？网上百度到是要在逻辑层ts里配置，跟着敲了敲，vscode自动包引入错误了，两周了编译也不报错，今天流水线就一直引入报错，查了下才知道PickerOptions应该引入来自于'@ionic/core'

import { PickerOptions } from '@ionic/angular'; 


// 正确代码如下
import { Component, OnInit } from '@angular/core';
import { NavController, PickerController } from '@ionic/angular';
import { PickerOptions } from '@ionic/core';
 
 
@Component({
  selector: 'app-searchcondition',
  templateUrl: './searchcondition.page.html',
  styleUrls: ['./searchcondition.page.scss'],
})
export class SearchconditionPage implements OnInit {
  public period = 'period';
 
  constructor(
    private navCtl: NavController,
    private pickCtl: PickerController,
  ) { }
 
  ngOnInit() {
  }
 
  public onDone() {
    this.navCtl.back();
  }
  /*
  ** 打开ion-picker html可以随意写个dom 加个click方法
  */ 
  public async pickPeriod() {
    const opts: PickerOptions = {
      buttons: [
        {
          text: '取消',
          role: 'cancel'
        },
        {
          text: '确定',
          handler: (v) => {
              this.period = v['periodType'].value; // 拿到选中的结果
          }
        }
      ],
      columns: [
        {
          name: 'periodType', // 可以自定义配置项名称，方便回调时拿到结果
          options: [
            {text: 'open', value: 'open'},
            {text: 'close', value: 'close'},
            {text: 'period', value: 'period'},
          ]
        }
      ]
    };
    const picker = await this.pickCtl.create(opts);
    picker.present();
  }
 
 
}

解决完流水线报错，再来看那个IOS筛选后只显示一条线的问题，html我的显示元素是

<ion-input readonly class='show-picker' (click)="pickPeriod()" placeholder="请选择" [(ngModel)]="currency"></ion-input>

解决经历

1、因为这部分被我独立成了公用组件，所以我在公用组件壳子上加了宽高，打包=》不生效；

2、ion-input 背景设置透明 background: transparent; =》不生效；

3、ion-input 加行高=》还是不生效；

4、咨询了下其他同事都没用过ion-picker，他们用ion-datetime做转换，选为备选方案。同时也想到两种方案，同时试下，一种是ion-input样式上加上**z-index:10;position:relative;**另外一种不用公用组件，直接使用，筛选后都正常展示了结果；

结语：欢呼吧，跳跃吧，记录下今天傻逼的一天，哪天再踩坑持续更新~