微信小程式開發必看的四十個技巧總結
- 高洛峰原創
- 2017-03-14 17:42:062170瀏覽
這篇文章主要給大家介紹了微信小程式開發必看的四十個技巧總結的相關資料，相信對大家的學習或使用微信小程式具有一定的參考借鑒價值，所以特別推薦給大家，需要的朋友可以一起來看看吧。
前言
微信「小程式」正式上線一週時間，相關話題持續升溫。支付寶開發「小程式」的訊息也隨即曝出，網路巨頭們摩拳擦掌，不少網友調侃說，這勢頭感覺要挑戰現有的「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.re<a href="http://www.php.cn/wiki/1275.html" target="_blank">dir</a>ectTo
#Q:樣式表不支援級聯選擇器
Q：本機資源無法透過css 取得
#A：<a href="http://www.php.cn/wiki/895.html" target="_blank">background-image</a>：可以使用網路圖片，或是base64，或是使用565b296a3970f2fc50e58c1bb915cb79標籤
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.<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>Data 進行操作才能將資料同步到頁面中進行渲染怎麼取得使用者輸入
能夠取得使用者輸入的元件，需要使用元件的屬性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/<a href="http://www.php.cn/wiki/1488.html" target="_blank">json</a> '
#如果伺服器沒有用到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：父層需要 <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>:relative; 加了之後就不卡了。
以上是微信小程式開發必看的四十個技巧總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！