【uni-app】uni从入门到放弃之踩坑集合

1.使用vue-cli创建的uni-app的静态资源必须存放在static文件夹下， 尝试了绝对路径，相对路径都报错，找了半个多小时才度娘出来， 根据：https://ask.dcloud.net.cn/question/76738 2.vue组件数据单向流设计模式 今天使用uni写组件的试试，怪自己学识短浅遇到了这个vue的注意事项，就是vue父子组件数据单向流的原则。 比如说父组件传入一个value ，子组件props：{value}接收，如果要更改传过来的value这样属于违背了vue 的设计原则， 如果value是基本类型vue会报错，如果value是引用类型则不会报错，因为引用类型 在深入探讨【uni-app】开发过程中遇到的问题之前，先简单介绍一下uni-app。uni-app是由DCloud（即原HBuilder）推出的一款多端开发框架，它允许开发者使用Vue.js语法编写一次代码，然后可以编译到iOS、Android、微信小程序、支付宝小程序、百度小程序等多个平台。这大大提高了开发效率，降低了跨平台开发的门槛。 然而，正如标题所言，“从入门到放弃之踩坑集合”，在使用uni-app进行项目开发时，新手往往会在一些细节上遇到困扰。以下将详细讨论两个主要问题：静态资源的存放位置和Vue组件的数据单向流动。 关于静态资源的存放问题。在使用vue-cli构建uni-app项目时，静态资源如图片、CSS、JavaScript等文件，应当放置在`static`目录下。这是因为uni-app遵循Vue CLI的约定，`static`目录是默认的静态资源目录，项目在打包时会自动处理这个目录下的文件。尝试使用绝对路径或相对路径可能会导致找不到文件的错误，因为uni-app的构建过程需要对资源路径进行特殊处理。为避免这类问题，应确保所有静态资源均存放在正确的位置，并使用相对组件的路径引用它们。 关于Vue组件的数据单向流设计模式。这是Vue.js的一个核心设计理念，旨在维护数据流的清晰性和可预测性。在uni-app中，父组件通过props向子组件传递数据，子组件通过事件（event bus）向父组件传递数据，形成了典型的“自上而下”的数据流动。如果子组件试图直接修改由父组件传递过来的props，这将违反Vue的数据单向流动原则。 例如，父组件传递了一个名为`value`的属性给子组件： ```javascript <child-component :value="parentValue" /> ``` 在子组件内部，如果直接修改这个`value`，例如： ```javascript export default { props: { value: Number }, methods: { updateValue() { this.value = 123; // 违反数据单向流动原则 } } } ``` 当`value`是基本类型（如Number、String、Boolean）时，Vue会抛出警告，因为这会导致父组件的值无法同步更新。而如果`value`是一个对象或者数组这样的引用类型，子组件修改它不会报错，但这种做法同样不推荐，因为它破坏了数据流的清晰性，可能导致难以追踪的错误。 正确的做法是，子组件应该通过触发事件并携带新的值来通知父组件进行更新，例如： ```javascript export default { props: { value: Object }, methods: { updateValue() { this.$emit('update:value', { ...this.value, someProperty: 'newValue' }); } } } ``` 然后在父组件中监听这个事件： ```javascript <child-component @update:value="handleValueChanged" /> ``` 并在`handleValueChanged`方法中处理新值，以实现数据的单向流动。 总结来说，理解和遵循uni-app的项目结构规范以及Vue的数据单向流动原则，是避免开发过程中出现错误的关键。在实际操作中，遇到问题时，及时查阅官方文档或社区解答（如DCloud的问答平台）是非常有帮助的。通过不断学习和实践，开发者能够更好地驾驭uni-app，实现高效且稳定的跨平台应用开发。