細數小程序的坑
|
最近做了一個應用，把玩了一下小程序。總體感覺還是可以，但是限制太多，最適合的場景可能就是手機小型應用。這節，我們來細數一下小程序開發過程的坑。 查看原文，獲得更好的體驗哦～ 一、小程序注冊前提小程序注冊的前提是，沒有注冊過任何的微公眾平，如未注冊過訂閱號、服務號之類的。郵箱要求也是是這樣的： 未被公眾平臺注冊，未被開放平臺注冊，未被個人微信號綁定的郵箱 恰巧之前開發過微信公眾號，結果登陸后死活找不到小程序，后來才發現了這個前提。教訓就是，一定要好好審題，提前看看小程序的介紹說明。 二、大小限制是的，你沒有看錯，小程序對項目大小做了限制，你的項目不能超過 2048kb 。這個大小的項目文件，能做的事情就不言自明了。 我們可以做工具類，服務類，投票類，在線答題類的小應用。 此外，還需要注意的是，如果你用了過多的圖片資源，要么精簡要么轉在線地址，否則，你的小程序很可能大小失控。 這里有一些建議，優化后的效果還是很不錯的。
三、水平滾動與垂直滾動這個 bug 就比較氣人了，當你使用了 swiper 的時候，左右滑動，屏幕上下也會跟著抖動。一般情況，我們禁掉瀏覽器的滾動行為： //阻止瀏覽器默認事件 event.preventDefault(); 移動端處理水平滾動和垂直滾動的原理大致是這樣的：
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) //左右滑動
{
event.stopPropagation();//組織冒泡
event.preventDefault();//阻止瀏覽器默認事件
swipeY = false ;
//左右滑動
}
else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){ //上下滑動
swipeX = false ;
//上下滑動，使用瀏覽器默認的上下滑動
}
})
本身并不是什么很難的問題，然而，在微信中就沒有任何辦法了。很多人會說，你 overflow一下啊，我只能呵呵表示，并甩給你一篇文章 微信小程序 在 canvas 畫布上劃動，如何阻止頁面上下動？ 還可以看看這篇文章： 解決微信小程序自定義彈窗滾動與頁面滾動沖突 這里摘自 官方文檔 ：Bug & Tip
四、圖片組件既然叫組件了，那說明已經被動過手腳了，具體的表現是啥呢？小程序會給 image 組件默認寬高： 注：image 組件默認寬度 300px 、高度 225px 看起來是完美的，可是如果你要圖片自適應外容器呢？OK，小程序提供了 mode 屬性，但是并不完全，你還需要這么寫： <imagestyle="width: 100%;"mode="widthFix"src="http://jartto.wang"></image> 是的，你還需要設置他的寬度，才能使用 mode="widthFix" ，否則又開始默認了，沮喪:joy:。至于 mode 提供的其他裁切屬性 top , bottom , center 等等，不太清楚具體的應用場景是什么。 五、腳本不能使用 window 等對象頁面的腳本邏輯是在 JsCore 中運行， JsCore 是一個沒有窗口對象的環境，所以不能在腳本中使用 window ，也無法在腳本中操作組件。 當然，zepto/jquery 會使用到 window 對象和 document 對象，所以無法使用。 六、wx.navigateTo 無法打開頁面一個應用同時只能打開 5 個頁面，當已經打開了 5 個頁面之后， wx.navigateTo 不能正常打開新頁面。請避免多層級的交互方式，或者使用 wx.redirectTo 。 這個應該不算是 bug 吧，我們姑且認為它是一個 feature 。 七、樣式表不支持級聯選擇器WXSS 支持以.開始的類選擇器。如：
.normal_view {
color: #000000;
padding: 10px;
}
可以使用標簽選擇器，控制同一類組件的樣式。如：使用 input 標簽選擇器控制 <input/>的默認樣式。
input {
width: 100px;
}
八、不能直接操作 Page.data小程序中的規則，只能遵守： 避免在直接對 Page.data 進行賦值修改，請使用 Page.setData 進行操作才能將數據同步到頁面中進行渲染。 此外，如果你有了 WePY 框架的話，賦值操作是有優化的。 WePY 使用臟數據檢查對 setData 進行封裝，在函數運行周期結束時執行臟數據檢查，一來可以不用關心頁面多次 setData 是否會有性能上的問題，二來可以更加簡潔去修改數據實現綁定，不用重復去寫 setData方法。代碼如下： this.title = 'this is title'; 需注意的是，在異步函數中更新數據的時，必須手動調用 $apply 方法，才會觸發臟數據檢查流程的運行。如：
setTimeout(()=> {
this.title = 'this is title';
this.$apply();
}, 3000);
九、本地資源無法通過 WXSS 獲取當你需要平鋪頁面背景的時候，肯能會碰到這樣的異常：  很清楚，小程序已經告訴你怎么回事了： background-image ：可以使用網絡圖片，或者 base64 ，或者使用 <image/> 標簽。 十、修改窗口的背景色整個小程序的代碼是包在 page 標簽中的，所以使用 page 標簽選擇器，可以修改頂層節點的樣式：
page {
display: block;
min-height: 100%;
background-color: red;
}
十一、不可設置網絡請求的 referer網絡請求的 referer 是不可以設置的，格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html ，其中 {appid} 為小程序的 appid ， {version} 為小程序的版本號，版本號為 0 表示為開發版、體驗版以及審核版本，版本號為 devtools 表示為開發者工具，其余為正式版本。 這個，文檔中有細致的說明，這里就不贅述了。 十二、map 組件總是在最上層map 、 canvas 、 video 、 textarea 是由客戶端創建的原生組件，原生組件的層級是最高的，所以頁面中的其他組件無論設置 z-index 為多少，都無法蓋在原生組件上。 原生組件暫時還無法放在 scroll-view 上，也無法對原生組件設置 css 動畫。 十三、你的域名必須備案如果你是個人搞的小程序，一定要記得找一個備案的域名綁定主機服務器，否則，你連調用接口都費勁。 不能使用 IP 地址訪問后端接口，必須經過 ICP 備案。 十四、轉發功能需要自己設置頁面的轉發需要自行設置，并沒有區分個人和企業用戶。唯一麻煩的就是，需要每個頁面都設置轉發規則。
Page({
onShareAppMessage: function (res){
if (res.from === 'button') {
// 來自頁面內轉發按鈕
console.log(res.target)
}
return {
title: '自定義轉發標題',
path: '/page/user?name=jartto',
success: function(res){
// 轉發成功
},
fail: function(res){
// 轉發失敗
}
}
}
})
具體，請查看 文檔地址 。 十五、寫在最后零零散散記了這么多，全是小程序的問題，但是我們也不能否定小程序的價值，畢竟人家還是有很多優點的嘛。我知道這么做很煩人，但是我也特別希望在我剛開始接觸某個技術或者框架的時候，能有人告訴我，這些坑你不要再踩了。 這并不是在澆小程序的涼水，畢竟小程序需要發展嘛。我一直相信如果大家都能提出問題，那么對一些東西是有正向激勵的。 So，招人煩就招人煩吧，反正你又干不掉我:see_no_evil:。 |
