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

系统管理员 2023-02-12 14:22 10阅读 0赞

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

#### H5适配 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]

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

#### prop单向数据流特性 ####

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

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

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

##### *声明周期那些事* #####

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

##### *应用生命周期* #####

是项目启动的过程，主要是在App.vue中声明的，包括下面几个：  
![在这里插入图片描述][20200526140542561.png_pic_center]

在`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`，暂时可以通过索引曲线实现。

[原文转载地址][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200526140058260.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz,size_16,color_FFFFFF,t_70#pic_center
[20200526140542561.png_pic_center]: https://img-blog.csdnimg.cn/20200526140542561.png#pic_center
[Link 1]: https://baijiahao.baidu.com/s?id=1632876359909228693&wfr=spider&for=pc