微信小程序开发心得

crazyelephant 发布于10月前 阅读7323次
0 条评论

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

首先欢迎大家捧场:

源码

微信小程序文档

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

  • hover-class 属性部分不支持

  • open-type 属性部分不支持

  • css3 gradient 部分不支持

hover-class 可控制元素被点击时的瞬间状态,对此我大开脑洞:是不是设置 hover-stay-time 的值为正无穷 Number.POSITIVE_INFINITY 便可以使瞬间状态转化为常态...很遗憾失败了。

正确的做法如下:

上述其实是使用 Data 状态控制 Dom 表现的通用思路,与 jQuery 大大不同。顺便说下 wx:for 是个好东西,对于列表结构较多的页面大大节省了 wxml 代码量,当然其他框架也有类似的循环语句。

小程序中含类似事件代理的思想,详见链接中的事件对象。可将事件绑定于父元素,事件触发在于子元素。上例中的 e.target 获取的便是子元素,而使用 e.currentTarget 获取父元素。

微信小程序的设计思想接近于 React 或者 Vue ,属于数据驱动且含生命周期的概念,不了解的同学请自行科普...

但使用 this.setData() 更新数据仅能带动 wxml 元素的状态变化,并没有类似 Vuevm.$watch 这样的方法。欲监测到某一数据变化时执行某段逻辑似乎不可能。例如在 app.js 内获取微信用户信息存储至 globalData 中,当首页监听到用户信息获取成功时执行 loading...

接下来谈谈图片缓存:

该项目的图片资源使用七牛管理,七牛本身也有缓存,但在清除七牛缓存后发现小程序内的图片缓存仍在。故点击了微信开发者工具中的如下几个按钮:

并不奏效...

最终的解决方案是在图片链接后加一个不痛不痒的参数,例如:http://osm0bpix4.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

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

查看原文: 微信小程序开发心得

  • organicfrog
  • purplepanda
  • crazybear
  • ticklishelephant
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。