小程序项目开发注意

兼容性问题

1. 时间数据格式在Ios端的兼容问题

当时间格式为 "XXXX-XX-XX"格式时，new Date()该数据时 Ios 端 会报 NaN-NaN-NaN NaN:NaN异常，所以需要将这种格式的时间数据转换成 “XXXX/XX/XX” 形式来避免这种错误。

//使用正则表达式来替换
function formatTimeStamp( date ) {
   return new Date( date ) || new Date( date.replace( /-/g, '/') );
}

2. Ios 端使用 overflow: scroll 滚动使用体验问题

当 Ios 使用滚动时和其他系统相比是没有开启滚动回弹的，非常影响使用体验。

//使用-webkit-overflow-scrolling: touch; 属性开启

使用这个属性时，可能会造成偶尔滑动卡住的问题，常见的解决方法有：

1. 使用这个属性的元素尽量不要设置定位或手动设置为 position: static;
2. 如果动态添加内容使不能滚动，让子元素的 height + 1 — height: calc(100% + 1px);

使用这个属性时的其他bug:

1. 滚动中 scrollTop 不会发生变化
2. 手势会穿过其他元素触发滚动元素
3. 滚动时会暂停其他 transition

小程序框架问题

1. 输入框封装为一个组件时造成获取输入值缺失问题

当输入框被封装在组件里时，使用 bindinput 获取用户输入值时，当用户使用的是手写输入法，输入后不点击确定文字时，获得的值是没有最后输入的那个文字的，因为这个时候 bindinput 监听不到这种输入，必须选择文字或后续输入使之前的输入触发 bindinput 事件。

2. 小程序打开App按钮的限制

在 button 组件的 open-type 属性设置为 launchApp 时,用户可通过点击该按钮打开 App,但是只在某些场景下才会生效:

1. 从场景值 1036(App分享卡片) 或 1069(从App打开的小程序) 中点击时, 小程序会内置一个状态为 true,表示可以打开 App.
2. 1038(从其他小程序返回小程序), 1089(从聊天顶部场景中的最近使用中打开小程序), 1090(长按小程序右上角菜单唤出最近使用历史进入的小程序),这些场景保持上一次打开小程序打开App能力的状态.

3. Toast显示问题

小程序中 showToast 和 showLoading 同时只能显示一个，所以当后续出现 Loading 时，Toast 的显示时间可能会不对。

4. 小程序跳转微信公众号问题

小程序中想要跳转到公众号，首先需要在公众平台关联该公众号，其次通过 web-view 组件跳转到相关文章的URL上。（只能跳转到文章详情页，不能跳转公众号根据页面模板设置的页面和公众号首页）

5. 小程序图片、视频链接不要进行重定向

当视频地址重定向时在真机上存在不能播放的问题，图片进行重定向时存在部分安卓机大图预览一直黑屏加载。

6. cover-view、cover-image组件尽量不使用

这两个组件的CSS属性限制较多，除必须要在map、video等原生组件上覆盖元素的情况时，其余情况应禁止使用。

7. 小程序视频列表相关问题

小程序视频列表存在当视频过多时造成内存占用过大，播放错误的问题，可通过公用一个播放器来播放不同视频解决。

CSS相关

9. 可以开启GPU硬件加速的CSS属性

   transform、opacity、filter