如何高效编写微信小程序?腾讯工程师做完两个项目的总结

2019-09-0108:53:38APP与小程序开发如何高效编写微信小程序?腾讯工程师做完两个项目的总结已关闭评论2,525 views字数 1165阅读模式

笔者需要经常新建项目,每次都要重复“修改项目结构 -> 从老项目中复制粘贴文件 -> 删除一些老项目中代码”这样的过程,实在费心费力。如何高效编写微信小程序呢?来看腾讯工程师总结的这个方法!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

另一个痛点是:每次新建小程序页面要生成三个文件名相同的文件 ( .wxml、.wxss 和 .js ),命令行太长(据微信同事:也可以在 app.json 的 pages 字段下添加新页面的路径,保存后也会生成对应的文件)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

因此,阅读本文需要对小程序开发稍有了解(简易教程指路文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

目标

我们现在有两个目标:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

根据通用模板新建项目文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

一键新建页面目录以及在目录中的三个文件 :.wxml、 .wxss 和 .js也可以直接在 app.json 的 pages 字段创建页面,保存后生成这三个文件。笔者没有采用这个方法的缘由一个是开始时不知道有此功能,另一个是不合平时的操作习惯,再者想到 js 文件初始化后,需要引入常用库,要插入代码片段,所以保留了这个功能。
这两个需求其实很简单,不需要 GUI,所以我们可以做一个 npm 命令行工具。想象一下这个命令行用起来应该是什么样的呢:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

用流程图示意就是:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

实现

正式开始之前,请先确认本地的开发环境,笔者的本地环境是:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

我们把问题分解为三步:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

实现命令行工具,可以在任意目录直接运行
通过输入不同的命令行参数,以执行不同的功能
考虑项目模板的存放位置,是集成到工具中,还是和工具分开呢
不用担心,都很容易解决,我们一个个看。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

命令行工具文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

package.json 中有一个字段是 bin:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

这个字段可以将开发者希望执行的脚本注册到环境变量 (PATH) 中,不同的 key 对应执行不同的脚本。也就是说现在,当我们直接在命令行中执行:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

等价于在 terminal 中执行:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

第一个问题轻松解决,关于 bin 字段更多信息请参考 npm 文档中 package.json 一节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

命令行参数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

执行 index.js 时,可以通过 process.argv 获取执行时的参数,但是要从参数数组中拆分出参数无疑很麻烦。不过,npm 发展至今,处理命令行参数的库肯定存在,就是 commander。简单好用易上手,那么第二个问题也解决啦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

项目模板的存放位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

考虑项目模板的存放位置,是集成到工具中,还是和工具分开呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

笔者选择分开管理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

在一个单独的模板代码仓库中管理模板内容,方便我们维护。目前的模板还比较简单(详见下文“模板详解”),只有标准目录结构,预期后面会加上自动化的部分(比如 less -> wxss),所以未来会改动比较频繁。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

download-git-repo 可以把给定地址的仓库内容拷贝到执行目录中。API 简单,所以就是它了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

问题都解决了,现在就让我们看看伪代码(注意:伪码中没有考虑出错情况):文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

使用

在编写好了这个工具之后,只需要在本地全局使用的话:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

在本地开发过程中,如果更新了开发版本的代码,需要更新同步到全局,这时候需要执行:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

如何高效编写微信小程序?腾讯工程师做完两个项目的总结文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/15956.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/15956.html