uniapp-小程序开发帮助手册

下面的内容从日常开发的笔记里面，提取出来，序号我就懒得改了

7、video标签使用ref拿不到，即使是官方提供了这种方式

1.  改用uni.createVideoContext(tag, this);

2.  原生小程序使用 wx.createVideoContext无效，官方自身的问题，改用原生query Selector

8、uniapp底层一次性setData数据量太大，导致渲染慢

1.  编写代码尽量不要一大块一大块赋值，比如this = Object.assign(this, obj)；

2.  能拆组件尽量拆

3.  首屏可能避免不了这个问题，这时可以骨架屏 + 分批次加载处理。

9、改动数据导致整个页面/组件都被刷新了

1.  由于小程序自身的问题，只能做到组件差异更新，所以如果你只想更新这部分，请抽出来做成组件。

10、修改props数据，页面没有渲染，即使是数据确实变了，$forceUpdate也无效，也不是没有响应式的问题。

1.  这个问题估计和uni底层有关，可以在初始化的时候deepAssign解绑，前提是这个数据不涉及多页面

2.  利用vuex去更新源头的数据，但这样可能会导致整个模块都被刷新了。

11、DOM上设置data-selectedId（驼峰写法），而事件对象中dataset拿到的是selectedid(全小写)

故默认全小写！默认全小写！默认全小写！

12、@tap 不支持v-for=“item in xxx”，@tap=“item.func”绑定对应的方法，会报错。

Q：从报错中，可以看出tap中读的变量是从data、method中获取。而item是模板中局部变量，并不挂载在data、method中。

A：可在method挂载一个方法入口，如itemfunc(key)

13、不支持插槽嵌套插槽的写法

bad

<slot name="fixedRightSideBtns" slot="after"></slot>

good:

<template #after><slot name="fixedRightSideBtns"></slot></template>

14、页面/组件里使用textarea/input的placeholder-class不生效

1.  查看页面/组件是否对样式进行了scoped处理，如果是的话需要对placeholder-class对应的class加上/deep/ 前缀

input | uni-app官网

15、input/textarea使用@input视图不刷新

1.  由于官方导致的差异，使用@input需要搭配return返回才会刷新视图

2.  改用:controlled="true" + v-model

18、判断空对象

1.  从vue的this上获取到的空对象，存在一个__ob__的属性，会导致Object.getOwnPropertyNames判断失效，统一使用isEmptyObj方法判断

20、android不渲染本地图片

1.  图片路径不需要包含版本号，否则会当作文件全名识别，导致找不到图片，e.x.：

/static/image/loading.png?v=xxx => /static/image/loading.png

21、scroll-view下拉刷新无法取消：

1.  详见：uniapp中scroll-view的下拉刷新_VRTAI的博客-CSDN博客_uniapp下拉刷新

22、slot的位置不对

1.  详见：【报Bug】插槽在微信小程序的解析位置不对 - DCloud问答

25、canvas层级高挡住view的问题

1.  如果是多弹层流程，看能否做互斥处理，即出现A则B不出现，反之亦然。

27、边框太细，iphone12渲染不了

边框1rpx改成2rpx即可

28、真机webview白屏问题

1.  url是否设置，还是为空，为空则追踪为什么为空

2.  ios可以通过Stream抓包：

a.  如果有发包，考虑排查web没有提供url

b.  如果没发包，考虑排查url内容是否合法

3.  console看是否有报错日志

4.  如果url为空合法，需要获取权限后才能设置，考虑页面流程是否在onLoad或onShow存在路由重定向，考虑路由锁没释放，导致页面停留原地

Q wxmallapp和uniapp的语法差异

1.  事件绑定：catchtap="xxx" ==> @tap.stop="xxx"

2.  事件绑定：catchtouchmove="xxx" ==> @touchmove.stop="xxx"

3.  路由跳转：navigateTo(xxxx) ==> this.$fu.route(xxxx) （https://hhyang.cn/v2/start/cross/codeRoute.html，也可以使用this.Router.xxx）

4.  triggerEvent替换为emit，不会带上原有事件的数据，需要注意

Q webp在小程序端无法长按保存

一般是微信问题，渠道提单处理：

Q 公众号组件 official-account 不渲染

参考 status 有效值，看下错误码排查 https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html

Q 常见的小程序开发坑

setData

• 一次不能set超过1024KB的数据

• 不要毫秒级别的去调用

• 多次setData合并为一次set

setData的工作原理： 小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。 而 evaluateJavascript 的执行会受很多方面的影响，数据到达视图层并不是实时的。

1.开发的过程中我在这里踩了两次坑，第一次，将历史队列set到Data中去，结果爆超过1024KB的问题。

2.编辑态中间区域元素拖拽卡顿的问题。第一个版本实时改变的全局的数据，页面元素一多就会卡顿，第二版本改成组件的形式，拖拽的时候改变的是组件中的数据，最后touchend的时候才同步到全局中去。

3.编辑态中的slider等组件使用了函数节流的方案。

富文本解析

词法分析（坑爹，由于pc端的富文本各种font,span嵌套，导致词法分析也GG了），开源的wxParse也不适合我们的需求，只能自己干。

动态加载字体的问题

一开始微信是没有提供动态加载字体的api，从基础库版本2.1.0开始才有动态加载字体的API：loadFontFac。这里有一个跨域的坑，ios加载字体正常，安卓无法加载字体，服务器要设置代理白名单。

本地图片

本地资源无法通过 WXSS 获取;解决方案：写在wxml中style中或者使用image标签

boundingClientRect

在做iphoneX的底部操作栏的适配时，发现子元素拥有多层定位不为static/relative的，获取的定位不正确。这应该是小程序的一个bug。

promise

promise没写catch函数，报错

swiper 圆角

swiper设置圆角在真机中不生效，小程序的bug