uniapp没有mui流畅-猿码集

1. 什么是Uniapp？

Uniapp是一款基于Vue.js的跨平台开发框架，可以让开发者一次编写代码，多端运行。Uniapp支持多个平台，包括iOS、Android、H5、小程序等。Uniapp的目的就是为了让开发者在尽可能少的代码改动下，可以将一个项目运行在不同的平台上。

2. 什么是Mui？

mui是一款基于最新的HTML5、CSS3技术，采取面向Mobile的UI组件库，被广泛应用于webapp、hybirdapp、微信公众账号、小程序等前端开发。

3. Uniapp为什么没有Mui流畅？

3.1 Uniapp的性能问题

Uniapp虽然带来了跨平台开发的便利性，但是由于不同平台的限制和差异，开发者在开发的时候需要适配不同的平台，这就会导致应用性能的下降。同时，Uniapp也有一些性能瓶颈，比如渲染性能以及运行时性能等问题。这些问题影响了应用的流畅性。

// Uniapp中的性能瓶颈之一：渲染性能 // 在页面中大量使用v-for指令，或者嵌套过深的组件，都会影响页面的渲染性能。 // 开发者需要注意避免这样的使用场景，从而提高应用的渲染性能。

3.2 Mui框架的问题

Mui框架虽然已经成为一个非常成熟的移动端框架，但是它的一些缺点也逐渐被开发者所发现，比如组件的样式结构过于复杂，不利于开发者的定制化开发；同时，Mui框架在部分机型上的兼容性也较差，会导致应用的卡顿、闪退等问题。

// Mui中的一些问题 // 使用Mui框架时，存在一些与平台无关的兼容性问题，比如ios中定位的问题。 // 这些问题需要开发者针对具体平台进行兼容性处理，否则会导致应用出现一些奇怪的异常。

4. 如何提高Uniapp应用的流畅性？

4.1 减少渲染次数

在Uniapp开发中，对于复杂页面、特别是长列表等场景中，渲染次数的影响是非常大的。因此，在开发时需要尽量减少渲染次数，可以使用v-for指令中的key属性、缓存组件等方式来优化渲染。


// 减少列表重复渲染的示例代码
<template>
  
    <li v-for="(item, index) in list" :key="item.id">
      {{ item.name }}
    </li>
  
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    // mock数据
    this.lsit = Array.from({ length: 1000 }, (_, i) => ({
      id: i,
      name: "item" + i,
    }));
  },
};
</script>

4.2 使用请求缓存

请求缓存是指在请求后将响应缓存下来，下次请求时可以直接从缓存中取得响应，而不需要再次请求。在Uniapp开发中可以使用uni.subNVUE的组件缓存功能来实现这一功能。


// 使用uni.subNVUE的组件缓存功能
<template>
  <uni-transition>
    <uni-list-view
      :list="list"
      :count="count"
      @scroll="onScroll"
      cache
    ></uni-list-view>
  </uni-transition>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      count: 0,
    };
  },
  methods: {
    onScroll() {
      this.count += 20;
    },
  },
  async mounted() {
    // 发起第一次请求
    const res = await this.$http.get("/api/list");
    // 将响应缓存下来
    uni.setStorageSync("list-cache", res);
    this.list = res.data.list;
  },
  async onUnload() {
    // 清空缓存
    uni.removeStorageSync("list-cache");
  },
};
</script>

5. 如何解决Mui框架的问题？

5.1 自定义主题

对于组件的样式结构过于复杂不利于开发者的定制化开发这一问题，可以通过自定义主题来进行解决。


// 自定义主题的示例代码
mui.init({
  statusBarBackground: "#f7f7f7",
  extend: {
    background: "#f7f7f7",
    btnTextColor: "#333",
    btnBackground: "#fff",
  },
});
// 应用主题
mui.plusReady(() => {
  const view = plus.navigator.getLaunchWebview();
  mui.getStyle(`#${view.id}`).setStyle("background-color", "#f7f7f7");
});

5.2 兼容性处理

对于部分机型上的兼容性问题，开发者需要使用一些兼容性处理方法来解决。例如，可以使用条件注释来对不同的平台进行兼容性处理。


// 使用条件注释来针对不同平台进行兼容性处理
<!--[if !IE]>-->
  <!-- 在这里放置非IE浏览器兼容性问题的解决方法 -->
<!--[endif]-->
<!--[if IE]>
  <!-- 在这里放置IE浏览器兼容性问题的解决方法 -->
<!--[endif]-->

6. 总结

Uniapp作为跨平台开发框架，尽管带来了开发便利性，但是在应用性能方面存在一定的问题。而Mui框架在性能方面表现良好，但是在一些缺陷问题上也不断被开发者所发现。因此，开发者需要结合实际项目情况选择开发框架，并采取相应的优化策略来提高应用的流畅性。

uniapp没有mui流畅