关于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,暂时可以通过索引曲线实现。

你可能感兴趣的:(关于uni-app你需要小心的坑)