提问

问：为什么要写这个文章？

答：由于作者近两年使用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）

秀代码

vue
  • 项目结构
  • 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哈哈~

出现问题，请多多包涵