ionic5+vue3移动端开发Tips

转载自移动云开发者社区

一. ionic已经更新到5.4.0了，支持了最新的vue 3.4.2版本，最近体验了一把ionic5+vue3的组合开发，在此记录下心得体会。 

1. 常规操作，创建项目

ionic start myApp blank --type vue

2.安装官方文档ionic serve就可以运行项目了。

二. 开发中遇到的问题 1.调用cordova插件 随着typescript的流行，ionic默认创建项目为ts的，调用cordova的插件安装之前的写法会有报错

这里的报错本质上是ts调用js方法产生的，安装ts的官方文档创建d.ts文件解决 比如我们先创建一个request文件

request.js

function request() {
  const params = {
    'xxx': 'bb',
    'xx' : 'cc'
  };
  window.cordova.plugin.http.post('https://xxxx',params,{}, (response) => {
    console.log(response)
  }, (e) => {
    console.log(e)
  })
  
}

// exports.request = request
module.exports = {
  request
}

request.d.ts

export function request() : void;

也可以在shims-vue.d.ts文件中添加

declare module '*'

iOS中使用wkWebView无法解决跨域请求问题，只能使用http插件。 cordova-plugin-advanced-http 参考 https://github.com/silkimen/cordova-plugin-advanced-http

全局注册ionic组件 为了方便开发，不用每个vue文件都引用一次ionic中组件 使用全局注册组件

//在main.ts中
import { IonButton } from '@ionic/vue';
app.component("ion-button",IonButton);

1. iOS的刘海屏适配 iOS11之后有刘海屏需要适配，在css中使用

    margin-top: var(--ion-safe-area-top, 0);  //var 如果 --ion-safe-area-top css中没有定义，则使用0
    //@support 判断css中是否有定义
    // html中也可以自定义属性和值，可以供全局使用