分类
小程序

小程序初始化时的用户状态管理

经常能看到有同学提问这个问题,刚好我之前也处理过,分享下我的方案。

分类
活动

2018 WeGeek 小程序 Hackthon 记

某天,行政找到我:“你今年的年假还剩7天,只有5天能保留到明年,建议你找时间把那两天休掉。”我正在盘算怎么用,突然就在 SegmentFault 上看到12月15-16日要在北京举办小程序 Hackthon 的消息。作为一名程序员,我其实早就想参加类似的活动了,所以,干脆就来吧。

因为最近跟蛋东剑剑一起搞的东西比较多,而且他们俩单身,比较好约,所以就拉了他们组队。

初选很顺利的通过了,然后我就定了日程、机票和酒店。

这次 Hackthon 的题目提前一周公布。我们简单商量了一下,既然没有更好的想法,不如就把我之前计划的“姆伊读书”,又叫“以后再听”做出来,感觉很能呼应小程序的主题。而且这个需求来自于我的真实日常,即使不得奖,也能收获一个有价值的产品,何乐而不为呢?本来我想抢跑来着,结果赶上老婆孩子一起生病,公司的正事儿都干不完,只好到了现场才开始写。好在我对项目比较有把握,对自己的能力也很有把握,所以最后提交的 MVP 完成度还不错。

做的时候他们表示对姆伊没有感情,不想跟狗绑定在一起,所以改名作“换听”。

结果仍然没能得奖。不得不说,这种提前公布题目的做法确实值得商榷,很多团队一看就知道是先弄了五六成,现场只搞拼装、联调,产品复杂度超过我们很多。另外评委的指导原则也有些迷,一等奖还算符合小程序的场景没啥可说,二三等奖其实都不适合用小程序来实现,独立应用才有价值。实在是为小程序而小程序。

我觉得,要是张小龙在现场的话,我们赢的概率要高很多 XD。

不过抱怨归抱怨,我倒也乐意接受这个结果。规则是人家定的,过程也公平公正公开,还不收钱,还提供盒饭,真心很感激。尤其是,在这次活动的激励下,我终于把早早就翻来覆去想了很久的产品给做了出来。而且,确实好用,我现在已经用得停不下来了。

另外最后的展示和点评也收获很多,你能发现很多人,很多不同的视角,你可以试着站在别人的角度看问题,学习别人解决问题的思路。收获很大。我觉得程序员都应该参与类似的活动,因为有机会把自己的 side project 从 idea 转化为实物。我觉得未毕业的有志于从事 IT 研发事业的毕业生也应该参与类似的活动,可以学到很多从立项、到产品规划、到实现的知识。

频率嘛,我觉得每年参加一次吧,哈哈。

分类
技术

使用 Pug 和 Stylus 开发小程序的 watch 脚本

首先,我试用了 Wepy,丑的一逼,遂放弃。

小程序开发有两点比较蛋痛:

  1. 每个页面必须有3个文件,wxml,js,wxss
  2. 使用 wxml 替代 html,使用 wxss 替代 css,使得默认的编译失效

Webpack 在这里不太适用,因为 1,我们并非要把所有代码打包到一起。WebStorm 的 File Watcher 也不适用,因为它输出的文件扩展名是固定的(跟 pug 和 stylus 源程序有关)。于是我经过摸索了,使用 gulp 脚本解决了这个问题,代码如下:

import gulp from 'gulp';
import pug from 'gulp-pug';
import rename from 'gulp-rename';

const pugFiles = 'pages/**/*.pug';

// 通用的 pug 处理,可以把 pug 转译并改名为 .wxml 文件
async function doPUG(path) {
  gulp.src(path)
    .pipe(pug())
    .pipe(rename({
      extname: '.wxml',
    }))
    .pipe(gulp.dest('./pages'));
}

// 将所有 pug 进行转译
gulp.task('pug', async () => {
  return doPUG(pugFiles);
});

// 侦听 .pug 文件的变化,并转译被修改的
gulp.task('watch', ['pug'], () => {
  gulp.watch(pugFiles, ({path}) => {
    doPUG(path);
  });
});

接下来,开发的时候,只要运行 gulp watch 即可。

用类似的方式,我们还能处理 stylus -> css,这里就不详述了,大家可以自己试一试。

完整的 gulpfile 在 GitHub 仓库里,请自行取用。

分类
js

Safari 下 Date 不支持”2018-01-01 00:00:00“

前两天发现一个小程序的问题,Android 正常,iPhone 出错。我们都知道,Debug 的关键在定位,如果是某些特殊环节,不常见的错误,就会浪费很多时间。

这个 Bug 也是如此,反复拉锯之后终于发现,问题出在下面这句:

let a = new Date(`${date} 00:00:00`);

date 是服务器端返回的值,我是把它和后面的 00:00:00 连起来,记作某天零点零刻,和今天的零点零刻做减法,计算日期差,并按照日期差来决定接下来的逻辑。这段代码在开发工具(包括 Mac)、Android 手机上运行都正常,只有在 iPhone 上不正常,于是我打开 Safari——苹果这点做得不错,桌面版 Safari 环境和 iOS 几乎没有差别,该出的问题一定会出——果然复现了这个问题。

按照规范,中国的日期格式是:“2018/01/01”,Safari 只支持这个格式。而 2018-01-012018-01-01T00:00:00 ISO 格式,Safari 也支持,但是会以格林威治时间为准,和我们有8小时的时差。Chrome 和 Android 内嵌的 WebView(基于 Blink 或者 Webkit)则都支持,所以在本地和 Android 手机上没有问题。

分类
技术

让微信小程序支持 ES6 的 Promise 特性

链接如此:https://haojen.github.io/2016/11/23/wechat-app-promise/

今日实测有效。Bluebird 3.5.0