小程式開發的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，或使用

A：使用

 page

 標籤選擇器，可以修改頂層節點的樣式

page {      100%;  

        background-color: red;

}

 

Q：為什麼上傳不成功

A：為了提升體驗流暢度，編譯後的程式碼包大小小於

 1MB

 ，大於

 1的程式碼包大小小於

 1MB

 ，大於

 1的程式碼需將失敗。

 Q：HTTPS 請求不成功

A：tls

 ：網路請求的 referer

A：網絡要求的 referer 是不可以設定的，格式固定為https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 為小程式的appid， {version}

 為小程式的版本號，版本號為

 0

 表示為開發版。

 Q：無法直接操作 Page.dataset.  進行操作才能將資料同步到頁面中渲染怎麼取得使用者輸入能夠取得使用者輸入的元件，需要使用元件的屬性bindchange將使用者的輸入內容同步到

 AppService。

var inputContent = {)

:     inputContent: {}  },  bindChange: function(e) {  

 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:

method: "POST",

header:

method: "POST",

header: p 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.時候感覺無效，並沒有彈出提示框。

A：success

 回呼呼叫是在

 complete

 之前的，如果在

 success showToast，下一步

 complete hideToast

 就會被沖掉showshowast，下一步 complete hideToast 就會被沖掉showshowast，下一步。  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，也需要進行相應的修復。關心小程式開發的朋友請關注我們，獲取最新的小程式開發乾貨。

更多小程式開發的40個技術小技巧，純乾貨相關文章請關注PHP中文網！