微信小程序新手教程之官方文檔BUG，tip及QA提示，本篇默認(rèn)已經(jīng)成功安裝微信小程序工具，來和小編一起看看吧

為了方便大家發(fā)現(xiàn)一些注意點(diǎn)，官方文檔中最近的一次更新1123版本時(shí)，增加了一些提示信息，我現(xiàn)在將這些信息集中一下，以便同學(xué)們查看;

特別說明：本bug及tip僅適用于0.10.112301及之前的版本，之后更新的版本請優(yōu)先對比官方文檔;

注冊程序：

注意：

App() 必須在 app.js 中注冊，且不能注冊多個(gè)。

不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到 app 實(shí)例。

不要在 onLaunch 的時(shí)候調(diào)用 getCurrentPage()，此時(shí) page 還沒有生成。

通過 getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)。

注意：

直接修改 this.data 無效，無法改變頁面的狀態(tài)，還會(huì)造成數(shù)據(jù)不一致。

單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(shù)據(jù)。

Bug & Tip

bug: iOS/Android 6.3.30, 首次進(jìn)入頁面，如果頁面不滿一屏?xí)r會(huì)觸發(fā) onReachBottom ，應(yīng)為只有用戶主動(dòng)上拉才觸發(fā);

bug: iOS/Android 6.3.30, 手指上拉，會(huì)觸發(fā)多次 onReachBottom ，應(yīng)為一次上拉，只觸發(fā)一次;

模塊化

exports 是 module.exports 的一個(gè)引用，因此在模塊里邊隨意更改 exports 的指向會(huì)造成未知的錯(cuò)誤。所以我們更推薦開發(fā)者采用module.exports 來暴露模塊接口，除非你已經(jīng)清晰知道這兩者的關(guān)系。

小程序目前不支持直接引入 node_modules , 開發(fā)者需要使用到 node_modules 時(shí)候建議拷貝出相關(guān)的代碼到小程序的目錄中。

需要注意的是：

這種轉(zhuǎn)換只會(huì)幫助開發(fā)處理語法上問題，新的 ES6 的 API 例如 Promise 等需要開發(fā)者自行引入 Polyfill 或者別的類庫。

為了提高代碼質(zhì)量，在開啟 ES6 轉(zhuǎn)換功能的情況下，默認(rèn)啟用 javasctipt 嚴(yán)格模式，請參考 "use strict" 。

數(shù)據(jù)綁定

關(guān)鍵字(需要在雙引號之內(nèi))

true：boolean 類型的 true，代表真值。

false： boolean 類型的 false，代表假值。

特別注意：不要直接寫 checked="false"，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成 boolean 類型后代表真值。

條件渲染

注意： 并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁面中做任何渲染，只接受控制屬性。

事件

注：除上表之外的其他組件自定義事件如無特殊申明都是非冒泡事件，如

的submit事件，的input事件，的scroll事件，(詳見各個(gè)組件)

特殊事件： 中的觸摸事件不可冒泡，所以沒有 currentTarget。

說明： target 和 currentTarget 可以參考上例中，點(diǎn)擊 inner view 時(shí)，handleTap3 收到的事件對象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對象 target 就是 inner，currentTarget 就是 middle。

WXSS

建議： 開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。 注意： 在較小的屏幕上不可避免的會(huì)有一些毛刺，請?jiān)陂_發(fā)時(shí)盡量避免這種情況。

scroll-view

tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件

tip: scroll-into-view 的優(yōu)先級高于 scroll-top

text

除了文本節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無法長按選中。

button

注：button-hover 默認(rèn)為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

input

bug : 微信版本 6.3.30, focus 屬性設(shè)置無效;

bug : 微信版本 6.3.30, placeholder 在聚焦時(shí)出現(xiàn)重影問題;

tip : input 組件是一個(gè) native 組件，字體是系統(tǒng)字體，所以無法設(shè)置 font-family;

tip : 在 input 聚焦期間，避免使用 css 動(dòng)畫;

textarea

bug: 微信版本 6.3.30，textarea 在列表渲染時(shí)，新增加的 textarea 在自動(dòng)聚焦時(shí)的位置計(jì)算錯(cuò)誤

tip: 請勿在 scroll-view 中使用 textarea 組件

navigator

注：navigator-hover默認(rèn)為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子節(jié)點(diǎn)背景色應(yīng)為透明色

image

注：image組件默認(rèn)寬度300px、高度225px

canvas

canvas 標(biāo)簽?zāi)J(rèn)寬度300px、高度225px

同一頁面中的 canvas-id 不可重復(fù)，如果使用一個(gè)已經(jīng)出現(xiàn)過的 canvas-id，該 canvas 標(biāo)簽對應(yīng)的畫布將被隱藏并不再正常工作

發(fā)起請求

bug: 開發(fā)者工具 0.10.102800 版本，header 的 content-type 設(shè)置異常;

tip: 客戶端的 HTTPS TLS 版本為1.2，但 Android 的部分機(jī)型還未支持 TLS 1.2，所以請確保 HTTPS 服務(wù)器的 TLS 版本支持1.2及以下版本;

tip: 要注意 method 的 value 必須為大寫(例如：GET);

tip: url 中不能有端口;

uploadFile

注：文件的臨時(shí)路徑，在小程序本次啟動(dòng)期間可以正常使用，如需持久保存，需在主動(dòng)調(diào)用 wx.saveFile，在小程序下次啟動(dòng)時(shí)才能訪問得到。

saveFile

tip: 本地文件存儲(chǔ)的大小限制為 100M

setStorage

注意： localStorage 是永久存儲(chǔ)的，但是我們不建議將關(guān)鍵信息全部存在 localStorage，以防用戶換設(shè)備的情況。

tip: 本地?cái)?shù)據(jù)存儲(chǔ)的大小限制為 5M

openLocation

bug: iOS 6.3.30 type 參數(shù)不生效，只會(huì)返回 wgs84 類型的坐標(biāo)信息

showModal

bug: Android 6.3.30，wx.showModal 的返回的 confirm 一直為 true;

navigateTo

注意：為了不讓用戶在使用小程序時(shí)造成困擾，我們規(guī)定頁面路徑只能是五層，請盡量避免多層級的交互方式。

createAnimation

注意: export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作

bug: iOS/Android 6.3.30 通過 step() 分隔動(dòng)畫，只有第一步動(dòng)畫能生效

登錄

bug: iOS/Android 6.3.30，在 App.onLaunch 調(diào)用 wx.login 會(huì)出現(xiàn)異常

模板消息

注意：內(nèi)部測試階段，模板消息下發(fā)后，在客戶端僅能看到由“公眾號安全助手”下發(fā)的簡單通知。能收到該提示，即表明模板消息功能已經(jīng)調(diào)試成功。待該功能正式上線后，將可以展示成上圖效果。

下發(fā)條件說明

支付

當(dāng)用戶在小程序內(nèi)完成過支付行為，可允許開發(fā)者向用戶在7天內(nèi)推送有限條數(shù)的模板消息(1次支付可下發(fā)1條，多次支付下發(fā)條數(shù)獨(dú)立，互相不影響)

提交表單

當(dāng)用戶在小程序內(nèi)發(fā)生過提交表單行為且該表單聲明為要發(fā)模板消息的，開發(fā)者需要向用戶提供服務(wù)時(shí)，可允許開發(fā)者向用戶在7天內(nèi)推送有限條數(shù)的模板消息(1次提交表單可下發(fā)1條，多次提交下發(fā)條數(shù)獨(dú)立，相互不影響)

常用快捷鍵格式調(diào)整

Ctrl+S：保存文件

Ctrl+[， Ctrl+]：代碼行縮進(jìn)

Ctrl+Shift+[， Ctrl+Shift+]：折疊打開代碼塊

Ctrl+C Ctrl+V：復(fù)制粘貼，如果沒有選中任何文字則復(fù)制粘貼一行

Shift+Alt+F：代碼格式化

Alt+Up，Alt+Down：上下移動(dòng)一行

Shift+Alt+Up，Shift+Alt+Down：向上向下復(fù)制一行

Ctrl+Shift+Enter：在當(dāng)前行上方插入一行

Ctrl+Shift+F：全局搜索

光標(biāo)相關(guān)

Ctrl+End：移動(dòng)到文件結(jié)尾

Ctrl+Home：移動(dòng)到文件開頭

Ctrl+i：選中當(dāng)前行

Shift+End：選擇從光標(biāo)到行尾

Shift+Home：選擇從行首到光標(biāo)處

Ctrl+Shift+L：選中所有匹配

Ctrl+D：選中匹配

Ctrl+U：光標(biāo)回退

界面相關(guān)

Ctrl + ：隱藏側(cè)邊欄

Ctrl + m: 打開或者隱藏模擬器

微信支付

小程序支付開發(fā)步驟：https://pay.weixin.qq.com/wiki/d ... &index=1&t=20161122

官方QA

怎么獲取用戶輸入

能夠獲取用戶輸入的組件，需要使用組件的屬性bindchange將用戶的輸入內(nèi)容同步到 AppService。

varinputContent = {}Page({ data: { inputContent: {} }, bindChange: function(e) { inputContent[e.currentTarget.id] = e.detail.value }})為什么腳本內(nèi)不能使用window等對象

頁面的腳本邏輯是在JsCore中運(yùn)行，JsCore是一個(gè)沒有窗口對象的環(huán)境，所以不能在腳本中使用window，也無法在腳本中操作組件

為什么 zepto/jquery 無法使用

zepto/jquery 會(huì)使用到window對象和document對象，所以無法使用。

wx.navigateTo無法打開頁面

一個(gè)應(yīng)用同時(shí)只能打開5個(gè)頁面，當(dāng)已經(jīng)打開了5個(gè)頁面之后，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式，或者使用wx.redirectTo

樣式表不支持級聯(lián)選擇器

WXSS支持以.開始的類選擇器。如：

.normal_view { color: #000000; padding: 10px;}

可以使用標(biāo)簽選擇器，控制同一類組件的樣式。如：使用input標(biāo)簽選擇器控制的默認(rèn)樣式。

input { width: 100px;}本地資源無法通過 css 獲取

background-image：可以使用網(wǎng)絡(luò)圖片，或者 base64，或者使用

標(biāo)簽

如何修改窗口的背景色

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

page { display: block; min-height: 100%; background-color: red;}為什么上傳不成功

為了提升體驗(yàn)流暢度，編譯后的代碼包大小需小于 1MB ，大于 1MB 的代碼包將上傳失敗。

HTTPS 請求不成功

tls 僅支持 1.2 及以上版本

網(wǎng)絡(luò)請求的 referer

網(wǎng)絡(luò)請求的 referer 是不可以設(shè)置的，格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 為小程序的 appid，{version} 為小程序的版本號，版本號為 0 表示為開發(fā)版。

嗨圖功能

1、專題——DIY圖片的模板，點(diǎn)擊可以生成使用，分享到朋友圈。

2、分享墻——用戶上傳的自己DIY作品。

3、立即制作——可以用自己的圖來DIY。

4、告訴我——告訴產(chǎn)品的改進(jìn)，內(nèi)容的增加。

想要體驗(yàn)怎么制作屬于自己個(gè)性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗(yàn)，開啟你的嗨圖之旅吧!