Vue新技能系列：结合apicloud开发高性能APP

提问

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

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

• 项目结构

  • 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