初嘗微信小程序（浪漫調酒師）

業餘時間開發了一枚調製雞尾酒的小遊戲，具體技術細節不在此贅述，談些我的感覺。

首先歡迎你們捧場：

源碼

微信小程序文檔

---

在調試時遇到的一些兼容問題：

• hover-class 屬性部分不支持
• open-type 屬性部分不支持
• css3 gradient 部分不支持

---

hover-class 可控制元素被點擊時的瞬間狀態，對此我大開腦洞：是否是設置 hover-stay-time 的值爲正無窮 Number.POSITIVE_INFINITY 即可以使瞬間狀態轉化爲常態...很遺憾失敗了。

正確作法以下：

上述實際上是使用 Data 控制 Dom 表現的通用思路，與 jQuery 大大不一樣。微信小程序的設計思想接近於 React 或者 Vue，屬於數據驅動且含生命週期的概念，不瞭解的同窗請自行科普...

但使用 this.setData() 更新數據僅可帶動 wxml 元素的狀態變化，並無相似 Vue 中 vm.$watch 這樣的方法。欲監測到某一數據更新時執行某段邏輯彷佛不可能。例如在 app.js 內獲取微信用戶信息存儲至 globalData 中，當首頁監聽到用戶信息獲取成功時執行 loading...

小程序中含相似事件代理的思想，詳見連接中的事件對象。可將事件綁定於父元素，事件觸發在於子元素。上例中 e.target 獲取的是子元素，而 e.currentTarget 獲取的是父元素。

順便說下 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'
        }
    }
});

未完待續...踩到新坑會更文~

---

2018/01/15 續更

超榮幸可以參與我司【更美小程序】的搭建，在此分享些心得但願可以幫助到像我同樣的前端界萌新，請欣賞 入坑微信小程序（項目搭建）。

---

做者：呆戀小喵

個人後花園：https://sunmengyuan.github.io...

個人 github：https://github.com/sunmengyuan

原文連接：https://sunmengyuan.github.io...