/posts/develop-wepy-on-linux 在Linux上开发微信小程序 18 Nov 2018

是一件痛苦的事情

向来腾讯的用户产品在Linux上就很难使用, 甚至不放过开发工具. 自从微信推行小程序小游戏等”微信 OS”的产品后, 各种网络应用都急着要推出个小程序. 我作为一个吃瓜群众终于摆脱了巨大无比的国产APP, 嘴里喝着CoCo, 手上用着小程序给女朋友点单, 内心还是挺香的. 但写小程序的时候是真的一点也开心不起来. 花了一点时间研究了下怎么在Linux安心得写小程序. 这篇文章里主要用的是wepy, 如果用其他框架比如mpvue的也可以做一点参考. 以下是两个方法, 后者需要一台Windows机器.

方法1: 部分Wine

细心的同学一定早就发现了, 微信小程序开发者工具用的是基于NW.js的框架以及wcc和wcsc两个小程序自己的编译工具. (然而都全局用了NW.js也不考虑下支持下Linux). 这样思路就很明显了: 得益于wine-binfmt我们可以不用显示得在命令行里指明wine直接运行Windows程序, 因此直接用Linux的NW.js再打包一遍就可以了.

这里有一个小问题就是开发工具中的node-sync-ipc-nwjs是针对Windows特供的, 要换成node-sync-ipc.

这个方法最早在由cytle在cytle/wechat_web_devtools打包, 我针对ArchLinux的打包方式简化了一下上传在AUR wechat-devtools上.

方法2: 远程编辑

在用方法1更新1.02.1811150的时候发现了一个奇怪的问题, 就是模拟器渲染的时候莫名其妙得找不到文件 (*.wxml not found) 一时找不到原因. (截至现在(2018/11/18)我注意到cytle解决了这个问题, 有空我去研究一下)

(是微信开发者工具自己的bug)

于是我又拿出了吃灰的Surface用作build机器. 通常都是在Windows上想办法远程编辑Linux服务器上的文件, 现在我们把方向反过来.

这里主要解决两个问题:

  1. Linux向Windows同步文件
  2. wepy因为文件写入太慢导致的找不到文件bug #1755

Linux向Windows同步文件

Windows 10已经内置了OpenSSH. 因此我认为SSH一套的方法是最方便的. Windows 10上开启OpenSSH Server的方法我就不多废话了. 得注意的一点是sshd_config文件在OpenSSH正式版中在C:\ProgramData\ssh\sshd_config, 很多网上的文章已过时.

最先想到的是sshfs, 可以直接把Windows的目录挂载在本地, 这样就和平常一样, 也可以配合一些编译器插件或者IDE.

但这有个问题就是加载太慢, ls都要卡一下, 急性子都会很不爽. 想到VS 2019推出了远程协助, 我想VS Code也一定有人想办法做个插件出来. 找了一下果真有不少, 推荐几个好用的:

  1. Remote Workspace: 用了VS Code的filesystem接口, 问题是版本控制不认
  2. ftp-sync: ftp/sftp自动同步, 只要Windows端开SSH服务器就能用了, 很方便
  3. Sync-Rsync

第一个和sshfs是相同的想法, 后两个是自动同步的插件. ftp-sync不需要什么特别配置, 写好就能用. 我就简单说下Syn-Rsync的配置方法. 给出我的配置文件

{
    "sync-rsync.delete": true,
    "sync-rsync.exclude": [
        ".git",
        ".vscode",
        "node_modules",
        "dist"
    ],
    "sync-rsync.remote": "ccat3z@surfaceZ:/mnt/c/Users/ccat3z/Documents/mp/",
    "sync-rsync.args": ["-e ssh -p 6522"],
    "sync-rsync.onSave": true,
    "sync-rsync.flags": "crzv"
}
  1. remote地址我写的是wsl里的sshd, 所以是/mnt/c开头的
  2. 我没有用sync-rsync.shell而是在args里指定了remote shell, 临时解决下插件的问题
  3. flags用crzv替代默认的, -c让rsync根据checksum来比较文件而不是修改时间和文件大小. (否则会导致Windows端的wepy整个项目重新编译, 因为wepy是根据修改时间来判断或者文件大小判断的)

[WARNING] 发现空文件 [Error] 打开文件失败

这个问题在wepy的issue #1755中也有人提到, 是文件写入不够快导致的, 在主机上是小概率事件, 在远程编辑上就成了完全事件.

看wepy的源文件可以发现wepy的watch功能是通过chokidar实现的, 并且会读取wepy.config.js中的watchOption传给chokidar. 默认chokidar会在文件出现的那一刻触发add event, 参考paulmillr/chokidar, 我们只要设置awaitWriteFinish即可解决问题.

在wepy.config.js里加入这个

watchOption: {
    awaitWriteFinish: true
}