小程序模板網(wǎng)

小程序填坑實錄

發(fā)布時間:2018-06-08 10:17 所屬欄目:小程序開發(fā)教程

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


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24518.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢