業餘時間開發了一枚調製雞尾酒的小遊戲,具體技術細節不在此贅述,談些我的感覺。css
首先歡迎你們捧場:html
源碼 前端
微信小程序文檔vue
在調試時遇到的一些兼容問題:react
hover-class 可控制元素被點擊時的瞬間狀態,對此我大開腦洞:是否是設置 hover-stay-time 的值爲正無窮 Number.POSITIVE_INFINITY 即可以使瞬間狀態轉化爲常態...很遺憾失敗了。css3
正確作法以下:git
上述實際上是使用 Data 控制 Dom 表現的通用思路,與 jQuery 大大不一樣。微信小程序的設計思想接近於 React 或者 Vue,屬於數據驅動且含生命週期的概念,不瞭解的同窗請自行科普...github
但使用 this.setData() 更新數據僅可帶動 wxml 元素的狀態變化,並無相似 Vue 中 vm.$watch 這樣的方法。欲監測到某一數據更新時執行某段邏輯彷佛不可能。例如在 app.js 內獲取微信用戶信息存儲至 globalData 中,當首頁監聽到用戶信息獲取成功時執行 loading...小程序
小程序中含相似事件代理的思想,詳見連接中的事件對象。可將事件綁定於父元素,事件觸發在於子元素。上例中 e.target 獲取的是子元素,而 e.currentTarget 獲取的是父元素。segmentfault
順便說下 wx:for 是個好東西,對於列表結構較多的頁面大大節省了 wxml 代碼量,固然其它框架也有相似的循環語句。語句 wx:for 可多重嵌套,使用 wx:for-item 變動循環變量名以防止混淆。
接下來談談圖片緩存:
該項目的圖片資源使用七牛管理,七牛自己也有緩存,但在清除七牛緩存後發現小程序內的圖片緩存仍在。故點擊了微信開發者工具中的以下幾個按鈕:
並不奏效...
最終的解決方案是在圖片連接後加一個不痛不癢的參數,例如:http://p3asta5xg.bkt.clouddn....
最後談談微信小程序的分享功能:
在分享 title 中加入了微信用戶的暱稱。當時考慮若用戶拒絕被獲取我的信息,那麼分享 title 即是「我調製了一杯【雞尾酒】,你也來試試吧!」。事實證實畫蛇添足,當用戶拒絕被獲取我的信息時,分享 title 爲小程序名稱,並不是 onShareAppMessage 中設置的 title 值。
var app = getApp(); Page({ data: { cocktailName: '雞尾酒' }, onShareAppMessage: function () { return { title: (app.globalData.userInfo.nickName || '我') + '調製了一杯【' + this.data.cocktailName + '】,你也來試試吧!', desc: '調製你的專屬雞尾酒', path: '/pages/welcome/welcome' } } });
未完待續...踩到新坑會更文~
超榮幸可以參與我司【更美小程序】的搭建,在此分享些心得但願可以幫助到像我同樣的前端界萌新,請欣賞 入坑微信小程序(項目搭建)。
做者:呆戀小喵
個人後花園:https://sunmengyuan.github.io...
個人 github:https://github.com/sunmengyuan