小程序模板網(wǎng)

細(xì)數(shù)小程序的坑

發(fā)布時(shí)間:2018-05-05 15:18 所屬欄目:小程序開(kāi)發(fā)教程

最近做了一個(gè)應(yīng)用,把玩了一下小程序??傮w感覺(jué)還是可以,但是限制太多,最適合的場(chǎng)景可能就是手機(jī)小型應(yīng)用。這節(jié),我們來(lái)細(xì)數(shù)一下小程序開(kāi)發(fā)過(guò)程的坑。

查看原文,獲得更好的體驗(yàn)哦~

一、小程序注冊(cè)前提

小程序注冊(cè)的前提是,沒(méi)有注冊(cè)過(guò)任何的微公眾平,如未注冊(cè)過(guò)訂閱號(hào)、服務(wù)號(hào)之類的。郵箱要求也是是這樣的:

未被公眾平臺(tái)注冊(cè),未被開(kāi)放平臺(tái)注冊(cè),未被個(gè)人微信號(hào)綁定的郵箱

恰巧之前開(kāi)發(fā)過(guò)微信公眾號(hào),結(jié)果登陸后死活找不到小程序,后來(lái)才發(fā)現(xiàn)了這個(gè)前提。教訓(xùn)就是,一定要好好審題,提前看看小程序的介紹說(shuō)明。

二、大小限制

是的,你沒(méi)有看錯(cuò),小程序?qū)?xiàng)目大小做了限制,你的項(xiàng)目不能超過(guò) 2048kb 。這個(gè)大小的項(xiàng)目文件,能做的事情就不言自明了。

我們可以做工具類,服務(wù)類,投票類,在線答題類的小應(yīng)用。

此外,還需要注意的是,如果你用了過(guò)多的圖片資源,要么精簡(jiǎn)要么轉(zhuǎn)在線地址,否則,你的小程序很可能大小失控。

這里有一些建議,優(yōu)化后的效果還是很不錯(cuò)的。

  1. 圖片資源過(guò)多的話,建議本地和遠(yuǎn)程協(xié)調(diào),將項(xiàng)目大小控制在一定范圍內(nèi)。全用遠(yuǎn)程圖片,可能會(huì)出現(xiàn)加載白屏問(wèn)題;
  2. 如果你用了 wepy 構(gòu)建工具,切記上線前一定要檢查 dist 文件夾中的冗余文件,它只添加而不會(huì)刪除;
  3. 圖片可以優(yōu)化一下,減少大小,推薦使用 TinyPng 無(wú)損壓縮一下;

三、水平滾動(dòng)與垂直滾動(dòng)

這個(gè) bug 就比較氣人了,當(dāng)你使用了 swiper 的時(shí)候,左右滑動(dòng),屏幕上下也會(huì)跟著抖動(dòng)。一般情況,我們禁掉瀏覽器的滾動(dòng)行為:


//阻止瀏覽器默認(rèn)事件
event.preventDefault();

移動(dòng)端處理水平滾動(dòng)和垂直滾動(dòng)的原理大致是這樣的:


var xx,yy,XX,YY,swipeX,swipeY ;
div.addEventListener('touchstart',function(event){
    xx = event.targetTouches[0].screenX ;
    yy = event.targetTouches[0].screenY ;
    swipeX = true;
    swipeY = true ;
})
div.addEventListener('touchmove',function(event){
    XX = event.targetTouches[0].screenX ;
    YY = event.targetTouches[0].screenY ;
    if(swipeX && Math.abs(XX-xx)-Math.abs(YY-yy)>0)  //左右滑動(dòng)
    {
        event.stopPropagation();//組織冒泡
        event.preventDefault();//阻止瀏覽器默認(rèn)事件
        swipeY = false ;
        //左右滑動(dòng)
    }
    else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){  //上下滑動(dòng)
        swipeX = false ;
        //上下滑動(dòng),使用瀏覽器默認(rèn)的上下滑動(dòng)
    }
})

本身并不是什么很難的問(wèn)題,然而,在微信中就沒(méi)有任何辦法了。很多人會(huì)說(shuō),你 overflow一下啊,我只能呵呵表示,并甩給你一篇文章 微信小程序 在 canvas 畫(huà)布上劃動(dòng),如何阻止頁(yè)面上下動(dòng)?

還可以看看這篇文章: 解決微信小程序自定義彈窗滾動(dòng)與頁(yè)面滾動(dòng)沖突

這里摘自 官方文檔 :Bug & Tip

  • tip: 請(qǐng)勿在 scroll-view 中使用 textarea、map、canvas、video 組件
  • tip: scroll-into-view 的優(yōu)先級(jí)高于 scroll-top
  • tip: 在滾動(dòng) scroll-view 時(shí)會(huì)阻止頁(yè)面回彈,所以在 scroll-view 中滾動(dòng),是無(wú)法觸發(fā) onPullDownRefresh
  • tip: 若要使用下拉刷新,請(qǐng)使用頁(yè)面的滾動(dòng),而不是 scroll-view ,這樣也能通過(guò)點(diǎn)擊頂部狀態(tài)欄回到頁(yè)面頂部

四、圖片組件

既然叫組件了,那說(shuō)明已經(jīng)被動(dòng)過(guò)手腳了,具體的表現(xiàn)是啥呢?小程序會(huì)給 image 組件默認(rèn)寬高:

注:image 組件默認(rèn)寬度 300px 、高度 225px

看起來(lái)是完美的,可是如果你要圖片自適應(yīng)外容器呢?OK,小程序提供了 mode 屬性,但是并不完全,你還需要這么寫(xiě):


<imagestyle="width: 100%;"mode="widthFix"src="http://jartto.wang"></image>

是的,你還需要設(shè)置他的寬度,才能使用 mode="widthFix" ,否則又開(kāi)始默認(rèn)了,沮喪:joy:。至于 mode 提供的其他裁切屬性 top , bottom , center 等等,不太清楚具體的應(yīng)用場(chǎng)景是什么。

五、腳本不能使用 window 等對(duì)象

頁(yè)面的腳本邏輯是在 JsCore 中運(yùn)行, JsCore 是一個(gè)沒(méi)有窗口對(duì)象的環(huán)境,所以不能在腳本中使用 window ,也無(wú)法在腳本中操作組件。

當(dāng)然,zepto/jquery 會(huì)使用到 window 對(duì)象和 document 對(duì)象,所以無(wú)法使用。

六、wx.navigateTo 無(wú)法打開(kāi)頁(yè)面

一個(gè)應(yīng)用同時(shí)只能打開(kāi) 5 個(gè)頁(yè)面,當(dāng)已經(jīng)打開(kāi)了 5 個(gè)頁(yè)面之后, wx.navigateTo 不能正常打開(kāi)新頁(yè)面。請(qǐng)避免多層級(jí)的交互方式,或者使用 wx.redirectTo 。

這個(gè)應(yīng)該不算是 bug 吧,我們姑且認(rèn)為它是一個(gè) feature 。

七、樣式表不支持級(jí)聯(lián)選擇器

WXSS 支持以.開(kāi)始的類選擇器。如:


.normal_view {
  color: #000000;
  padding: 10px;
}

可以使用標(biāo)簽選擇器,控制同一類組件的樣式。如:使用 input 標(biāo)簽選擇器控制 <input/>的默認(rèn)樣式。


input {
  width: 100px;
}

八、不能直接操作 Page.data

小程序中的規(guī)則,只能遵守:

避免在直接對(duì) Page.data 進(jìn)行賦值修改,請(qǐng)使用 Page.setData 進(jìn)行操作才能將數(shù)據(jù)同步到頁(yè)面中進(jìn)行渲染。

此外,如果你有了 WePY 框架的話,賦值操作是有優(yōu)化的。 WePY 使用臟數(shù)據(jù)檢查對(duì) setData 進(jìn)行封裝,在函數(shù)運(yùn)行周期結(jié)束時(shí)執(zhí)行臟數(shù)據(jù)檢查,一來(lái)可以不用關(guān)心頁(yè)面多次 setData 是否會(huì)有性能上的問(wèn)題,二來(lái)可以更加簡(jiǎn)潔去修改數(shù)據(jù)實(shí)現(xiàn)綁定,不用重復(fù)去寫(xiě) setData方法。代碼如下:


this.title = 'this is title';

需注意的是,在異步函數(shù)中更新數(shù)據(jù)的時(shí),必須手動(dòng)調(diào)用 $apply 方法,才會(huì)觸發(fā)臟數(shù)據(jù)檢查流程的運(yùn)行。如:


setTimeout(()=> {
    this.title = 'this is title';
    this.$apply();
}, 3000);

九、本地資源無(wú)法通過(guò) WXSS 獲取

當(dāng)你需要平鋪?lái)?yè)面背景的時(shí)候,肯能會(huì)碰到這樣的異常:

很清楚,小程序已經(jīng)告訴你怎么回事了: background-image :可以使用網(wǎng)絡(luò)圖片,或者 base64 ,或者使用 <image/> 標(biāo)簽。

十、修改窗口的背景色

整個(gè)小程序的代碼是包在 page 標(biāo)簽中的,所以使用 page 標(biāo)簽選擇器,可以修改頂層節(jié)點(diǎn)的樣式:


page {
  display: block;
  min-height: 100%;
  background-color: red;
}

十一、不可設(shè)置網(wǎng)絡(luò)請(qǐng)求的 referer

網(wǎng)絡(luò)請(qǐng)求的 referer 是不可以設(shè)置的,格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html ,其中 {appid} 為小程序的 appid , {version} 為小程序的版本號(hào),版本號(hào)為 0 表示為開(kāi)發(fā)版、體驗(yàn)版以及審核版本,版本號(hào)為 devtools 表示為開(kāi)發(fā)者工具,其余為正式版本。

這個(gè),文檔中有細(xì)致的說(shuō)明,這里就不贅述了。

十二、map 組件總是在最上層

map 、 canvas 、 video 、 textarea 是由客戶端創(chuàng)建的原生組件,原生組件的層級(jí)是最高的,所以頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少,都無(wú)法蓋在原生組件上。 原生組件暫時(shí)還無(wú)法放在 scroll-view 上,也無(wú)法對(duì)原生組件設(shè)置 css 動(dòng)畫(huà)。

十三、你的域名必須備案

如果你是個(gè)人搞的小程序,一定要記得找一個(gè)備案的域名綁定主機(jī)服務(wù)器,否則,你連調(diào)用接口都費(fèi)勁。

不能使用 IP 地址訪問(wèn)后端接口,必須經(jīng)過(guò) ICP 備案。

十四、轉(zhuǎn)發(fā)功能需要自己設(shè)置

頁(yè)面的轉(zhuǎn)發(fā)需要自行設(shè)置,并沒(méi)有區(qū)分個(gè)人和企業(yè)用戶。唯一麻煩的就是,需要每個(gè)頁(yè)面都設(shè)置轉(zhuǎn)發(fā)規(guī)則。


Page({
  onShareAppMessage: function (res){
    if (res.from === 'button') {
      // 來(lái)自頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
      path: '/page/user?name=jartto',
      success: function(res){
        // 轉(zhuǎn)發(fā)成功
      },
      fail: function(res){
        // 轉(zhuǎn)發(fā)失敗
      }
    }
  }
})

具體,請(qǐng)查看 文檔地址 。

十五、寫(xiě)在最后

零零散散記了這么多,全是小程序的問(wèn)題,但是我們也不能否定小程序的價(jià)值,畢竟人家還是有很多優(yōu)點(diǎn)的嘛。我知道這么做很煩人,但是我也特別希望在我剛開(kāi)始接觸某個(gè)技術(shù)或者框架的時(shí)候,能有人告訴我,這些坑你不要再踩了。

這并不是在澆小程序的涼水,畢竟小程序需要發(fā)展嘛。我一直相信如果大家都能提出問(wèn)題,那么對(duì)一些東西是有正向激勵(lì)的。

So,招人煩就招人煩吧,反正你又干不掉我:see_no_evil:。



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