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

小程序开发有两点比较蛋痛:1. 每个页面必须有3个文件,wxml,js,wxss;2. 使用 wxml 替代 html,使用 wxss 替代 css,使得默认的编译失效。这个脚本用来帮助我们使用 pug 和 stylus 进行开发。

首先,我试用了 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 仓库里,请自行取用。

MySQL 的编码问题

解决字符集为 utf8_general_ci 的表里无法存储表情符号的问题。

前几天朋友的小程序遇到点问题,同样的代码,有些人就是注册不上,有些人就没问题。让我帮忙看。

看代码应该没问题,我自己试也没问题,很诡异。后来我发现,说注册不上的一个截图里,昵称里有一个雨滴的符号。我们知道,传统的编码是没有表情符号的,表情符号是 Unicode 后期才加进去的,那么会不会是数据库字段的问题?看了一眼,Laravel 默认创建的数据库,字符类型是 utf8mb4_unicode_ci,而他们数据库是 utf8_general_ci,Google 一下,找到下面这篇文章:

為什麼MYSQL要設定用UTF8MB4編碼 UTF8MB4_UNICODE_CI

里面提到:

當資料庫需要儲存或處理以下資料:emoji (手機端常用的表情字符)

应该使用 utf8mb4_unicode_ci,因为它会用更多的空间存储字符。基本锁定是字符集的问题。然后看到梦康大的一篇博文:直接使用 mysql utf8 存储 超过三个字节的 emoji 表情 ( 不使用 utf8mb4 ),决定参考他的方案,毕竟改库改表不是小事情。

不过时过境迁,梦康文中的 func_overload 已经可以用 mb_strlen($str, '8bit') 来替代,所以最后的代码大约是这样的:

// 替换
protected function encodeEmoji($input) {
  $length = mb_strlen($input, 'utf-8');
  $result = '';

  for ($i = 0; $i < $length; $i++) {
    $tmp = mb_substr($input, $i, 1, 'utf-8');
    if (mb_strlen($tmp, '8bit') >= 4) {
      $result .= '[[Emoji:' . rawurlencode($tmp) . ']]';
    } else {
      $result .= $tmp;
    }
  }
  return $result;
}

// 替换回
protected function decodeEmoji($nickname) {
  return preg_replace_callback('~\[\[Emoji:(.*?)\]\]~', function ($matches) {
    return rawurldecode($matches[1]);
  }, $nickname);
}

所以说,程序员心态要保持年轻,步调要跟年轻人保持一致,这样才更容易发现新问题,所以我的昵称已经改成“肉山🎩”了。

Laravel 开发笔记:环境搭建

记录 Laravel 的一些笔记,随时更新。

文档

英文官网:https://laravel.com/
英文文档:https://laravel.com/docs/5.5
中文文档:https://d.laravel-china.org/docs/5.5/packages

建议两边都打开,对比阅读。

配合 PHPStorm 使用

Laravel 里面定义了很多别名,直接放在 PHPStorm 里会有很多黄色曲线,看起来非常不爽。关键是影响代码补全,所以最好用一个库来搞一下。

安装 barryvdh/laravel-ide-helper:

composer require --dev barryvdh/laravel-ide-helper

注册服务。编辑 app/Providers/AppServiceProvider.php:

public function register() {
  if ($this->app->environment() !== 'production') {
    $this->app->register(IdeHelperServiceProvider::class);
  }
}

生成 meta 文件:

php artisan ide-helper:meta

诡异的 Mac + PHP + Nginx 问题

前两天又遇到一个诡异的问题,以上是解决手段。

问题描述

这次是微信公众号开发,本身就有很多问题,也严重加剧了我调试的难度。正在做一个 WordPress 插件,功能是将公众号文章和 WordPress 互相同步。之前一切正常,突然有用户反馈抓不到公众号上的文章了。

顺便说下,插件地址:https://github.com/meathill/wp-plugin-weixin 目前支支持手动部署,完成二维码之后开始做发布版。

继续阅读“诡异的 Mac + PHP + Nginx 问题”

放弃友言

告别友言,回归 WordPress 评论框。

WordPress 内嵌评论,不过不算太好用;当时也有其它用第三方评论的需求,所以就分别注册了友言和多说,游戏泡泡用多说,博客用友言。一直到现在。

多说前阵子关了,搜了一下发现网易云跟帖也要关了。国内硕果仅存的可能就是搜狐畅言了,不过搜狐嘛,老态龙钟,也不让人放心。最后决定,还是上外国的吧。

友言从我用开始就半死不活的样子,竟然坚持到现在,也挺难得。不过估计他们团队已经放弃这块业务了,Bug 多,功能少,各种服务失效。其实我早就想换,不过一直犯懒。现在 https 已经上了,友言也废了,提前切吧。

然后发现友言不支持评论导出……好吧,谢谢友言,有缘再见。

上 HTTPS

现在工具链如此成熟,上 https 简直容易到死。

为啥

  1. 更安全。现在经常在公共场合工作,如果登录博客走 http,太不安全。
  2. 更稳定。国内运营商劫持简直丧心病狂,只能 https 解燃眉之急。
  3. 更有逼格。好歹是个工作十几年的老油条,自己博客连个 https 都没,浏览器一直报告“不安全”,看着太低端。

怎么上

简直容易到死。我之所以选在这个时间上 https,就是想等工具链成熟。现在何止成熟,简直傻瓜。

  1. 免费证书有好几家,我选择 Let’s Encrypt,无他,他们家名字好记。
  2. 进入官网,选择 “Get Started” 进入下一页
  3. 简单阅读一下,他们建议使用命令行工具 Certbot
  4. 听人劝吃饱饭,那就用,进入官网,选择 Software -> Nginx,System -> Ubuntu 17.04,自动跳转到使用步骤。
  5. 然后安装 Certbot
  6. certbot --nginx(其实不带参数也行,它会自动检查),启动配置向导,跟着一步一步来。它会自动配置证书、自动修改 nginx、还可以更新证书,基本上一路回车就行。
  7. 修改 /etc/crontab,配置自动更新。按理说证书有效期为90天,差不多3个月更新就行。然而 crontab 只能按月配置,这样算起来一年有好几天会出问题,所以我干脆配置奇数月的第一天更新。

问题

  1. 七牛云需要独立的证书,申请中。
  2. 友言也挂了,看来要用回 WordPress 自己的评论,或者干脆 Disqus。

组件化的度

最近快被贵司的后台架构搞崩溃了,吐槽吐槽发泄一下。

加入贵司后,接手前端开发,主做后台产品。按理说,我在前司做了5年后台产品,轻车熟路,熟的不能再熟,这项工作对我来说应该再合适不过。结果进展非常不顺,甚至老板来敲打我,说工作效率太低,需求做的太慢。

我也不得不承认,就目前来看,自己确实没有达到很高的效率。不过我也得吐槽一下,这是有原因的!不是我不努力,而是现在的架构实在太太太……(我得选个好词,以免伤害到球哥的感情),太僵硬吧。

(目前的后台架构是球哥基于 Vue 设计开发的组件化框架。球哥是个码力十足,有追求有实力的人,我非常欣赏他,然则这套框架我实在不敢苟同。)

Vue 最大的优势,就在于它用很低的成本赋予了 Web MVVM 的能力。于是我们这些前端开发者可以用很低的软件复杂度,完成非常优秀的产品。而且,其作者还尽可能的把 Vue 解耦,降低入门门槛和使用门槛,我们不需要上来就面对一大批陌生的名词和概念,几乎可以直接上手实操。

可惜,与之同期到来的,还有“组件化”这把双刃剑。组件化当然有好处,它方便我们复用代码,提升效率。但也有很多开发者走上歪路——写组件库,用组件库。写组件库当然有好处,比如,是个扬名立万的好机会。用组件库也有好处,可以提升效率,省去很多开发量。

但是,所有组件库都有一个避不开的槛——颗粒度。颗粒度太细,用起来跟原生 HTML 差不多,意义不大;颗粒度太粗,一旦不合业务逻辑,就会很蛋疼(对,我就很蛋疼,简直每隔几天蛋就要碎一次……)。怎么样来确定颗粒度的粗细呢?只能看业务了。

2B 开发的特点

回到2B业务上。2B开发有几个明显不同于2C开发的地方:

  1. 业务流程又长又复杂
    • 2C 业务,比如微博、微信,用户操作简单直接,效果反馈很快
    • 2B 业务,如果某个操作要填10个表单,经过5个环节审批,那就一个都少不了
  2. 客户多付费,必须尊重他们的需求

这两点之下,会产生一些要求:

  1. 表单复杂,校验项多,灵活性要求高。此时,表单生成器就不再适用;只要,要把可以生成的简化版,和需要人工的复杂版分开。
  2. 表格多,列多,单元格多变。此时,表格组件也不宜复杂,处理好简单的分页筛选即可,剩下的还是交给业务相关的组件。
  3. 表格表单复用性差,很多表格表单都只出现一次,或者有自己独特的需求。此时,组件的优势不复存在,工作量怎么做都是接近的,反倒是原始的做法更清晰直接。

2B 开发的组件化

所以,我认为,2B 的产品,不适宜上来就用组件库搭建复杂的框架。相反,用最简单直接的 HTML、JS 元素,加上 MVVM 特性,效果会更好。

初期

最合适的组件化方案就是“不要过早组件化”。组件化的颗粒度以增强原始 HTML 元素为主,比如 Typeahead(输入搜索下拉选择)、给 Input 增加通用的校验工具,等等。用几乎最原始的方式开发,完成需求。这样看起来土,但带来的两个非常重要的好处:

  1. 思路直接,符合直觉,开发者不用投入大量精力学习新框架可以凭直觉完成
  2. 颗粒细,方便实现各种业务逻辑。比如表单想哪几个字段一起校验就一起校验,想怎么显示数据就怎么显示数据。

中期

这个时候我们应该完成很多需求了,哪些组件使用频繁值得抽象,哪些组件很复杂但是只用一次,大家心理都有数了,就可以开始着手进行组件化的工作。

不过,这个时候,仍然不需要做什么表单生成器、表格生成器之类的东西。我们要做的,是强业务相关组件。比如,某个表单在多处被重复使用,我们就要想办法把它抽象成组件(一般用到第3次,就要考虑做组件,用到第4次就一定要做成组件)。做出来的组件,只包含这个表单;抽象的目的:统一管理这个表单,方便别人复用。

抽象成组件的目的,是让今后的开发更成熟快捷,不是为了提炼出一套通用工具集,放到市场上扬名立万。

晚期

这个时候我们应该积累了不少组件,足以应付日常需求,可以快速响应快速开发。此时,组件化以重构为主。

最终,很遗憾,我们并未收获一套普适的通用组。但是,我们得到一套和业务深度绑定的组件库,和建筑于底层,弹性好鲁棒佳的架构。


这才是我眼中的组件化之道。

尬聊会:第四期实录

尬聊会第二期实录。聊了学习、半路出家、去哪里找工作等问题。

视频地址 Bilibili

时间:2017-09-17 22:00
地点:douyu.tv/meathill
回看视频:http://blog.meathill.com/tech/galiao-4.html

0. 试讲 PPT

https://github.com/orgs/meathill-lecture/

1. 从学校到工作必须习惯的转变

有人问:觉得现在的工作比较难完成,怎么办?是不是要换工作。

职场当中,普通员工和领导之间,基层领导和中层领导,中层领导和高层领导,大多数处于一种荣辱与共的状态,是多和博弈。所以,尽早与领导沟通,重新安排分配工作,对大家都有好处。换工作这里并不合适。

之前写的一篇文章 开发新人要适应的变化

2. 学习方法,我学了东西很快忘

  1. 尽量多的做东西
  2. 尽量的关注这方面的内容
  3. 做一些自己的小产品/工具

3. 编程思维

有时候需要一个需求,明明不难,却无从下手

—— 写得少

把数字转成中文大写,比如 1024 => 壹仟零贰拾肆

方法同上。

走出舒适领域。

4. 老师, 我是半路出家, 非计算机方向。在编程道路上常常会有力不从心。

  1. 可以解决,比如通过阅读、看视频、练习等
  2. 可以忽略,需要我们学会区分知识的边界

5. SEO 分页还是ssr好

如果服务器很好,那无所谓;不然的话,静态分页好。

6. 找工作去哪个网站比较好

建议大家常泡社区:

  1. https://segmentfault.com/questions
  2. https://www.v2ex.com/

7. 找工作技术和人力都过了还是没要我,怎么回事?

  1. 有更合适的人选
  2. 这个岗位不招人了
  3. 这个岗位出现了变化
  4. 你感觉错了……