微信小程序开发经验

在使用Vue开发了我想要的web小程序之后，我有了将其移植到移动终端的想法。Weex是阿里巴巴的一个开源工具，使用Vue开发跨平台app。它的概念大致相当于React Native，它专注于Vue并支持全平台（Android/iOS/Web）。然而，在简要研究了它的编译和部署之后，我觉得所需的学习曲线也很陡峭。它不仅涉及多个平台的编译和打包，还涉及各种新的语法和标签。事实上，它无法绕过母语的学习，所以我先把它放在一边。

后来，偶然发现了美团的一个开源项目mpvue，这是一个用于将Vue程序编译成微信小程序的开源工具。“嗯……小程序也是跨平台的。”有鉴于此，我开始将Vue实现的app转移到微信小程序中。后来，在简单尝试了mpvue和wepy（腾讯的Vue to applet工具）之后，wepy最终被选中。从技术和功能上来说，mpvue更先进、更方便，而wepy需要更多的小程序语法。然而，mpvue太新（不到半年），缺乏文档，社区太小。如果出现问题，很难调试。

小程序开发环境

要说到点子上，您首先需要一个小程序开发人员帐户。此帐户与个人官方帐户处于同一级别，因此我必须使用新电子邮件申请注册。（PS的每个帐户只能开发一个小程序，每个个人只能有五个小程序。）

小程序网页管理页面

填写基本信息后，您将获得一个appid，用于本地程序的开发和部署。小程序的开发需要使用腾讯专门提供的跨平台开发工具（IDE），可以在官方网站上下载。除了开发小程序，这个IDE还可以用于预览微信上看到的网页。

小程序IDE

打开项目时，可以直接选择使用wepy-cli创建的项目目录（请参见wepy项目创建的官方网站）。编译后，wepy项目将输出到dist目录，applet IDE将自动加载该目录作为applet源代码。

到目前为止，小程序开发环境已经设置好。接下来，您只需要在项目目录中运行npm run dev或yarn dev即可实现程序的热更新。

小程序语法

小程序不是纯粹的webapp。它们有自己独立的文件集和语法系统。例如，它的网页文件不是html、css或js；对应的是wxml、wxss和wxs（wx指微信）。但是，也支持js。它应该与在本机浏览器上运行相同。有关详细信息，请参阅其文档。

这些新语法系统的使用有许多限制。然而，也可以想象，小程序在微信中运行。严格而简单的语法将使程序运行更加可控；毕竟，复杂的程序会有自己的声学版本。幸运的是，当局已经为小程序的这些限制/功能提供了详细的文档和解释，所以我们只需要适当地绕过它们。

此外，这种语言有很多Vue，这被认为是wepy和mpvue诞生的原因之一。以wepy为例。它的一个重要功能是重新允许开发人员添加npm引用。当wepy编译最终的小程序源代码时，它将使用来自巨大节点的npm _从modules目录中提取使用过的部分，然后将它们打包到最小的js文件中。这也是wepy最吸引人的一点，因为这样一来，npm中的开源类库就可以轻松调用了。

除了在IDE（深度定制的Chrome DevTool）中方便调试之外，还可以通过单击“预览”按钮在手机上打开它。对于开发版小程序，手机还可以使用两个单独的功能——“调试工具”和“性能监控”来辅助真机调试。因为我们启用了热更新，IDE中的UI也将实时更新。这个IDE的开发经验可以说是非常顺利的。

小程序发布

让我们在这里谈谈发展。细节上有很多陷阱，但我们一点一点地来到这里，最终得到了一个有效的小程序。以下是发布阶段。

发布的第一个条件是图标。

我别无选择，只能用我可怜的PS，勉强做出一个图标。

偶像

（右边的四颗星是南十字，左下角的NZ代表新西兰。）

好吧，我承认它很丑，但如果你看到第一版程序本身，你就会明白什么是真正的丑。

第一版程序

（你真的