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

这是uniapp框架的目录结构

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

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

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

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

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

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

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

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

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

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

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