小程序填坑實錄

open-data頭像如何設置樣式

• 設置成 { display: block; overflow: hidden; } 就能夠正常設置樣式了，包括圓形頭像等

用戶受權按鈕設計思路

• 受權按鈕設計成全屏透明的，用戶點擊屏幕任意位置便可發起受權

小程序中使用Promise

• 引用npm中的es6-promise便可；
• 使用下面的函數包裹微信API便可將其轉爲Promise方式調用：

function promise(fn) {
    return function (obj = {}) {
        return new Promise((resolve, reject) => {
            obj.success = res => resolve(res);
            obj.fail = res => reject(res);
            fn(obj);
        })
    }
}
...
調用方式:
utils.promise(wx.request)({ url: ... }).then(response => { ... }) ...

利用::after僞元素添加半透明背景

.elem { /* 元素自己添加樣式 */ 
    position: relative; /* 爲了後面的僞元素以本元素爲定位基準 */
    z-index: 10;    /* 渲染在僞元素之上 */
    /* 其它樣式，大小，字體等 */
}
.elem::after { /* 給元素添加::after僞元素並設置爲半透明：*/ 
    content: ""; 
    position: absolute; 
    left: 0; 
    background-color: white; 
    opacity: 0.2;
    /* 其它樣式，大小應和主元素一致 */
}

開發階段給全部元素添加虛線邊框

• 小程序WXSS彷佛不支持"*"選擇器，所以只能用如下笨辦法：

/* 僅供測試，發佈版請刪除 */
view,icon,text,rich-text,progress,image,button,textarea,open-data,navigator,canvas,checkbox,form,input,label,picker,radio,slider,switch {
    outline: 1px dashed lightblue;
}

漸變背景支持

• 爲了在開發工具生效，須要使用"-webkit-"前綴：

.mainbg {
    background: -webkit-linear-gradient(left,#18b6ff,#aa29ff);
    background: linear-gradient(left,#18b6ff,#aa29ff);
}

佔據垂直方向的剩餘空間

• 使用CSS的calc函數，結合vw, vh等單位，能夠動態設定CSS長度

{ height: calc(100vh - 300rpx); }

讓小程序支持服務端Session

• 主要就是要添加Cookie支持，能夠包裝一下wx.request方法實現
  1) 解析response的Set-Cookie應答頭，並將cookie保存在本地
  2) 之後每次請求把本地保存的cookie放到Cookie請求頭中

開發工具OK，但手機實測WebSocket會話丟失

• 使用上面的方法包裝了wx.request，能夠正常使用基於Cookie的服務器Session，在開發工具上，鏈接WebSocket也能夠在握手時正常獲取Session中的屬性，但手機實測時發現Session丟失
• 經研究，估計由於開發者工具是基於Chrome瀏覽器的，所以WebSocket請求也自動帶上了瀏覽器緩存的Cookie，但手機上實現機制不一樣，所以沒有帶Cookie請求頭
• 包裝一下wx.connectSocket，添加Cookie請求頭便可

點擊用戶頭像跳轉頁面

• open-data上面不能綁定事件，簡單實現能夠用navigator包裹open-data，不用寫js代碼便可實現點擊跳轉頁面；
• navigator至關於html的a元素，默認爲inline，可修改display樣式爲block

重載按鈕的樣式

• 由於分享、客服之類的功能只能經過按鈕喚起，不能使用view或navigator，所以爲了界面統一，須要重載按鈕的樣式
• 個人程序的風格是半透明背景按鈕，使用::after僞元素實現，這裏發現一個奇葩的坑：彷佛按鈕的默認樣式把它的::after僞元素縮小到了原大小的一半，所以須要增長一行transform把它恢復原大小：

.btn::after {
    ...
    transform: scaleX(1) scaleY(1);
}

關於轉發

• 須要在Page中添加onShareAppMessage方法，不然點右上角菜單不會出現轉發選項
• 除了右上角菜單外，可使用open-type="share"的按鈕
• 能夠經過onShareAppMessage的參數中的from字段區分事件來源是菜單仍是按鈕
• 經過onShareAppMessage方法返回的對象來定製轉發界面顯示的內容
• 另外，在返回的對象上可添加success/fail回調方法來判斷轉發是否成功以便在程序中發放獎勵。注意，這裏有一個坑，在開發者工具(v1.02.1805181)上回調是不會被調用的，只有在手機上纔有效。

阿里雲RDS支持emoji表情符號

• 不少微信用戶的名字裏麪包含emoji字符，必須解決此問題
• 建立數據庫時須要指定字符集爲utf8mb4
• 確保MySQL數據庫版本5.7以上
• 確保mysql-connector-java版本5.1.13以上
• 阿里雲RDS後臺->實例詳情->參數設置，修改character_set_server的值爲utf8mb4

SVG矢量圖支持驗證

• 經測試，三端均支持SVG背景圖，支持"data:image/svg+xml,..."內嵌svg圖片
• image對象，能夠src直接引用本地或網絡svg圖片，但不支持"data:image/svg+xml,..."直接內嵌svg圖片

CSS3 clip-path支持驗證

• 經測試，三端當前版本微信均支持clip-path

iOS CSS3動畫BUG

• 經驗證，iOS上，使用CSS3 animation實現動畫，循環播放的沒有問題，但固定次數播放的則有問題
• 所以，單次播放的動畫應考慮用transition實現