国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小程序填坑實錄

xiyang / 3214人閱讀

摘要：注意，這里有一個坑，在開發(fā)者工具上回調(diào)是不會被調(diào)用的，只有在手機上才有效。

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

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

用戶授權(quán)按鈕設(shè)計思路

授權(quán)按鈕設(shè)計成全屏透明的，用戶點擊屏幕任意位置即可發(fā)起授權(quán)

小程序中使用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 => { ... }) ...
利用::after偽元素添加半透明背景 
.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ù)，結(jié)合vw, vh等單位，可以動態(tài)設(shè)定CSS長度

{ height: calc(100vh - 300rpx); }
讓小程序支持服務(wù)端Session

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

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

使用上面的方法包裝了wx.request，可以正常使用基于Cookie的服務(wù)器Session，在開發(fā)工具上，連接WebSocket也可以在握手時正常獲取Session中的屬性，但手機實測時發(fā)現(xiàn)Session丟失

經(jīng)研究，估計因為開發(fā)者工具是基于Chrome瀏覽器的，因此WebSocket請求也自動帶上了瀏覽器緩存的Cookie，但手機上實現(xiàn)機制不同，因此沒有帶Cookie請求頭

包裝一下wx.connectSocket，添加Cookie請求頭即可

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

open-data上面不能綁定事件，簡單實現(xiàn)可以用navigator包裹open-data，不用寫js代碼即可實現(xiàn)點擊跳轉(zhuǎn)頁面；

navigator相當于html的a元素，默認為inline，可修改display樣式為block

重載按鈕的樣式

因為分享、客服之類的功能只能通過按鈕喚起，不能使用view或navigator，因此為了界面統(tǒng)一，需要重載按鈕的樣式

我的程序的風格是半透明背景按鈕，使用::after偽元素實現(xiàn)，這里發(fā)現(xiàn)一個奇葩的坑：似乎按鈕的默認樣式把它的::after偽元素縮小到了原大小的一半，因此需要增加一行transform把它恢復原大小：

.btn::after {
    ...
    transform: scaleX(1) scaleY(1);
}
關(guān)于轉(zhuǎn)發(fā)

需要在Page中添加onShareAppMessage方法，否則點右上角菜單不會出現(xiàn)轉(zhuǎn)發(fā)選項

除了右上角菜單外，可以使用open-type="share"的按鈕

可以通過onShareAppMessage的參數(shù)中的from字段區(qū)分事件來源是菜單還是按鈕

通過onShareAppMessage方法返回的對象來定制轉(zhuǎn)發(fā)界面顯示的內(nèi)容

另外，在返回的對象上可添加success/fail回調(diào)方法來判斷轉(zhuǎn)發(fā)是否成功以便在程序中發(fā)放獎勵。注意，這里有一個坑，在開發(fā)者工具(v1.02.1805181)上回調(diào)是不會被調(diào)用的，只有在手機上才有效。

阿里云RDS支持emoji表情符號

很多微信用戶的名字里面包含emoji字符，必須解決此問題

創(chuàng)建數(shù)據(jù)庫時需要指定字符集為utf8mb4

確保MySQL數(shù)據(jù)庫版本5.7以上

確保mysql-connector-java版本5.1.13以上

阿里云RDS后臺->實例詳情->參數(shù)設(shè)置，修改character_set_server的值為utf8mb4

SVG矢量圖支持驗證

經(jīng)測試，三端均支持SVG背景圖，支持"data:image/svg+xml,..."內(nèi)嵌svg圖片

image對象，可以src直接引用本地或網(wǎng)絡(luò)svg圖片，但不支持"data:image/svg+xml,..."直接內(nèi)嵌svg圖片

CSS3 clip-path支持驗證

經(jīng)測試，三端當前版本微信均支持clip-path

iOS CSS3動畫BUG

經(jīng)驗證，iOS上，使用CSS3 animation實現(xiàn)動畫，循環(huán)播放的沒有問題，但固定次數(shù)播放的則有問題

因此，單次播放的動畫應(yīng)考慮用transition實現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113442.html

相關(guān)文章

  • 小程序項目之填坑小記

    摘要：簡訴是的，真的，你沒有看錯，我就是上次那個加薪的，但是現(xiàn)在問題來了，最近又搞了個小程序的需求，又填了不少坑，其中的辛酸就不說了，說多了都是淚 showImg(https://segmentfault.com/img/bVbi2wI?w=1008&h=298); 作者：首席填坑官?蘇南公眾號：honeyBadger8，本文原創(chuàng)，著作權(quán)歸作者所有，轉(zhuǎn)載請注明原鏈接及出處。 簡訴 　　是的，...

    malakashi 評論0 收藏0

  • 20181012微信小程序填坑手冊～

    摘要：全屏蒙版彈窗遮不住的層級還是很高的，當出現(xiàn)全屏蒙版彈窗時，是無法蓋住的，可以調(diào)用微信的，不過需要注意兼容低版本在類設(shè)置的顏色并沒有變化。 從6月份開始到現(xiàn)在，寫小程序?qū)⒔?個月了開發(fā)時給自己埋了不少坑～給大家分享下我的填坑經(jīng)驗～～ 開發(fā)部分 1.小程序的組件修改不能觸發(fā)頁面刷新？需要在父級文件上保存下才會觸發(fā)（使用wepy開發(fā)） 2.接口請求出現(xiàn)的問題？記得勾選調(diào)試開發(fā)工具上 不校驗...

    劉玉平 評論0 收藏0

  • Taro開發(fā)小程序填坑筆記（一）

    摘要：太懶了，早就想寫這個系列了，知道今天才開始動筆，暫且就從這里開始吧。本該到此就結(jié)束了。不過那是不可能的。到此為止問題基本解決了，關(guān)于和的問題也提了給的官方團隊，鏈接地址最后，非常感謝團隊的耐心解答，真的非常。 太懶了，早就想寫這個系列了，知道今天才開始動筆，暫且就從這里開始吧。 項目腳手架：Taro + TaroUI 問題： TaroUI的Modal彈層在軟鍵盤彈起的時候無法被頂上去，...

    mylxsw 評論0 收藏0

  • [填坑手冊]小程序Canvas生成海報（一）---完整流程

    摘要：海報生成示例最近智酷君在做小程序生成海報的項目中遇到一些棘手的問題，在網(wǎng)上查閱了各種資料，也踩扁了各種坑，智酷君希望把這些填坑經(jīng)驗整理一下分享出來，避免后來的兄弟重復掉坑。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海報生成示例 最近智酷君在做[小程序]canvas生成海報的項目中遇到一些棘手的問題，在網(wǎng)上查閱了...

    shleyZ 評論0 收藏0

發(fā)表評論

0條評論

xiyang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<