小程序很火，開發(fā)看起來也很友好，但是真正開發(fā)過后就會(huì)發(fā)現(xiàn)，真的是坑很多。

組件的坑

在小程序中，組件分為原生組件和webview組件，原生組件的一個(gè)主要特點(diǎn)就是優(yōu)先級(jí)高，而且是無法用樣式來彌補(bǔ)的那種。

1.cover-view

cover-view(以及cover-image)是專門用來浮在原生組件之上的，而且目前為止是唯一的。
坑點(diǎn)：
1）文字無法自動(dòng)換行
2）無法設(shè)置漸變背景色
3）安卓上銷毀很卡
4）官方目前說cover-view中只能包裹c(diǎn)over-view 和cover-image，以及button
解決方案：
文字換行這個(gè)可以使用css強(qiáng)制換行，但是切斷點(diǎn)會(huì)很惡心并且無法控制

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

建議使用canvas來做，文字和emoji表情寬度是一樣的，全角半角的寬度也是可以確定的。

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

安卓的銷毀卡頓問題，這里可以使用樣式上的隱藏，而不是直接用指令銷毀。

包裹問題，事實(shí)上是可以包裹input元素的，不過input元素不顯示任何樣式設(shè)置，focus的時(shí)候會(huì)顯示光標(biāo)，所以只能用cover-view去構(gòu)建背景色。雖然可以包裹button但是在微信6.6.6及以下是不顯示的，所以這里要做兼容處理。

2.live-player

live-player可以設(shè)置全屏，但是在安卓下會(huì)導(dǎo)致canvas，button等元素不展示，這里還是采用hack的方式，樣式上設(shè)置全屏。

鑒權(quán)問題

目前小程序的鑒權(quán)是分為了兩類，一類使用button按鈕來觸發(fā)，一類使用authorize。

image.png

一些敏感權(quán)限都無法直接調(diào)起授權(quán)窗口了，這是對(duì)用戶的一種保護(hù)。我們可以看到getuserInfo這個(gè)接口比較特殊，由于線上大量小程序在使用，所以這個(gè)接口并沒有完全關(guān)閉（但是除了線網(wǎng)都無法體驗(yàn)）。
另一個(gè)問題是authorize接口只能調(diào)用一次，但是某些場景下我們還是有必要繼續(xù)引導(dǎo)用戶去確認(rèn)授權(quán)的，所以這里需要一個(gè)二次授權(quán)。
綜合上述需求，我們做出了如下流程

image.png