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

資訊專欄INFORMATION COLUMN

小程序踩坑記錄

lily_wang / 3163人閱讀

摘要:小程序踩坑記錄小程序現(xiàn)階段缺陷還很多,在安卓手機(jī)上的性能也是很糟糕,估計(jì)實(shí)用性還不高。路由設(shè)置必須有序小程序的頁(yè)面都必須在注冊(cè),但這不是隨便登記一下就行了,頁(yè)面登記的順序一定是有層級(jí)關(guān)系的。

小程序踩坑記錄

小程序現(xiàn)階段缺陷還很多,在安卓手機(jī)上的性能也是很糟糕,估計(jì)實(shí)用性還不高。

一步一步都是坑,這里作為個(gè)人踩坑收集用(內(nèi)含吐槽),也是經(jīng)驗(yàn)分享,歡迎issues討論。

框架部分 1、殘念的數(shù)據(jù)綁定

要實(shí)現(xiàn)頁(yè)面數(shù)據(jù)響應(yīng)必須通過(guò)setData設(shè)定值,如果直接設(shè)定data里的值則無(wú)頁(yè)面響應(yīng)。

不能像其他MVVM框架那樣自動(dòng)響應(yīng),無(wú)語(yǔ)也無(wú)解。

2、setData()無(wú)法進(jìn)行動(dòng)態(tài)數(shù)組操作

這也是由于js對(duì)象的key部分一定是字符串造成的。

setDate只支持對(duì)靜態(tài)key的解析,無(wú)法傳入?yún)?shù)實(shí)現(xiàn)動(dòng)態(tài)遍歷。

比如:

有一個(gè)數(shù)組需要更改其中的值,循環(huán)傳入i將無(wú)效的,只能是固定數(shù)字。

for(var i=0; i<3; i++){
  this.setData({
      array[i]:‘hello’
    }
  })
}

如果你照上面這么寫的話就會(huì)報(bào)下面的錯(cuò)誤。

官方的意思就是只能這樣寫:

this.setData({
    "array[1]":‘hello’
  }
})
解決辦法:

不在遍歷中使用setData,可以先遍歷修改完后再用setData完整賦值完成響應(yīng)。

因?yàn)閖s里數(shù)組是地址傳遞,也就是說(shuō)實(shí)際上已經(jīng)修改了原數(shù)組,用setData只是為了響應(yīng)頁(yè)面。

3、路由設(shè)置必須有序

小程序的頁(yè)面都必須在app.json注冊(cè),但這不是隨便登記一下就行了,頁(yè)面登記的順序一定是有層級(jí)關(guān)系的。

如果你把首頁(yè)放在了某二級(jí)頁(yè)面后面,那就會(huì)報(bào)錯(cuò),這個(gè)文檔沒(méi)寫清楚真心坑爹。

"pages": [
  "pages/index/index",   //一級(jí)頁(yè)面
  "pages/list/list",     //二級(jí)頁(yè)面
  "pages/detail/detail", //三級(jí)頁(yè)面
  "pages/msg/msg"        //額外頁(yè)面
],
建議:

設(shè)計(jì)時(shí)頁(yè)面分級(jí)要明確,排列按順序,額外頁(yè)面(比如提示成功或失敗的頁(yè)面)放最后。

4、wx.redirectTo(OBJECT)不可跳一級(jí)頁(yè)

這個(gè)是關(guān)閉當(dāng)前頁(yè)跳轉(zhuǎn)到指定頁(yè)的功能,跳到一級(jí)頁(yè)會(huì)導(dǎo)致導(dǎo)航欄消失,并且該一級(jí)頁(yè)會(huì)被當(dāng)成一次跳轉(zhuǎn)。

小程序最多五層跳轉(zhuǎn),正常一級(jí)頁(yè)不會(huì)算入,但如果一級(jí)頁(yè)也被當(dāng)成一次跳轉(zhuǎn),那使用幾次后就不能動(dòng)了,因?yàn)槲宕螡M了,非常危險(xiǎn)

這點(diǎn)在新的官方文檔已經(jīng)說(shuō)明,并提供wx.switchTab(OBJECT)跳轉(zhuǎn)到一級(jí)頁(yè)面,不過(guò)由于wx.switchTab(OBJECT)不能傳參,使用還是比較有限的。

5、發(fā)起POST請(qǐng)求必須改默認(rèn)參數(shù)

默認(rèn)header["content-type"] 為 "application/json",在get請(qǐng)求中沒(méi)有問(wèn)題。

但如果想要發(fā)起POST就必須將header["content-type"] 為 "application/x-www-form-urlencoded",否則就收不到返回?cái)?shù)據(jù)。

wx.request({
  url: "test.php", //僅為示例,并非真實(shí)的接口地址
  data: yourData,
  header: {
      "content-type": "application/x-www-form-urlencoded" //這里必須改
      },
  success: function(res) {
    console.log(res.data)
  }
})
6、wx.setNavigationBarTitle(OBJECT)的調(diào)用時(shí)機(jī)

這個(gè)是改變頁(yè)面標(biāo)題的接口,必須在onShow觸發(fā)時(shí)才調(diào)用。

如果在onLoad觸發(fā)時(shí)調(diào)用,只會(huì)一閃而過(guò),然后又變成頁(yè)面配置json里的名字或全局配置json里的名字。

建議:

小程序這樣的設(shè)計(jì)體驗(yàn)不是很好,每次都會(huì)一閃而過(guò)的改名字,如果要避免這種情況就只能在配置json中設(shè)置了,不過(guò)這樣是靜態(tài)的。

樣式部分 1、不支持部分選擇器

樣式部分的缺陷是比較嚴(yán)重的,不支持相鄰兄弟選擇器,不支持級(jí)聯(lián)選擇器。。。

解決辦法:

這個(gè)暫時(shí)無(wú)解,只能說(shuō)改變一下樣式命名的習(xí)慣,使用橫杠連接體現(xiàn)層次,雖然這樣盒子多起來(lái)會(huì)變得很長(zhǎng)。

如果使用預(yù)處理,比如我用SASS可以這樣寫,稍微省點(diǎn)力:

.list {
  padding: 20rpx;
  &-name {
    color: red;
    &-number {
      color: blue;
      &-info {
        font-size: 16rpx;
      }
    }
  }
}
// 編譯結(jié)果
.list {
  padding: 20rpx;
}
.list-name {
  color: red;
}
.list-name-number {
  color: blue;
}
.list-name-number-info {
  font-size: 16rpx;
}
2、button無(wú)法正常改樣式

使用button標(biāo)簽?zāi)J(rèn)是無(wú)法更改樣式,加上類名也會(huì)因?yàn)閮?yōu)先級(jí)問(wèn)題不能覆蓋原樣式,搞不懂這樣設(shè)計(jì)的用意,十分不便。

解決辦法:

可以通過(guò)!important提升優(yōu)先級(jí)強(qiáng)行覆蓋,不推薦,因?yàn)闀?huì)影響其他默認(rèn)樣式;

也可以仿照默認(rèn)樣式寫法,進(jìn)行覆蓋,基本需要覆蓋的樣式如下(以primary為例,其他的以此類推),加上[plain]或[size="min"]即是其他鏤空版和縮小版的樣式;

推薦做法,盡量不破壞原有樣式,可以自定義一個(gè)type,然后仿照默認(rèn)樣式的寫法,就可以自定義button了;

使用view仿照一個(gè)button,把默認(rèn)的樣式復(fù)制一份即可,會(huì)增加無(wú)意義的代碼量,而且沒(méi)有默認(rèn)的交互事件(active)。

類名 觸發(fā)時(shí)機(jī)
button[type="primary"] 一般樣式
button[type="primary"].button-hover 按下(彈起)瞬間樣式
button[type="primary"]:not([disabled]):active 按下樣式(可選,沒(méi)有則使用上面的作為按下樣式,[plain]默認(rèn)有,需覆蓋)
button[disabled][type=" primary"] 禁用樣式

按下操作觸發(fā)順序是:

button[type="primary"] > button[type="primary"].button-hover > button[type="primary"][plain]:not([disabled]):active
3、button的默認(rèn)邊框

button的默認(rèn)邊框是使用after偽類,新建了一個(gè)2倍大小的空白content,設(shè)置了border,再縮小為0.5倍,剛好蓋在元素上面,下面就是默認(rèn)按鈕的樣式。

這是一種為了在不同設(shè)備實(shí)現(xiàn)1px的做法,但本身小程序就有rpx啊,還用這雞肋的辦法讓人不解(笑)。
也給更改button樣式一點(diǎn)阻礙,需要把a(bǔ)fter設(shè)置display:none才能去掉邊框。

4、button不同設(shè)備上表現(xiàn)差異

真機(jī)上會(huì)出現(xiàn)button內(nèi)文字高度偏高的問(wèn)題(安卓機(jī),iOS未測(cè)),而模擬器上表現(xiàn)正常(居中),嘗試覆蓋默認(rèn)樣式進(jìn)行修正(改為padding撐開(kāi)盒子的方法代替原來(lái)的line-height),并沒(méi)有效果。所以暫無(wú)解決辦法;

min按鈕在真機(jī)上會(huì)出現(xiàn)左右邊框消失的情況,暫無(wú)解決辦法。

5、rem在真機(jī)設(shè)備上的表現(xiàn)有差異

即使在根元素page上設(shè)置了字體大小,rem在不同設(shè)備上的表現(xiàn)還是無(wú)法統(tǒng)一。

建議:

使用rpx作為響應(yīng)式字體的單位,效果比較好,rpx作為小程序的特性還是在不同設(shè)備的表現(xiàn)上還是很實(shí)用的。

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/82414.html

相關(guān)文章

  • mpvue實(shí)現(xiàn)微信程序(歡迎踩坑

    摘要:最近剛使用完成了微信小程序的開(kāi)發(fā),寫點(diǎn)東西,做個(gè)記錄。專門用于外鏈跳轉(zhuǎn)但是外鏈跳轉(zhuǎn)還是個(gè)坑,微信僅能支持跳到在它那邊注冊(cè)過(guò)的的網(wǎng)址,其他還是不行,暫時(shí)沒(méi)有找到好的方式看了知乎,它的外鏈直接轉(zhuǎn)成了文本,不可點(diǎn)擊了。 最近剛使用mpvue完成了微信小程序的開(kāi)發(fā),寫點(diǎn)東西,做個(gè)記錄。 首先依舊是兩個(gè)傳送門: 微信小程序文檔:[https://developers.weixin.qq.com/...

    jas0n 評(píng)論0 收藏0
  • mpvue實(shí)現(xiàn)微信程序(歡迎踩坑

    摘要:最近剛使用完成了微信小程序的開(kāi)發(fā),寫點(diǎn)東西,做個(gè)記錄。專門用于外鏈跳轉(zhuǎn)但是外鏈跳轉(zhuǎn)還是個(gè)坑,微信僅能支持跳到在它那邊注冊(cè)過(guò)的的網(wǎng)址,其他還是不行,暫時(shí)沒(méi)有找到好的方式看了知乎,它的外鏈直接轉(zhuǎn)成了文本,不可點(diǎn)擊了。 最近剛使用mpvue完成了微信小程序的開(kāi)發(fā),寫點(diǎn)東西,做個(gè)記錄。 首先依舊是兩個(gè)傳送門: 微信小程序文檔:[https://developers.weixin.qq.com/...

    xuexiangjys 評(píng)論0 收藏0
  • mpvue實(shí)現(xiàn)微信程序(歡迎踩坑

    摘要:最近剛使用完成了微信小程序的開(kāi)發(fā),寫點(diǎn)東西,做個(gè)記錄。專門用于外鏈跳轉(zhuǎn)但是外鏈跳轉(zhuǎn)還是個(gè)坑,微信僅能支持跳到在它那邊注冊(cè)過(guò)的的網(wǎng)址,其他還是不行,暫時(shí)沒(méi)有找到好的方式看了知乎,它的外鏈直接轉(zhuǎn)成了文本,不可點(diǎn)擊了。 最近剛使用mpvue完成了微信小程序的開(kāi)發(fā),寫點(diǎn)東西,做個(gè)記錄。 首先依舊是兩個(gè)傳送門: 微信小程序文檔:[https://developers.weixin.qq.com/...

    notebin 評(píng)論0 收藏0
  • 微信程序開(kāi)發(fā)踩坑總結(jié)(持續(xù)完善中)

    摘要:由于個(gè)人技術(shù)水平有限,在問(wèn)題描述,解決方案中存在的問(wèn)題,希望可以得到各位前輩的指點(diǎn)。本篇主要是記錄我在開(kāi)發(fā)微信小程序中遇到的問(wèn)題。各記錄點(diǎn)排序,跟隨自己開(kāi)發(fā)過(guò)程中的問(wèn)題出現(xiàn)時(shí)間而定。。微信小程序數(shù)據(jù)頁(yè)面數(shù)據(jù)傳遞總結(jié) 由于個(gè)人技術(shù)水平有限,在問(wèn)題描述,解決方案中存在的問(wèn)題,希望可以得到各位前輩的指點(diǎn)。本篇主要是記錄我在開(kāi)發(fā)微信小程序中遇到的問(wèn)題。各記錄點(diǎn)排序,跟隨自己開(kāi)發(fā)過(guò)程中的問(wèn)題出現(xiàn)...

    tianhang 評(píng)論0 收藏0
  • FE.WX-程序“無(wú)聊廣場(chǎng)”游戲前端性能優(yōu)化與踩坑攻略

    摘要:本文主要針對(duì)小程序無(wú)聊廣場(chǎng)的前端開(kāi)發(fā)內(nèi)容做總結(jié),記錄常見(jiàn)的一些老生常談的進(jìn)階手法,對(duì)小程序中的動(dòng)畫音頻等踩坑做出解決方案。 背景 一個(gè)交互不復(fù)雜,對(duì)刷新頻率和動(dòng)畫效果要求不高的小游戲,不需要使用canvas主導(dǎo)的解決方案,使用dom操作一樣可以完成。節(jié)省了cocos creater的學(xué)習(xí)成本,值得一試。本文主要針對(duì)小程序無(wú)聊廣場(chǎng)的前端開(kāi)發(fā)內(nèi)容做總結(jié),記錄常見(jiàn)的一些老生常談的進(jìn)階手法,對(duì)...

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

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

0條評(píng)論

lily_wang

|高級(jí)講師

TA的文章

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