学习uni-app心得

Yin_ZOT

已于 2023-06-28 16:35:48 修改

阅读量193

点赞数

文章标签：学习 uni-app

于 2023-06-16 18:59:40 首次发布

本文链接：https://blog.csdn.net/Yin_ZOT/article/details/131250058

版权

本文介绍了uniapp作为跨平台开发框架的核心特性，包括基于Vue.js的结构，组件、数据传递、SCSS预处理器的使用，以及相对路径和绝对路径在处理资源引用时的策略。文章强调了uniapp在提升开发效率和代码可维护性方面的优势。

摘要由CSDN通过智能技术生成

前言

uniapp是新出现的一种跨平台开发框架，用于同时开发运行于多个主流端（如 H5、iOS、Android 等）的应用。它基于 Vue.js 框架，并且可以在一些特定的条件下将代码自动转换为运行在原生端的代码，从而实现跨平台开发的效果。Uniapp的优点包括：跨平台、高效、易用、组件丰富、生态完善等。它适用于需要快速迭代开发的应用，如中小型企业的移动应用、小程序等。

这是uniapp框架的目录结构

pages：页面目录，每个子目录代表一个页面
components：组件目录，包含所有的自定义组件
static：静态资源目录，如图片、音频、视频等
unpackage：uni-app打包后的文件目录，里面的内容可以直接上传到相应平台的开发者后台
App.vue：应用入口组件
main.js：应用入口js文件
manifest.json：uni-app的配置文件，包括应用名称、权限、导航栏等设置
pages.json：页面配置文件，包括页面路径、页面样式、顶部导航栏等设置
uni.scss：Uniapp的全局样式文件

这是我做的一个项目的目录结构

2.认识vue的页面结构

<template>
  <view class="">
  </view>
</template>
<script>
export default {
  data() {
    return {
    }
  }
}
</script>

<style lang="scss">

</style>

3.数据传递

在 uni-app 开发中，数据传递是很常见的操作。通过 props 和 $emit，我们可以很方便地实现组件之间、父子之间的数据传递。现在有例子，父页面 goods-list.vue 向子组件 lqc-tabs 传递了一个 tabsList 数组作为 props

，并在子组件 lqc-tabs 中通过监听 onchangIndex 事件来触发 $emit 函数，

4.SCSS css的扩展语言

在学习uniapp中scss支持嵌套选择器的语法，可以大大地简化代码的编写和维护，避免出现过于冗长和难以维护的css代码，在使用前需要到scss/sass编译 - DCloud 插件市场下载好scss/sass编译插件才能使用scss。使用例子如下：

<style lang="scss"> 
.list {
  padding: 10px;
  li {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    a {
      color: $primary-color;
      &:hover {
        color: #f5222d;
      }
    }
  }
}
 <style>

5. computed计算属性

在开发页面时，通过computed属性实现对例子orders数据的筛选，在computed属性中定义一个筛选后的orders列表，并在template里使用v-for指令渲染数据。

  computed: {
    filteredOrders() {
      const currentTabId = this.tabsList.find(tab => tab.isActive).id;
      if (currentTabId === 0) {
        return this.orders;
      } else {
        return this.orders.filter(order => order.id === currentTabId);
      }
    }
  }

6.相对路径和绝对路径的使用

在开发过程中我们需要一些默认图片，我们可以采用硬编码的方式将图片路径直接写在代码中。但是，在不同的开发平台和环境下，这种方式可能会出现路径不正确导致图片无法正常显示的问题。就如当在微信小程序中使用路径为../../static/default_image.png的默认图片时，会出现无法正常显示的情况，而当路径为/../static/default_image.png时，可以在两个平台上都正常显示。这是因为在不同平台和环境下，文件路径的解析方式不同，可能导致不同的结果

以下左边这是默认图片未能正常显示的样子，右边是正常显示的效果

解决这个问题的方法如下：

（1）.使用相对路径：

// 在页面或组件的data中声明一个默认图片路径
data() {
  return {
    defaultImg: './static/default_image.png'
  }
},
// 在模板中使用相对路径引用默认图片
<template>
  <img :src="defaultImg">
</template>

（2）.使用绝对路径：

// 获取应用根目录路径
const rootPath = uni.requireNativePlugin('uni-app').getAppPath();
// 声明一个默认图片相对路径
const defaultImgPath = '/static/default_image.png';
// 构建默认图片绝对路径
const defaultImg = rootPath + defaultImgPath;
// 在模板中使用绝对路径引用默认图片
<template>
  <img :src="defaultImg">
</template>

在使用相对路径还是遇到了问题，我们可以考虑使用绝对路径引用图片。一般情况下，我们可以通过uni.requireNativePlugin('uni-app') API来获取应用的根目录路径，然后构建图片绝对路径。

以上两种方法都可以解决在不同开发平台和环境下引用默认图片时出现的问题。最重要的是，无论采用哪种方法，都应该尽量避免在代码中硬编码图片路径，而应该在配置文件或变量中进行统一管理。这样做不仅可以提高开发效率，同时也能有效降低代码维护的难度。

总之，在学习Uniapp的过程中，我深刻体会到了该框架的便利与高效，可以简单而高效地完成跨平台应用开发。掌握目录结构、computed计算筛选、父子组件传参、默认图片显示问题以及使用SCSS预处理器等技术，可以更好地提高开发效率和代码的可维护性。需要注意的是，在开发过程中要保持逻辑清晰，避免重复代码，更要保证代码可读性和易于维护性，这样可以让开发的应用更加健壮和优秀。