初嘗微信小程序(浪漫調酒師)

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

首先歡迎你們捧場:html

源碼 前端

微信小程序文檔vue


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

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

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

正確作法以下:git

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

但使用 this.setData() 更新數據僅可帶動 wxml 元素的狀態變化,並無相似 Vuevm.$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'
        }
    }
});

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


2018/01/15 續更

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


做者:呆戀小喵

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

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

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

相關文章
相關標籤/搜索