小程序填坑

小程序很火，开发看起来也很友好，但是真正开发过后就会发现，真的是坑很多。

组件的坑

在小程序中，组件分为原生组件和webview组件，原生组件的一个主要特点就是优先级高，而且是无法用样式来弥补的那种。

1.cover-view

cover-view(以及cover-image)是专门用来浮在原生组件之上的，而且目前为止是唯一的。
坑点：
1）文字无法自动换行
2）无法设置渐变背景色
3）安卓上销毁很卡
4）官方目前说cover-view中只能包裹cover-view 和cover-image，以及button
解决方案：
文字换行这个可以使用css强制换行，但是切断点会很恶心并且无法控制

 word-break: break-all;
 white-space: pre-wrap;

建议使用canvas来做，文字和emoji表情宽度是一样的，全角半角的宽度也是可以确定的。

至于背景色的话就可以使用cover-image来做。

安卓的销毁卡顿问题，这里可以使用样式上的隐藏，而不是直接用指令销毁。

包裹问题，事实上是可以包裹input元素的，不过input元素不显示任何样式设置，focus的时候会显示光标，所以只能用cover-view去构建背景色。虽然可以包裹button但是在微信6.6.6及以下是不显示的，所以这里要做兼容处理。

2.live-player

live-player可以设置全屏，但是在安卓下会导致canvas，button等元素不展示，这里还是采用hack的方式，样式上设置全屏。

鉴权问题

目前小程序的鉴权是分为了两类，一类使用button按钮来触发，一类使用authorize。

image.png

一些敏感权限都无法直接调起授权窗口了，这是对用户的一种保护。我们可以看到getuserInfo这个接口比较特殊，由于线上大量小程序在使用，所以这个接口并没有完全关闭（但是除了线网都无法体验）。
另一个问题是authorize接口只能调用一次，但是某些场景下我们还是有必要继续引导用户去确认授权的，所以这里需要一个二次授权。
综合上述需求，我们做出了如下流程

image.png
这里最主要的一点就是做一个类似于原生授权的弹窗。