初尝微信小程序（浪漫调酒师）

业余时间开发了一枚调制鸡尾酒的小游戏，具体技术细节不在此赘述，谈些我的感觉。

首先欢迎你们捧场：

源码

微信小程序文档

---

在调试时遇到的一些兼容问题：

• 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...