发布时间：2021-10-18 分类： 电商动态
何柳流：微信小程序是一个项目。就像建房子一样，奠定了基础，以确保后续工程师建立在可靠而坚实的基础之上。我需要经常创建新项目，每次我必须重复“修改项目结构 - >从旧项目复制和粘贴文件 - >删除一些旧项目中的代码”的过程真的很费劲。如何有效地编写微信applet？看看腾讯工程师总结的这种方法！
另一个痛点是，每次创建新的applet页面时，都需要生成三个文件名相同的文件（.wxml，.wxss和.js）。命令行太长（根据微信同事的说法：你也可以使用app.json的pages字段）。添加新页面的路径并保存相应的文件。）
因此，阅读本文需要对小程序开发有一点了解（一个简单的教程指南）
目标
我们现在有两个目标：
基于通用模板创建新项目
一键式新页面目录和目录中的三个文件：.wxml，.wxss和.js也可以直接在app.json的pages字段中创建，这三个文件在保存后生成。我没有使用这种方法的原因是我一开始并不知道这个功能，另一个是不适合的操作习惯。另外，我认为在js文件初始化之后，我需要引入公共库并插入代码片段，所以我保留了这个功能。
这两个要求实际上非常简单，不需要GUI，因此我们可以使用npm命令行工具。想象一下这个命令行应该是什么样的：
流程图是：
实施
在开始正式流程之前，请确认本地开发环境。作者的本地环境是：
我们将问题分解为三个步骤：
实现可以直接从任何目录运行的命令行工具
通过输入不同的命令行参数来执行不同的功能
考虑项目模板的存储位置，是将其集成到工具中还是与工具分开
别担心，它很容易解决，让我们一个接一个地看。
命令行工具
bin.json中的一个字段是bin：
此字段将开发人员希望执行的脚本注册到环境变量（PATH）中，并且不同的键对应于不同的脚本。也就是说，现在，当我们直接在命令行上执行时：
相当于在终端中执行：
第一个问题很容易解决。有关bin字段的更多信息，请参阅npm文档的package.json部分。
命令行参数
执行index.js时，可以通过process.argv获取执行时间的参数，但是从参数数组中拆分参数很麻烦。但是，由于npm已经发展，处理命令行参数的库肯定存在，指挥官。简单易用，第二个问题就解决了。
存储项目模板的地方
考虑项目模板的存储位置，它是否集成到工具中，还是与工具分开？
作者选择单独管理。
在单独的模板代码存储库中管理模板内容，以便于维护。当前模板仍然相对简单（请参阅下面的“模板详细信息”）。预计只有标准目录结构会跟随自动化部分（例如less - > wxss），因此将来会更频繁地更改它。
Download-git-repo可以将给定地址的存储库内容复制到可执行目录中。 API很简单，就是这样。
问题解决了，现在让我们看一下伪代码（注意：伪代码中不考虑错误代码）：
使用
编写此工具后，您只需要全局使用它：
在本地开发过程中，如果更新代码的开发版本，则需要将同步更新为全局，这次需要执行：
您将看到安装到环境变量中的工具目录地址已与开发目录关联：
它的工作原理如下：
△模板和插件地址将附加到参考资料部分
发布npm插件
如果要在作者等多台计算机上使用此工具，可以选择发布到npm代购源码网站。出版步骤非常简单，基本上是：
但是，我认为项目模板因人而异，所以我选择发布范围包，即插件的package.json中的name字段使用@ scopeName/wxapp-generator等值。
如果你有类似的想法并且也是一个npm免费用户，那么在你发布它时执行它：
范围对使用没有影响，但请记住在安装时执行范围名称：
详细的模板解决方案
一千人有一千个项目模板。根据业务/个性，您的项目模板可能相差甚远。作者有意识地使用了当前模板也不错，将在本节介绍。以下是项目的文件结构：
采用这种结构的原因是尽可能地分离逻辑和业务逻辑。但由于完全脱钩是不可能的，因此基本思想就是“可变分离”。通常UI更改是通过类切换或内联样式调整，因此作者的想法是“切换类”或“调整内联样式”作为变量，因为大多数业务逻辑和UI更改是链接的，并且通过提取变量，简单地在业务逻辑中更改UI。
可能会看到读者会感到困惑。让我们以“企鹅听力书”为例，看看作者是如何做到的。听力书的界面发生变化有两种情况：
有两种播放器：迷你吧和全屏播放器。播放器的播放按钮具有两种状态（图片）切换，例如“播放”和“停止”。这可以通过课程来控制。
当播放器进入全屏模式时，程序列表将被隐藏;单击箭头后，将重新显示程序列表。
上述文件结构中的view.js是UI逻辑的代码。 pages /目录中的js文件将通过import引用view.js。 view.js中的接口分为“常规”和“页面用法”：
如果将来有更多UI更改，您可以通过变量添加它们，例如pageView.id。
给出一个超级简单的例子（见下文）来模拟工作流程：
定义控制wxss
中不同样式的类将需要更改的类写入view.js并公开接口
将事件处理程序绑定在wxml
中的相应结构中事件处理程序的具体内容在相应的page.js中实现，即切换类的触发条件
旧驱动程序一眼就知道它是MVVC模式，因此UI的分离是为了拥有一个单独的控制器，而不是认真地与业务逻辑耦合，并且可以在页面开发阶段完成UI更改。从这个角度来看，applet可以让UI工程师更多地控制UI逻辑并确定代码规范和界面。
总结
初始化项目是编码的第一步。值得花更多时间为项目模板找到合适的团队。
在结束之前，让作者播放广告。 Penguin FM有两个小程序：向传统广播电台致敬，收听广播节目的“小广播电台”，并听取音频小说的“企鹅听力书”。而轻量级的“微云”。每个人都可以扫描代码体验。性能优化和功能改进也在逐步迭代中。我希望每个人都可以使用更多的反馈〜而不是心脏
