成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小程序填坑實(shí)錄

xiyang / 3227人閱讀

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

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

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

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

授權(quán)按鈕設(shè)計(jì)成全屏透明的，用戶點(diǎn)擊屏幕任意位置即可發(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; /* 為了后面的偽元素以本元素為定位基準(zhǔn) */
    z-index: 10;    /* 渲染在偽元素之上 */
    /* 其它樣式，大小，字體等 */
}
.elem::after { /* 給元素添加::after偽元素并設(shè)置為半透明：*/ 
    content: ""; 
    position: absolute; 
    left: 0; 
    background-color: white; 
    opacity: 0.2;
    /* 其它樣式，大小應(yīng)和主元素一致 */
}
開(kāi)發(fā)階段給所有元素添加虛線邊框

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

/* 僅供測(cè)試，發(fā)布版請(qǐng)刪除 */
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;
}
漸變背景支持

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

.mainbg {
    background: -webkit-linear-gradient(left,#18b6ff,#aa29ff);
    background: linear-gradient(left,#18b6ff,#aa29ff);
}
占據(jù)垂直方向的剩余空間

使用CSS的calc函數(shù)，結(jié)合vw, vh等單位，可以動(dòng)態(tài)設(shè)定CSS長(zhǎng)度

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

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

開(kāi)發(fā)工具OK，但手機(jī)實(shí)測(cè)WebSocket會(huì)話丟失

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

經(jīng)研究，估計(jì)因?yàn)殚_(kāi)發(fā)者工具是基于Chrome瀏覽器的，因此WebSocket請(qǐng)求也自動(dòng)帶上了瀏覽器緩存的Cookie，但手機(jī)上實(shí)現(xiàn)機(jī)制不同，因此沒(méi)有帶Cookie請(qǐng)求頭

包裝一下wx.connectSocket，添加Cookie請(qǐng)求頭即可

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

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

navigator相當(dāng)于html的a元素，默認(rèn)為inline，可修改display樣式為block

重載按鈕的樣式

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

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

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

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

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

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

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

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

阿里云RDS支持emoji表情符號(hào)

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

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

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

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

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

SVG矢量圖支持驗(yàn)證

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

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

CSS3 clip-path支持驗(yàn)證

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

iOS CSS3動(dòng)畫BUG

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113442.html

相關(guān)文章

  • 小程序項(xiàng)目之填坑小記

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

    malakashi 評(píng)論0 收藏0

  • 20181012微信小程序填坑手冊(cè)～

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

    劉玉平 評(píng)論0 收藏0

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

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

    mylxsw 評(píng)論0 收藏0

  • [填坑手冊(cè)]小程序Canvas生成海報(bào)（一）---完整流程

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

    shleyZ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<