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

朱哲發表於2019-02-28
VueAPICloudAPP

提問

問：為什麼要寫這個文章？

答：由於作者近兩年使用vue較多，而作者是Native App出身（web滿足大部分業務，native就用的少了）。因此就有了介紹vue開發高效能app的想法。

廢話

眾所周知，app開發有很多種方式，也有很多框架。近兩年來，原生開發需求相比以前少了很多，一方面小程式的衝擊，另一方面就是h5不斷的崛起，硬體效能對web的效能完善。

回顧APP分類

  • Native App
  • Hybrid App
  • Web App

apicloud介紹

apicloud是什麼我就不介紹了，大家自己看官網

搭框架

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

  • 工具：android studio 3、xcode 10、vs code、vue-cli3

  • web app型別：多頁應用（一個html===一個activity\fragment\viewcontroller）

秀程式碼

看官走起：github

vue

  • 專案結構

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

    • public：存放html模板，採用官方建議
    • web_adapter：apicloud官方提供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>

複製程式碼

    啟動activity的theme設定LaunchTheme即可。

ios

ios整合，重點關注以下問題

  • SuperWebViewSDK的新增，Resource/uz目錄一定是Create folder references
  • Build Settings -> Linking -> Other Linker Flags : -ObjC
  • 別忘記新增庫：libicucore.tbd、WebKit.framework

哪些人適合這個方案？

  • 原生開發者：這個框架本生就是hybrid app（包大小增加不到1M）。
  • vue開發者
  • h5開發者
  • 其他web愛好者

結語

這是個首秀、首秀、首秀。O(∩_∩)O哈哈~

出現問題，請多多包涵

歡迎有相同的需求和愛好的同學一起交流。

QQ群：724354731

相關文章