小程式填坑實錄

rockswang發表於2018-06-07

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實現

相關文章