這篇文章主要給大家介紹了微信小程式開(kāi)發(fā)的四十個(gè)技術(shù)竅門的相關(guān)資料，相信對(duì)大家的學(xué)習(xí)或使用微信小程式具有一定的參考借鑒價(jià)值，所以特別推薦給大家，需要的朋友們可以一起來(lái)看看吧。

前言

微信「小程式」正式上線一週時(shí)間，相關(guān)話題持續(xù)升溫。支付寶開(kāi)發(fā)「小程式」的訊息也隨即曝出，網(wǎng)路巨頭們摩拳擦掌，不少網(wǎng)友調(diào)侃說(shuō)，這勢(shì)頭感覺(jué)要挑戰(zhàn)現(xiàn)有的「APP帝國(guó)」了。那麼，面對(duì)如此炙手可熱的小程序，WeX5行動(dòng)開(kāi)發(fā)雲(yún)也沒(méi)閒著，經(jīng)過(guò)全網(wǎng)搜索，為大家篩選出一條小程序開(kāi)發(fā)者的必讀文章，內(nèi)容涵蓋小程序開(kāi)發(fā)實(shí)戰(zhàn)需要注意的40個(gè)技術(shù)點(diǎn)，供大家參考！

Q:為什麼腳本內(nèi)不能使用window等物件

#A:頁(yè)面的腳本邏輯是在JsCore中運(yùn)行，JsCore是沒(méi)有視窗物件的環(huán)境，所以不能在腳本中使用window，也無(wú)法在腳本中操作元件

Q:為什麼zepto/jquery 無(wú)法使用

A :zepto/jquery 會(huì)使用window物件和document對(duì)象，所以無(wú)法使用。

Q:wx.navigateTo無(wú)法開(kāi)啟頁(yè)面

#A:一個(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í)的互動(dòng)方式，或使用wx.redirectTo

#Q:樣式表不支援級(jí)聯(lián)選擇器

##A:WXSS支援以.開(kāi)始的類別選擇器。

Q：本機(jī)資源無(wú)法透過(guò)css 取得

#A：background-image
：可以使用網(wǎng)路圖片，或者base64，或使用標(biāo)籤

Q：如何修改視窗的背景色

A：使用page 標(biāo)籤選擇器，可以修改頂層節(jié)點(diǎn)的樣式

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

Q：為什麼上傳不成功

##A：為了提升體驗(yàn)流暢度，編譯後的程式碼包大小需小於1MB ，大於1MB 的程式碼包會(huì)上傳失敗。 Q：HTTPS 請(qǐng)求不成功

A：tls 僅支援1.2 及以上版本

Q：網(wǎng)路請(qǐng)求的referer

A：網(wǎng)路請(qǐng)求的referer 是不可以設(shè)定的，格式固定為https://servicewechat.com/{appid}/{version}/ page-frame.html，其中{appid} 為小程式的
appid

，

{version}
為小程式的版本號(hào)，版本號(hào)為0 表示為開(kāi)發(fā)版。

Q：不能直接操作Page.data

#A：避免在直接對(duì)

Page.data

進(jìn)行賦值修改，請(qǐng)使用
Page.setData

進(jìn)行操作才能將資料同步到頁(yè)面中進(jìn)行渲染怎麼獲取使用者輸入

能夠取得使用者輸入的元件，需要使用元件的屬性bindchange將使用者的輸入內(nèi)容同步到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 用戶端不支援工具下個(gè)版本保持統(tǒng)一。

Q：touchmove滑動(dòng)事件裡面的currentTarget. id值不變。

A：ouchmove / touchend 事件的 target / currentTarget 會(huì)永遠(yuǎn)是 touchstart 時(shí)的 target / currentTarget 。

Q：wx.request的POST方法的參數(shù)傳輸伺服器接收不到的bug。

A：wx.request post 的content-type 預(yù)設(shè)為'application/json
'

如果伺服器沒(méi)有用到j(luò)son解釋的話，可以把
content-type

設(shè)定回

urlencoded。

<pre class='brush:php;toolbar:false;'>wx.request({ .... method: &quot;POST&quot;, header: { &quot;content-type&quot;: &quot;application/x-www-form-urlencoded&quot; }, ... })</pre>
Q：wx.uploadFile在手機(jī)上回傳http碼403。

A：安卓的微信升級(jí)到6.5.2以上版本。

Q：小程式SVG支援嗎?

#A：image的src放遠(yuǎn)端svg可以，background-image

裡也可以。

Q：wx.request回傳statusCode兩端型別不一致。

A：確實(shí)有這個(gè)問(wèn)題，稍後的版本將會(huì)修復(fù)。

Q：關(guān)於元件的動(dòng)態(tài)產(chǎn)生與銷毀？

A：不支援動(dòng)態(tài)產(chǎn)生元件，但可以用 wx:for 去渲染多個(gè)。 ############Q：小程式支援熱更嗎？ ############A：不支援開(kāi)發(fā)者自行更替。 ############Q：一些接口的回調(diào)IOS和Android不一致，例如支付接口，用戶取消支付後，ios只回調(diào)complete方法，android則回調(diào)fail方法，官方文檔也沒(méi)有任何回調(diào)說(shuō)明，造成開(kāi)發(fā)很困難；類似的還有圖片選擇接口，分享接口等等。 ##########

A：支付接口，用戶取消支付后，ios只回調(diào)complete方法，android則回調(diào)fail方法，問(wèn)題已記錄，多謝反饋。

Q：如果icon已經(jīng)在服務(wù)器上了，想用直接訪問(wèn)網(wǎng)址的方法加載圖片進(jìn)來(lái)這樣可以嗎？

A：不能。

Q：ipad不能使用小程序？

A：暫時(shí)不支持ipad打開(kāi)小程序。

Q：小程序音頻，視頻播放器問(wèn)題 。1、能夠只隱藏進(jìn)度條跟時(shí)間嗎？2、現(xiàn)在iOS平臺(tái)上的時(shí)間顯示是0:00，但是android上會(huì)顯示錯(cuò)誤碼，能夠通過(guò)什么設(shè)置修改嗎？

A：1：下個(gè)版本會(huì)修改這里的交互，不顯示進(jìn)度條和時(shí)間。2：6.5.3 版本已修復(fù)此問(wèn)題。

Q：拍照窗口可以加浮層嗎？

A：暫時(shí)不支持。

Q：開(kāi)發(fā)者工具經(jīng)常報(bào)jsEngineScriptError錯(cuò)誤，會(huì)導(dǎo)致頁(yè)面白屏。

A：移步下載最新 0.12.130400 版本的開(kāi)發(fā)工具試試

Q：開(kāi)發(fā)者工具里面，SPA頁(yè)面，更改title無(wú)效。

A：wx.setNavigationBarTitle可以通過(guò) API 改變導(dǎo)航欄標(biāo)題。

Q：請(qǐng)問(wèn)小程序頁(yè)內(nèi)支持長(zhǎng)按保存圖片或分享圖片嗎？

A：目前沒(méi)有這個(gè)功能。

Q：關(guān)于swiper中的current問(wèn)題。如果在新的版本中，直接設(shè)current,會(huì)產(chǎn)生的效果是：無(wú)論從哪個(gè)swiper元素點(diǎn)擊進(jìn)去，都會(huì)顯示swiper第一個(gè)子元素的值。

A：目前swiper在處理swiper-item動(dòng)態(tài)變化的情況時(shí)有一些bug，會(huì)很快修復(fù)的。

Q：小程序能引用自己服務(wù)器上的wxss和js文件嗎？

A：不能，無(wú)法執(zhí)行遠(yuǎn)程代碼。

Q：蘋果7，提示內(nèi)部錯(cuò)誤，內(nèi)存占用過(guò)多。

A：頁(yè)面做的預(yù)加載，列表中有圖片，圖片渲染的太多了，解決辦法就是不當(dāng)屏展示的圖片，不讓它渲染。

Q：小程序體驗(yàn)者安卓卡在加載頁(yè)面進(jìn)不去，IOS可以進(jìn)去。

A：這是android微信客戶端舊版本的bug， 請(qǐng)下載最新版本的 6.5.3 客戶端。

Q：請(qǐng)問(wèn)目前微信小程序支持藍(lán)牙嗎？

A：目前不支持。

Q：分享功能真機(jī)沒(méi)有效果？

A：這是android微信客戶端舊版本的bug， 請(qǐng)下載最新版本的 6.5.3 客戶端。

Q：強(qiáng)制使用https，開(kāi)發(fā)和測(cè)試環(huán)境下怎么聯(lián)調(diào)和測(cè)試？

A：「微信web開(kāi)發(fā)者工具」->「項(xiàng)目」->「開(kāi)發(fā)環(huán)境不校驗(yàn)請(qǐng)求域名及TLS版本」。

Q：wx.showToast()方法無(wú)效。

調(diào)用wx.request請(qǐng)求網(wǎng)絡(luò)然后在

complete: function (res) {
 
// complete
wx.hideToast();
}

在成功方法里面如果要進(jìn)行showToast的時(shí)候感覺(jué)無(wú)效，并沒(méi)有彈出提示框。

A：success 回調(diào)調(diào)用是在 complete 之前的，如果在 success showToast，下一步 complete hideToast 就會(huì)被沖掉 showToast。

Q：picker 組件中的文字大小是否支持修改？

A：不支持修改。

Q：tabBar的圖片在android和ios上面大小差異太大。

A：這是android微信客戶端舊版本的bug， 請(qǐng)下載最新版本的 6.5.3 客戶端

Q：tabbar 頁(yè)面返回問(wèn)題。非首頁(yè)的tabbar 頁(yè)面 點(diǎn)擊左上角返回箭頭時(shí)如何返回到小程序首頁(yè)？ 現(xiàn)在是直接退出小程序了

A：創(chuàng)建新頁(yè)面時(shí)用 navigateTo 才會(huì)新建新頁(yè)面，同時(shí)保留舊頁(yè)面，如果用 redirectTo 是在當(dāng)前頁(yè)面內(nèi)跳轉(zhuǎn)。

Q：?jiǎn)栂?wx.request() 怎么設(shè)置成同步。

A：reqeust是發(fā)起網(wǎng)絡(luò)請(qǐng)求。沒(méi)有同步接口。

Q：最新mac版工具不可用，進(jìn)來(lái)就出現(xiàn)獲取appservice 失敗。

A：工具設(shè)置中選擇直接鏈接網(wǎng)絡(luò) ?；蛘?系統(tǒng)中的代理軟件設(shè)置工具直接鏈接網(wǎng)絡(luò)。

Q：真機(jī) view overflow-y下滑會(huì)很卡。

A：父層需要 position:relative; 加了之后就不卡了。

總結(jié)

以上是微信小程式開(kāi)發(fā)的四十個(gè)技術(shù)訣竅總結(jié)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！