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 三、xcode 十、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