微信小程序开发陷阱日记：滚动页面textarea bug

小程序初识

微信发布小程序，希望能获得用完即开即关的用户体验。省去了下载、安装APP的复杂过程。看起来很像谷歌发布的PWA，但PWA在中国流行起来还需要一段时间。借助微信的用户基础，小程序植入成本低，容易被用户接受。

小程序的编码风格与Vue类似。对于熟悉Vue开发模型的同学来说，上手并不是什么大问题。

小程序不支持常见的前端框架，如Vue、Angular、React、jQuery等，并且小程序有自己的编写风格（Dom），与写法不同。通常在网络上编写 HTML。然而CSS3并没有太大的改变。虽然文件名改成了（.wxss）

我们的项目使用webpack作为打包工具，将代码编译成小程序对应的代码文件夹索引。在Vue中使用Wechat-mina-loader插件进行开发。开发习惯是一样的。
babel完成了ES6到ES5的转换、sass编译、压缩转换等工作，全部放入webpack中。

不支持DOM操作

小程序脚本中无法使用窗口和文档对象，因此无法使用DOM。如果想使用节点，可以使用 ()

另外，数据驱动的开发模型和 Vue 类似，只是改变了脚本编写方式（vue: v-if, applet: wx : if )

rpx布局

rpx（响应像素）：根据屏幕宽度可调。指定的屏幕宽度为750rpx。例如，在iPhone6中，屏幕宽度为375px，总共有750个物理像素，那么750rpx = 375px = 750个物理像素，1rpx = 0.5px = 1个物理像素。

设计师在画草图时，可以使用iPhone6作为设计的基础。一般来说，可以用rpx来代替px。不过，在一些设计或者快速页面中，在设计方案中使用rpx会让小屏手机看起来更小。推文页面可以通过 px 和 weui 索引来实现

路径级别

按住当前页面并跳转到应用程序中的某个页面。您可以使用

关闭当前页面并跳转到应用程序中的页面返回首页。一页

跳转到tabBar页面并关闭没有tabBar的其他页面

关闭所有页面并在应用程序中的一页中打开

小程序只能同时打开5个页面。当第5页之后打开时，新页面无法正常打开。请避免重叠字段，或使用重定向

tabBar 底部导航栏

tabBar 是一个数组。设置为最小值 2、最大值 5，并按顺序对选项卡编号进行排序。不能使用CSS图片（开发号（中））作为背景图片，可以使用网络图片资源，也可以使用base64，也可以使用图片符号，TabBar图片资源可以使用本地资源

unionid和openid的区别

每个用户在每个小程序中都有一个唯一的openid。为了与公众号你很多，小程序分享用户信息，为了识别同一用户，需要unionid。要获得union，需要在微信开放平台注册，控制要分享给公众号的小程序（不超过10个，超过10个需要验证，称为第三个字段），高度为最高。如果是位置元素。它始终位于顶部并且无法被覆盖。

• 请勿在scroll-view、swiper、picker-view、movable-view中使用textarea元素
• CSS动画对textarea无效

项目场景：页面底部有一个固定按钮（位置：固定），页面滚动时，textarea始终位于按钮的顶部。点击按钮点击文本区域

可以设置网络请求超时时间

配置

"networkTimeout": {
  "request": 10000 // 10秒
}

窗口配置

navigationBarTextStyle 浏览器标题颜色♸ 仅支持黑色状态/♸ 导航栏、标题和窗口背景颜色支持纯色，不支持渐变色 onLoad(options) options.query.a, options.query.b可获取

图像标签图像

图像默认width : 300px, height: 225px，lazy-load 延迟加载仅针对页面且滚动视图图像有效
mode 缩放模式，mode="widthFix" 经常使用（宽度保持不变，高度自动变化，并且第一个图像的形状保持不变）

Applet 可以控制 Applet 的关闭，但无法阻止它。关机（暂时无法使用）

小程序码

小程序码（葵花码）的使用方法有很多种。唯一的办法就是发布太少程序可以正常显示小程序代码

小程序第一次运行的恢复时间比以后要长

一般1到2天才能退回第一批货。 。所以为了及时上线，建议先做一个临时版本（可以快速安装一个页面），第一次审核后再发布。正常的运输周转只需 2-3 小时。

运行setData经常会导致性能问题

运行setData经常会导致延迟，操作反馈严重延迟，甚至可能崩溃。

场景：原计划是使用countUp进行数字动画。规则是经常改变数字值，使用setData，复制到模板中。

ES6转ES5，小程序找到文件夹下的js文件（很少）

项目中使用webpack将ES6转ES5，所以微信小程序中ES6转ES5的功能。这个陷阱有些隐蔽。测试时，在真5S机器上报js错误，原来是没有使用js文件（ES6，没有转换成ES5）。微信小程序会检测文件夹中的js文件。如果关闭 微信的ES6转ES5时，发现文件夹下的js文件不兼容ES5，报错。这个bug只出现在真正的5S手机中，5C常见。如果你在微信开发工具中开启ES6到ES5的转换，它会自动帮你完成转换，不会出现同样的问题。