小程序開發的 40 個技術竅門
微信 “小程序”正式上線 一周時間，相關話題持續升溫。支付寶開發 “小程序”的消息也隨即曝出，互聯網巨頭們摩拳擦掌，不少網友調侃說，這勢頭感覺要挑戰現有的“ APP 帝國”了。那么，面對如此炙手可熱的小程序， WeX5 移動開發云也沒有閑著，經過全網搜索，為大家篩選出一條小程序開發者的必讀文章，內容涵蓋小程序開發實戰需要注意的 40 個技術點，供大家參考！
Q:為什么腳本內不能使用 window 等對象
A: 頁面的腳本邏輯是在 JsCore 中運行， JsCore 是一個沒有窗口對象的環境，所以不能在腳本中使用 window ，也無法在腳本中操作組件
Q:為什么 zepto/jquery 無法使用
A:zepto/jquery 會使用到 window 對象和 document 對象，所以無法使用。
Q:wx.navigateTo無法打開頁面
A: 一個應用同時只能打開 5 個頁面，當已經打開了 5 個頁面之后， wx.navigateTo 不能正常打開新頁面。請避免多層級的交互方式，或者使用 wx.redirectTo
Q:樣式表不支持級聯選擇器
A:WXSS 支持以 . 開始的類選擇器。
Q：本地資源無法通過 css 獲取
A ： background-image ：可以使用網絡圖片，或者 base64 ，或者使用 <image/> 標簽
Q：如何修改窗口的背景色
A ：使用 page 標簽選擇器，可以修改頂層節點的樣式
page {
display: block;
min-height: 100%;
background-color: red;
}
Q：為什么上傳不成功
A ：為了提升體驗流暢度，編譯后的代碼包大小需小于 1MB ，大于 1MB 的代碼包將上傳失敗。
Q： HTTPS 請求不成功
A ： tls 僅支持 1.2 及以上版本
Q：網絡請求的 referer
A ：網絡請求的 referer 是不可以設置的，格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html ，其中 {appid} 為小程序的 appid ， {version} 為小程序的版本號，版本號為 0 表示為開發版。
Q：不能直接操作 Page.data
A ：避免在直接對 Page.data 進行賦值修改，請使用 Page.setData 進行操作才能將數據同步到頁面中進行渲染怎么獲取用戶輸入
能夠獲取用戶輸入的組件，需要使用組件的屬性 bindchange 將用戶的輸入內容同步到 AppService 。
<input id="myInput" bindchange="bindChange" /><checkbox id="myCheckbox" bindchange="bindChange" />
var inputContent = {}
Page({
data: {
inputContent: {}
},
bindChange: function(e) {
inputContent[e.currentTarget.id] = e.detail.value
}
})
Q：微信小程序支持 fetch 或者 promise 嗎 ?
A ： promise 工具目前不支持， fetch 客戶端不支持 工具下個版本保持統一。
Q： touchmove 滑動事件里面的 currentTarget. id 值不變動。
A ： ouchmove / touchend 事件的 target / currentTarget 會永遠是 touchstart 時的 target / currentTarget 。
Q： wx.request 的 POST 方法的參數傳輸服務器接收不到的 bug 。
A ： wx.request post 的 content-type 默認為 ‘ application/json ’
如果服務器沒有用到 json 解釋的話，可以把 content-type 設置回 urlencoded 。
wx.request({
....
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
...
})
Q： wx.uploadFile 在手機上返回 http 碼 403 。
A ：安卓的微信升級到 6.5.2 及其以上版本。
Q：小程序 SVG 支持嗎 ?
A ： image 的 src 放遠程 svg 可以， background-image 里也可以。
Q： wx.request 返回 statusCode 兩端類型不一致。
A ：確實有這個問題，稍后的版本將會修復。
Q：關于組件的動態生成與銷毀？
A ：不支持動態生成組件，但可以用 wx:for 去渲染多個。
Q：小程序支持熱更嗎？
A ：不支持開發者自行更替。
Q：一些接口的回調 IOS 和 Android 不一致，例如支付接口，用戶取消支付后， ios 只回調 complete 方法， android 則回調 fail 方法，官方文檔也沒有任何回調說明，造成開發很困難；類似的還有圖片選擇接口，分享接口等等。
A ：支付接口，用戶取消支付后， ios 只回調 complete 方法， android 則回調 fail 方法，問題已記錄，多謝反饋。
Q：如果 icon 已經在服務器上了，想用直接訪問網址的方法加載圖片進來這樣可以嗎？
A ：不能。
Q： ipad 不能使用小程序？
A ：暫時不支持 ipad 打開小程序。
Q：小程序音頻，視頻播放器問題 。 1 、能夠只隱藏進度條跟時間嗎？ 2 、現在 iOS 平臺上的時間顯示是 0:00 ，但是 android 上會顯示錯誤碼，能夠通過什么設置修改嗎？
A ： 1 ：下個版本會修改這里的交互，不顯示進度條和時間。 2 ： 6.5.3 版本已修復此問題。
Q：拍照窗口可以加浮層嗎？
A ：暫時不支持。
Q：開發者工具經常報 jsEngineScriptError 錯誤，會導致頁面白屏。
A ：移步下載最新 0.12.130400 版本的開發工具試試
Q：開發者工具里面， SPA 頁面，更改 title 無效。
A ： wx.setNavigationBarTitle 可以通過 API 改變導航欄標題。
Q：請問小程序頁內支持長按保存圖片或分享圖片嗎？
A ：目前沒有這個功能。
Q：關于 swiper 中的 current 問題。 如果在新的版本中，直接設current,會產生的效果是：無論從哪個 swiper 元素點擊進去，都會顯示 swiper 第一個子元素的值。
A ：目前 swiper 在處理 swiper-item 動態變化的情況時有一些 bug ，會很快修復的。
Q：小程序能引用自己服務器上的 wxss 和 js 文件嗎？
A ：不能，無法執行遠程代碼。
Q：蘋果 7 ，提示內部錯誤，內存占用過多。
A ：頁面做的預加載，列表中有圖片，圖片渲染的太多了，解決辦法就是不當屏展示的圖片，不讓它渲染。
Q：小程序體驗者安卓卡在加載頁面進不去， IOS 可以進去。
A ：這是 android 微信客戶端舊版本的 bug ， 請下載最新版本的 6.5.3 客戶端。
Q：請問目前微信小程序支持藍牙嗎？
A ：目前不支持。
Q：分享功能真機沒有效果？
A ：這是 android 微信客戶端舊版本的 bug ， 請下載最新版本的 6.5.3 客戶端。
Q：強制使用 https ，開發和測試環境下怎么聯調和測試？
A ：「微信 web 開發者工具」 -> 「項目」 -> 「開發環境不校驗請求域名及 TLS 版本」。
Q： wx.showToast() 方法無效。
調用wx.request請求網絡然后在
complete: function (res) {
// complete
wx.hideToast();
}
在成功方法里面如果要進行showToast的時候感覺無效，并沒有彈出提示框。
A ： success 回調調用是在 complete 之前的，如果在 success showToast ，下一步 complete hideToast 就會被沖掉 showToast 。
Q： picker 組件中的文字大小是否支持修改？
A ：不支持修改。
Q： tabBar 的圖片在 android 和 ios 上面大小差異太大。
A ：這是 android 微信客戶端舊版本的 bug ， 請下載最新版本的 6.5.3 客戶端
Q： tabbar 頁面返回問題。 非首頁的 tabbar 頁面 點擊左上角返回箭頭時如何返回到小程序首頁？ 現在是直接退出小程序了
A ：創建新頁面時用 navigateTo 才會新建新頁面，同時保留舊頁面，如果用 redirectTo 是在當前頁面內跳轉。
Q：問下 wx.request() 怎么設置成同步。
A ： reqeust 是發起網絡請求。沒有同步接口。
Q：最新 mac 版工具不可用，進來就出現獲取 appservice 失敗。
A ：工具設置中選擇直接鏈接網絡 。或者 系統中的代理軟件設置工具直接鏈接網絡。
Q：真機 view overflow-y 下滑會很卡。
A ：父層需要 position:relative; 加了之后就不卡了。
以上就是干貨分享的主要內容，需要提醒的是，小程序本身還在不斷調整、修改、完善之中，對陸續發現的 BUG ，也需要進行相應的修復。關心小程序開發的朋友請關注我們，獲取最新的小程序開發干貨。
來自：http://mp.weixin.qq.com/s/OxJLI4D6cl1rAwNtl6TMWA