笔记大全

uniapp没有mui流畅

更新时间：2023-10-23

第一段：了解uniapp和mui

uniapp是一种基于Vue框架的跨平台应用开发框架，它集成了多个平台的特性，并实现了一份代码多端运行的目标。而mui是基于HTML、CSS、JS的移动端UI库，提供了一系列的UI组件，旨在提高移动端Web App的开发效率。

<!-- uniapp示例 -->
<template>
  <view>Hello UniApp</view>
</template>

<script>
export default {
  data() {
    return {};
  },
}
</script>

<style lang="scss">
view {
  font-size: 40rpx;
  text-align: center;
}
</style>

<!-- mui示例 -->
<div class="mui-content">
  <div class="mui-card">
    <div class="mui-card-header">Card Header</div>
    <div class="mui-card-content">This is Card Content</div>
    <div class="mui-card-footer">Card Footer</div>
  </div>
</div>

第二段：比较uniapp和mui的优缺点

uniapp和mui都是移动端开发的工具，但两者之间有着不同的特点。相较于mui，uniapp的优点在于：

支持多端开发，可以一份代码多端运行，包括H5、iOS、安卓等。
采用Vue框架，有着Vue框架的开发优势，如数据绑定等。
有着完整的生态系统，包括官方文档、社区和第三方插件等。

而mui的优点则在于：

提供了一系列UI组件，可以快速开发移动端Web App。
CSS样式集成手机样式，可以直接使用。
对于使用jQuery或原生JS的开发者更为友好。

相较于mui而言，uniapp在跨平台、开发效率和开发门槛等方面优势更大，但对于需要特定功能的开发者来说，或者使用mui更为熟悉的开发者来说，使用mui更为合适。

第三段：uniapp提高流畅度的方法

既然问题涉及程序流畅度问题，在uniapp中如何解决程序卡顿的问题呢？以下是一些提高uniapp流畅度的方法：

减少页面中的图片和动画的使用
合理利用样式和布局，减少DOM的使用
采用合适的图片和视频格式，优化文件大小
对于复杂的计算，可以采用Worker实现多线程计算，减少界面卡顿

这些方法在实际开发中都会有所体现，特别是针对复杂页面和一些高性能要求的场景，采用优化措施可以有效提高程序流畅度。

// 减少DOM使用示例
<template>
  <view class="m-page">
    <view class="m-header"></view>
    <view class="m-content"></view>
    <view class="m-footer"></view>
  </view>
</template>

<style lang="scss">
.m-page {
  background-color: #f5f5f5;
}

.m-header {
  width: 100%;
  height: 100rpx;
  background-color: #333;
  margin-bottom: 20rpx;
}

.m-content {
  width: 100%;
  height: 500rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.m-footer {
  width: 100%;
  height: 60rpx;
  background-color: #333;
}
</style>

第四段：补充说明

当程序表现卡顿时，有可能是因为程序功能或页面渲染的性能问题导致，也有可能是网络问题导致。对于网络问题，可以采用uniapp提供的网络优化措施，如：

采用数据缓存，减少网络请求次数
开启HTTP2.0，提高请求响应速度
采用CDN分发，减少服务器负载
合理使用请求头，减少重复请求

此外，还可以采用一些优化插件，如uni-simple-router和UniPopup等，针对程序表现卡顿的问题进行优化。

// 采用uni-simple-router插件
<template>
  <view>
    <router-view></router-view>
  </view>
</template>

<script>
import Router from 'uni-simple-router';

const router = new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: () => import('@/pages/home/index.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/pages/about/index.vue'),
    }
  ]
});

export default {
  created() {
    router.beforeEach((to, from, next) => {
      // 路由守卫
    })
  }
}

router.start();

c语言编程笔录