capacitor搭建及其踩坑

  1. package.json中加入以下四个必须的依赖,我就是因为稍加了一个@capacitor/cli导致app模块中的compileSdkVersion是27,而其他的模块更新的确实28,注意!!! 如下配置:
    "@capacitor/android": "^1.0.0",
    "@capacitor/core": "^1.0.0",
    "@capacitor/cli": "^1.0.0",
    "@capacitor/ios": "^1.0.0",

  1. 配置相应的gradle环境,例如环境变量GRADlE_HOME,GRADLE_USER_HOME,配置idea中的service directory path为自定义的gradle路径,配置capacitor root path/android/app/gradle/wrapper/gradle-wrapper.properties,设置里面的distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip 为自己的设置的目录。

  2. 直接编译报错point to the same directory in the file system.Each module must have a unique path. ,解决方法: 将项目android文件下的 ***.iml 文件删掉,重新导入编译即可

  3. android sdk这里我们使用的@capacitor/core=1.0.0, 所以它支持的Androidsdk是28,所以我们记得配置Androidstudio 中sdk只有一个API 28版本的。

  4. npx cap sync是用户安装了新的cordova插件后更新同步新的插件到工程里面。而npx cap copy主要就是每次的web工程build后将对应的dist目录复制到对应的assets目录下面。

  5. Android 9.0 WebView无法加载页面报错net:ERR_CLEARTEXT_NOT_PERMITTED,从Android 9.0(API级别28)开始,默认情况下禁用明文支持。因此http的url均无法在webview中加载。

AndroidManifest.xml文件中的application标签添加android:usesCleartextTraffic="true"

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

  1. ionic 切换页面时会添加ion-page-invisible,导致页面白屏,参考问题:

  2. vue阻止冒泡到父级节点的事件 @click.stop

            <div v-for="(image,index) in currentImages"
                 :key="image.src"  @click="previewImage(image, index)">
              <li class="weui-uploader__file"
                  :style="{ backgroundImage: `url(${image.src})`}"
                 >
                <ion-icon name="ios-close-circle" class="weui-close-icon" @click.stop="removeImage(image, index)"></ion-icon>
              </li>
            </div>
  1. cordova phone call打电话代码: location.href='tel:13052113519'或者 window.open('tel:13052113519')

  2. 离线存储解决方案: localForage

  3. promise, asyncawait的讲解

参考: https://www.cnblogs.com/CandyManPing/p/9384104.html

  1. async 告诉程序这是一个异步,awiat 会暂停执行async中的代码,等待await 表达式后面的结果,跳过async 函数,继续执行后面代码
  2. async 函数会返回一个Promise 对象,那么当 async 函数返回一个值时,Promise 的 resolve 方法会负责传递这个值;当 async 函数抛出异常时,Promise 的 reject 方法也会传递这个异常值
  3. await 操作符用于等待一个Promise 对象,并且返回 Promise 对象的处理结果(成功把resolve 函数参数作为await 表达式的值),如果等待的不是 Promise 对象,则用 Promise.resolve(xx) 转化

例子参考

  1. https://github.com/nklayman/vue-cli-plugin-capacitor/blob/master/index.js
  2. https://github.com/pietrovieira/Vuejs-Ionic4-Ionic-Capacitor/blob/master/src/App.vue
  3. sample app using capacitor vuejs and ionicv4 components
  4. Mobile app built with Vue.js, Ionic 4(beta), and wrapped by Capacitor
最后更新: 6/18/2019, 9:42:17 AM
本文浏览量