微信小程序新手教程之官方文檔BUG,tip及QA提示
微信小程序新手教程之官方文檔BUG,tip及QA提示,本篇默認已經成功安裝微信小程序工具,來和小編一起看看吧
為了方便大家發現一些注意點,官方文檔中最近的一次更新1123版本時,增加了一些提示信息,我現在將這些信息集中一下,以便同學們查看;
特別說明:本bug及tip僅適用于0.10.112301及之前的版本,之后更新的版本請優先對比官方文檔;
注冊程序:
注意:
App() 必須在 app.js 中注冊,且不能注冊多個。
不要在定義于 App() 內的函數中調用 getApp() ,使用 this 就可以拿到 app 實例。
不要在 onLaunch 的時候調用 getCurrentPage(),此時 page 還沒有生成。
通過 getApp() 獲取實例之后,不要私自調用生命周期函數。
注意:
直接修改 this.data 無效,無法改變頁面的狀態,還會造成數據不一致。
單次設置的數據不能超過1024kB,請盡量避免一次設置過多的數據。
Bug & Tip
bug: iOS/Android 6.3.30, 首次進入頁面,如果頁面不滿一屏時會觸發 onReachBottom ,應為只有用戶主動上拉才觸發;
bug: iOS/Android 6.3.30, 手指上拉,會觸發多次 onReachBottom ,應為一次上拉,只觸發一次;
模塊化
exports 是 module.exports 的一個引用,因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤。所以我們更推薦開發者采用module.exports 來暴露模塊接口,除非你已經清晰知道這兩者的關系。
小程序目前不支持直接引入 node_modules , 開發者需要使用到 node_modules 時候建議拷貝出相關的代碼到小程序的目錄中。
需要注意的是:
這種轉換只會幫助開發處理語法上問題,新的 ES6 的 API 例如 Promise 等需要開發者自行引入 Polyfill 或者別的類庫。
為了提高代碼質量,在開啟 ES6 轉換功能的情況下,默認啟用 javasctipt 嚴格模式,請參考 "use strict" 。
數據綁定
關鍵字(需要在雙引號之內)
true:boolean 類型的 true,代表真值。
false: boolean 類型的 false,代表假值。
特別注意:不要直接寫 checked="false",其計算結果是一個字符串,轉成 boolean 類型后代表真值。
條件渲染
注意: 并不是一個組件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。
事件
注:除上表之外的其他組件自定義事件如無特殊申明都是非冒泡事件,如
的submit事件,的input事件,的scroll事件,(詳見各個組件)
特殊事件: 中的觸摸事件不可冒泡,所以沒有 currentTarget。
說明: target 和 currentTarget 可以參考上例中,點擊 inner view 時,handleTap3 收到的事件對象 target 和 currentTarget 都是 inner,而 handleTap2 收到的事件對象 target 就是 inner,currentTarget 就是 middle。
WXSS
建議: 開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標準。 注意: 在較小的屏幕上不可避免的會有一些毛刺,請在開發時盡量避免這種情況。
scroll-view
tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件
tip: scroll-into-view 的優先級高于 scroll-top
text
除了文本節點以外的其他節點都無法長按選中。
button
注:button-hover 默認為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
input
bug : 微信版本 6.3.30, focus 屬性設置無效;
bug : 微信版本 6.3.30, placeholder 在聚焦時出現重影問題;
tip : input 組件是一個 native 組件,字體是系統字體,所以無法設置 font-family;
tip : 在 input 聚焦期間,避免使用 css 動畫;
textarea
bug: 微信版本 6.3.30,textarea 在列表渲染時,新增加的 textarea 在自動聚焦時的位置計算錯誤
tip: 請勿在 scroll-view 中使用 textarea 組件
navigator
注:navigator-hover默認為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子節點背景色應為透明色
image
注:image組件默認寬度300px、高度225px
canvas
canvas 標簽默認寬度300px、高度225px
同一頁面中的 canvas-id 不可重復,如果使用一個已經出現過的 canvas-id,該 canvas 標簽對應的畫布將被隱藏并不再正常工作
發起請求
bug: 開發者工具 0.10.102800 版本,header 的 content-type 設置異常;
tip: 客戶端的 HTTPS TLS 版本為1.2,但 Android 的部分機型還未支持 TLS 1.2,所以請確保 HTTPS 服務器的 TLS 版本支持1.2及以下版本;
tip: 要注意 method 的 value 必須為大寫(例如:GET);
tip: url 中不能有端口;
uploadFile
注:文件的臨時路徑,在小程序本次啟動期間可以正常使用,如需持久保存,需在主動調用 wx.saveFile,在小程序下次啟動時才能訪問得到。
saveFile
tip: 本地文件存儲的大小限制為 100M
setStorage
注意: localStorage 是永久存儲的,但是我們不建議將關鍵信息全部存在 localStorage,以防用戶換設備的情況。
tip: 本地數據存儲的大小限制為 5M
openLocation
bug: iOS 6.3.30 type 參數不生效,只會返回 wgs84 類型的坐標信息
showModal
bug: Android 6.3.30,wx.showModal 的返回的 confirm 一直為 true;
navigateTo
注意:為了不讓用戶在使用小程序時造成困擾,我們規定頁面路徑只能是五層,請盡量避免多層級的交互方式。
createAnimation
注意: export 方法每次調用后會清掉之前的動畫操作
bug: iOS/Android 6.3.30 通過 step() 分隔動畫,只有第一步動畫能生效
登錄
bug: iOS/Android 6.3.30,在 App.onLaunch 調用 wx.login 會出現異常
模板消息
注意:內部測試階段,模板消息下發后,在客戶端僅能看到由“公眾號安全助手”下發的簡單通知。能收到該提示,即表明模板消息功能已經調試成功。待該功能正式上線后,將可以展示成上圖效果。
下發條件說明
支付
當用戶在小程序內完成過支付行為,可允許開發者向用戶在7天內推送有限條數的模板消息(1次支付可下發1條,多次支付下發條數獨立,互相不影響)
提交表單
當用戶在小程序內發生過提交表單行為且該表單聲明為要發模板消息的,開發者需要向用戶提供服務時,可允許開發者向用戶在7天內推送有限條數的模板消息(1次提交表單可下發1條,多次提交下發條數獨立,相互不影響)
常用快捷鍵格式調整
Ctrl+S:保存文件
Ctrl+[, Ctrl+]:代碼行縮進
Ctrl+Shift+[, Ctrl+Shift+]:折疊打開代碼塊
Ctrl+C Ctrl+V:復制粘貼,如果沒有選中任何文字則復制粘貼一行
Shift+Alt+F:代碼格式化
Alt+Up,Alt+Down:上下移動一行
Shift+Alt+Up,Shift+Alt+Down:向上向下復制一行
Ctrl+Shift+Enter:在當前行上方插入一行
Ctrl+Shift+F:全局搜索
光標相關
Ctrl+End:移動到文件結尾
Ctrl+Home:移動到文件開頭
Ctrl+i:選中當前行
Shift+End:選擇從光標到行尾
Shift+Home:選擇從行首到光標處
Ctrl+Shift+L:選中所有匹配
Ctrl+D:選中匹配
Ctrl+U:光標回退
界面相關
Ctrl + :隱藏側邊欄
Ctrl + m: 打開或者隱藏模擬器
微信支付
小程序支付開發步驟:https://pay.weixin.qq.com/wiki/d ... &index=1&t=20161122
官方QA
怎么獲取用戶輸入
能夠獲取用戶輸入的組件,需要使用組件的屬性bindchange將用戶的輸入內容同步到 AppService。
varinputContent = {}Page({ data: { inputContent: {} }, bindChange: function(e) { inputContent[e.currentTarget.id] = e.detail.value }})為什么腳本內不能使用window等對象
頁面的腳本邏輯是在JsCore中運行,JsCore是一個沒有窗口對象的環境,所以不能在腳本中使用window,也無法在腳本中操作組件
為什么 zepto/jquery 無法使用
zepto/jquery 會使用到window對象和document對象,所以無法使用。
wx.navigateTo無法打開頁面
一個應用同時只能打開5個頁面,當已經打開了5個頁面之后,wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式,或者使用wx.redirectTo
樣式表不支持級聯選擇器
WXSS支持以.開始的類選擇器。如:
.normal_view { color: #000000; padding: 10px;}
可以使用標簽選擇器,控制同一類組件的樣式。如:使用input標簽選擇器控制的默認樣式。
input { width: 100px;}本地資源無法通過 css 獲取
background-image:可以使用網絡圖片,或者 base64,或者使用
標簽
如何修改窗口的背景色
使用 page 標簽選擇器,可以修改頂層節點的樣式
page { display: block; min-height: 100%; background-color: red;}為什么上傳不成功
為了提升體驗流暢度,編譯后的代碼包大小需小于 1MB ,大于 1MB 的代碼包將上傳失敗。
HTTPS 請求不成功
tls 僅支持 1.2 及以上版本
網絡請求的 referer
網絡請求的 referer 是不可以設置的,格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 為小程序的 appid,{version} 為小程序的版本號,版本號為 0 表示為開發版。
嗨圖功能

1、專題——DIY圖片的模板,點擊可以生成使用,分享到朋友圈。
2、分享墻——用戶上傳的自己DIY作品。
3、立即制作——可以用自己的圖來DIY。
4、告訴我——告訴產品的改進,內容的增加。
想要體驗怎么制作屬于自己個性朋友圈照片的用戶,掃一掃下面的二維碼就可以啦!還等什么,趕緊掃碼體驗,開啟你的嗨圖之旅吧!

相關文章: