open-data頭像如何設(shè)置樣式

• 設(shè)置成 { display: block; overflow: hidden; } 就可以正常設(shè)置樣式了，包括圓形頭像等

小程序中使用Promise

• 引用npm中的es6-promise即可；
• 使用下面的函數(shù)包裹微信API即可將其轉(zhuǎn)為Promise方式調(diào)用：

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

純CSS方式給元素添加半透明背景

.elem { /* 元素本身添加樣式 */ 
    position: relative; /* 為了后面的偽元素以本元素為定位基準 */
    z-index: 10;    /* 渲染在偽元素之上 */
    /* 其它樣式，大小，字體等 */
}
.elem::after { /* 給元素添加::after偽元素并設(shè)置為半透明：*/ 
    content: ""; 
    position: absolute; 
    left: 0; 
    background-color: white; 
    opacity: 0.2;
    /* 其它樣式，大小應(yīng)和主元素一致 */
}

開發(fā)階段給所有元素添加虛線邊框

• 小程序WXSS似乎不支持"*"選擇器，因此只能用以下笨辦法：

/* 僅供測試，發(fā)布版請刪除 */
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;
}

漸變背景

• 為了在開發(fā)工具生效，需要使用"-webkit-"前綴：

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

占據(jù)垂直方向的剩余空間

• 使用CSS的calc函數(shù)

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

讓小程序支持服務(wù)端Session

• 主要就是要添加Cookie支持，可以包裝一下wx.request方法實現(xiàn)
  1) 解析response的Set-Cookie應(yīng)答頭，并將cookie保存在本地
  2) 以后每次請求把本地保存的cookie放到Cookie請求頭中

點擊用戶頭像跳轉(zhuǎn)頁面

• open-data上面不能綁定事件，簡單實現(xiàn)可以用navigator包裹open-data，不用寫js代碼即可實現(xiàn)點擊跳轉(zhuǎn)頁面；
• navigator相當于html的a元素，默認為inline，可修改display樣式為block