uni-app心得体会

使用体验

首先uni-app解决了开发者的难题，但是如何跟得上原生平台的SDK更新和设备的兼容，这个问题如何解决，这是一个很大的问题，还有一个第三方库的使用和兼容的问题，这都是需要解决的。如果只是一个简单的web的开发项目，那么可以试试，功能复杂的话就不太适合了，特别是对性能和兼容，以及适配上面需要有要求的时候，就需要特别注意了。

没用之前以为真和 Vue 一样，用了之后才知道。有点类似 Vue 和 小程序结合的感觉。写类似小程序的标签，有着小程序和 Vue 的生命周期钩子。对比 uni-app 文档和微信小程序的文档，不差多少，只是将 wx => uni，熟悉 Vue 和 小程序可以直接上手。

如果看过其他小程序的文档，可以发现，文档主要的三大章节就体现在框架、组件、API 。

uni-app 需要注意看注意事项，文档给出了和 Vue 使用的区别。例如动态的 Class 与 Style 绑定，在 H5 能用，APP 和小程序的体现就不一样。

配置项跟着文档来，开发环境也是现成的，下载 HBuilderX 导入项目就能运行，日常开发习惯了 VSCode，所以 HBuilderX 的主要作用就是用来打包 APK 和起各个端的服务，coding 的话当然还是用 VSCode。

有时候开发的产品得兼容多端，这时候得先看看你要使用的组件及api是否支持你的所需，因为有的方法可能在app端和小程序端支持，但是在其他平台不支持，例如支付:

全局状态

最开始是直接使用类似小程序的 globalData 来管理我们的全局状态，但是后面发现需求一多，加了各种东西之后，需要取这个状态的时候就很痛苦，做为程序猿嘛，都想偷懒吖，每次都得引入一下 getApp().globalData.data 这样很繁琐可不行，就替换成了 Vuex，需要取这个变量的时候，直接 this.vuex_xxxx 就能拿到这个值。

有段时间重写了 HTTP 请求部分和全局状态管理部分。

小程序中要在每一个页面中添加使用共有的数据，可以有三种方式解决。

Vue.prototype

它的作用是可以挂载到 Vue 的所有实例上，供所有的页面使用。

// main.js
Vue.prototype.$globalVar = "Hello";

然后在 pages/index/index 中使用：

<template>
  <view>{{ useGlobalVar }}</view>
</tempalte>
<script>
export default {
  data (){
    return {
      useGlobalVar: $globalVar
    }
  }
}
</script>

globalData

<!-- App.vue -->
<script>
    export default {
      globalData:{
        data:1
      }
      onShow() {

      getApp().globalData.data; // 使用

      getApp().globalData.data = 1; // 更新

  };
</script>

Vuex

Vuex 是 Vue 专用的状态管理模式。能够集中管理其数据，并且可观测其数据变化，以及流动。

之前看到一个通俗化比喻：用交通工具来比喻项目中这几种描述全局变量的方式。

下面列举这些方式通俗的理解状态：

Vue 插件 vue-bus 可以来管理一部分全局变量（叫应用状态吧），学习后发现，bus（中文意思：公交车）这名字取得挺形象的。

先罗列一下这些方式，不过这种分类并不严谨。

1、VueBus：公交车 2、Vuex：飞机 3、全局 import

• a.new Vue()：专车；
• b.Vue.use：快车；
• c.Vue.prototype：顺风车。

4、globalData：地铁

首先 VueBus，像公交车一样灵活便捷，随时都可以乘坐；表现在代码里，很轻便，召之即来，缺点就是不好维护，没有一个专门的文件去管理这些变量。想象平时等公交车的心情，知道它回来，但不知道它什么时候来，给人一种很不安的感觉。

而 Vuex，它像飞机，很庄重，塔台要协调飞机运作畅顺，飞机随时向地面报告自己的位置，适合用在大型项目。表现代码中，就是集中式管理所有状态，并且以可预测的方式发生变化。也对应着飞机绝对不能失联的特点。

第三种方式是全局 import，分三种类型，分别是：new Vue()、Vue.use()、Vue.prototype。可以用网约车来比喻，三种类型分别对应：专车、快车、顺风车。都足够灵活，表现在代码里：一处导入，处处可用。