关于uni-app你需要小心的坑

作为vue语法开发的跨平台开发框架虽然愿望很美好，但是真的要实现跨平台还是需要开发者搭建好的项目架构，灵活运行vue语法和模块化开发思维。

H5适配

官方创新很好，又为我们创造了一个尺寸单位，upx，但是考虑到项目迁移和开发通用，我决定还是使用px配合flexible实现适配，确保项目可以轻松移植到uni框架，需要改动@dcloudio/vue-cli-plugin-uni/packages/postcss文件，在postcss.config.js文件中引入的，保证我们小写px自动转换rem，大写的不转换，默认采用750px的设计稿，所以其他尺寸设计稿的需要注意转换：

h5适配.png

利用条件编译在main.js中引入flexible.js，这样就可以实现H5的适配，同时保证了我们的现有项目无缝升级到uni框架。当然在页面js动态设置的px需要我们自己衡量是否需要适配，可以使用flexible自定义全局函数转换rem。其他小程序px转换规则保持不变。

prop单向数据流特性

当我们对组件重复设置某些属性为相同的值时，数据不会同步到view层。这就导致数据与视图显示不匹配，这时我们需要的是手动同步组件状态，当组件内部状态改变时，对外触发事件，将新的状态以参数的形式传递出去，这样才能同步组件数据，父组件更改时，子组件也就能更新视图了。

子组件：$emit('事件名称','数据')；

父组件：@事件名称=“处理事件”

声明周期那些事

首先我们需要清楚几个概念，应用生命周期，页面生命周期，还有组件生命周期：

应用生命周期是项目启动的过程，主要是在App.vue中声明的，包括下面几个：

生命周期.png

在onLanch中我们可以获取启动参数，包括scene等；其他的我们根据需要处理自己的逻辑。

页面生命周期每个页面单独的生命周期，我们经常会用到onLoad，可以获取页面参数，当然我们可以自己封装一层页面组件，然后将页面参数绑定到当前页面实例$query，保证了同vue一致的开发体验。onReady代替vue的mounted，此时可以访问页面实例以及视图结构。

组件生命周期区别于页面生命周期，没有onShow，onLoad,但是vue的生命周期是支持的，created等。

跨端注意

虽然框架提供跨端能力，但是各个平台表现还是有些不一致的，有时我们需要自己对齐，抹平平台差异，保证开发一致。以下整理常见差异，并提供参考解决方案，作为我们开发时需要注意的：

1、页面和组件的数据data声明为方法返回一个对象，保证数据正确销毁。
2、开发统一采用vue语法的开发方式，模板数据绑定和事件监听。
3、头部导航栏建议采用自定义的方式，下拉刷新采用mescroll-uni版的，体验相对较好，而且可以自定义样式，保证跨端开发以及表现一致。
4、文件名或文件夹名中不允许出现 @ 符号。canvas统一加id和canvas-id,v-if和v-for不要作用在用一个标签上，必要时使用block或者template。
5、图片资源使用绝对路径，背景图片使用~@/static的绝对地址的方式。
6、暂时不支持跨端v-html模板语法，所以尽可能使用条件编译在H5端使用。
7、目前测试在H5和微信小程序端可以使用过滤器和模板中使用自定义函数。
8、组件里使用 slot 嵌套的其他组件时不支持 v-for，动态组件，异步组件暂不支持，不支持自定义组件上原生事件，直接绑定style，class，keep-alive，transition等，建议不要使用v-show。
9、微信中v-for在事件中使用item传参时，访问不到item，但是可以使用索引传递，目前官方标记为bug，暂时可以通过索引曲线实现。