Vue新技能系列：結合apicloud開發高性能APP

時間 2019-12-10

標籤 vue 技能系列結合 apicloud 開發高性能 app 欄目職業生涯简体版

原文原文鏈接

提問

問：爲何要寫這個文章？html

答：因爲做者近兩年使用vue較多，而做者是Native App出身（web知足大部分業務，native就用的少了）。所以就有了介紹vue開發高性能app的想法。vue

廢話

衆所周知，app開發有不少種方式，也有不少框架。近兩年來，原生開發需求相比之前少了不少，一方面小程序的衝擊，另外一方面就是h5不斷的崛起，硬件性能對web的性能完善。java

回顧APP分類

Native App
Hybrid App
Web App

apicloud介紹

apicloud是什麼我就不介紹了，你們本身看官網node

搭框架

從性能和可控上考慮，決定採用apicloud的SuperWebView爲原生app框架主體，vue爲web app開發框架。android

工具：android studio 三、xcode 十、vs code、vue-cli3webpack
web app類型：多頁應用（一個html===一個activity\fragment\viewcontroller）ios

秀代碼

看官走起：githubgit

vue

項目結構 github
- public：存放html模板，採用官方建議
- web_adapter：apicloud官方提供web運行適配

幾個重點web

自定義模板

多頁配置，頁面容器有獨立、有返回按鍵、frame等，所以根據不一樣的需求編寫不一樣的模板，而且須要在build/page.config.js添加模板page配置

頁面js大小優化

用過vue都知道，默認第三方js庫會打包到common chunk中，那麼若是是按需加載，如何拆分common chunk呢？

因爲vue-cli3採用的是webpack4，所以須要配置splitChunks

configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          echarts: { // 將echarts|zrender|vue-echarts合成一個chunk
            test: /[\\/]node_modules[\\/](echarts|zrender|vue-echarts)[\\/]/,
            name: 'echarts',
            chunks: 'all'
          },
          'vue-router': {
            test: /[\\/]node_modules[\\/](vue-router)[\\/]/,
            name: 'vue-router',
            chunks: 'all'
          }
        }
      }
    }
}
複製代碼

好比以上就是將echarts|zrender|vue-echarts三個庫從common chunk中分離成一個獨立的chunk（名字爲echarts），還有就是vue-router的分離

android

因爲代碼比較少，就不過多說明。

減小白屏

handler?.postDelayed(Runnable {
        startActivity(Intent(this@MainActivity, WebPageModule::class.java)) // 預計1s後webview加載出來 handler?.postDelayed(Runnable {
            finish()
        }, 1000)
    }, 500)
複製代碼

取消啓動頁finish動畫

上面延遲finish，在部分手機會有個bug，就是finish動畫會在WebPageModule上面出現，所以解決這個問題，須要關閉finish動畫。直接有效的方法以下

<style name="LaunchTheme" parent="AppTheme"> <item name="android:windowAnimationStyle">@style/Animation</item> </style>
<style name="Animation"> <!--<item name="android:activityOpenEnterAnimation">@null</item>--> <!--<item name="android:activityOpenExitAnimation">@null</item>--> <!--<item name="android:activityCloseEnterAnimation">@null</item>--> <item name="android:activityCloseExitAnimation">@null</item> <!--<item name="android:taskOpenEnterAnimation">@null</item>--> <!--<item name="android:taskOpenExitAnimation">@null</item>--> <!--<item name="android:taskCloseEnterAnimation">@null</item>--> <!--<item name="android:taskCloseExitAnimation">@null</item>--> <!--<item name="android:taskToFrontEnterAnimation">@null</item>--> <!--<item name="android:taskToFrontExitAnimation">@null</item>--> <!--<item name="android:taskToBackEnterAnimation">@null</item>--> <!--<item name="android:taskToBackExitAnimation">@null</item>--> </style>

複製代碼