使用原生开发高仿瑞幸小程序（一）：使用 Vant 组件库和配置多页面

本文由图雀社区认证作者 曾伟@喵先森 写作而成，图雀社区将连载其 使用原生开发高仿瑞幸小程序系列，点击阅读原文查看作者的 infoQ 链接，感谢作者的优质输出，让我们的技术世界变得更加美好????

源起

为什么要跨平台，自然是为了节约成本。尤其是创业初期，需要快速迭代，快速试错。此时用原生技术，开发起来未免太过拖沓。我所想的是，如何能够快速的，最大化的覆盖屏幕数。首先，我们按照old school来分，我们可以分为移动端，web端和pc端。移动端的跨平台技术可以采用目前大热的flutter，这是由google推出的技术。而web端和pc端在Electron出现后，也变得简单了。我们可以用js来写pc端的应用。这就意味着，我们只需要两门技术就能覆盖所有端。

但，我们一定漏掉了什么。对，就是微信的小程序。相比上面的端的覆盖，我更在意的是屏幕数量的覆盖。但作为一个初创公司，拿着自己开发的app去做推广获客成本太高，地推？补贴？别忘了我们定位的是初创公司，这样下去，不是烧钱烧死，就是被羊毛党薅死。所以我们的思路就该是从流量大的地方薅用户。如今移动互联网的流量已经集中在几个大的平台上，例如微信，例如抖音。所以微信小程序是我的不二之选（这不是广告软文哈）。我之所以有这样的认知，也是由于这次疫情给了我极大的启发。由于人们避免在线下集会，造成了很多线下活动无法展开，纷纷转向了从线上寻求出路。所谓大危机中必然有大机会。我相信，很大一部分需求会搬到微信上来。所以微信将在未来的一两年会爆发出一大波需求，不容忽视。

那么再回到技术上来，微信小程序的开发，本质上还是js的开发。所以从技术栈角度来讲，并没有新添什么负担。现在前端的技术栈是js和dart（flutter）。那么服务端呢？为了不增加负担，我们能不能从js和dart中选一个呢？当然可以，在dart方面，闲鱼已经跑了很远了。可我想选js。为什么？别忘了，我们的定位是初创公司。要避免在陌生领域开疆拓土。我们可以选择非常成熟的nodejs。而和小程序联系非常紧密的云开发正是使用了nodejs。云开发不仅可以给小程序提供支持，还能给flutter，web端提供支持。这是似乎是一个很完美的方案。虽然没有收到腾讯云开发一分钱的广告费，但我仍然想为他们打call，这确实是一个伟大的产品。以我在腾讯云上的开发经验，开发效率那是杆杆的。

最后我想实践一下我的想法，所以在接下来的日子里，我会高仿一个小程序。例如某幸咖啡。同时写一系列的笔记或者教程。等小程序开发的差不多了，再用flutter开发 app端。那个时候，flutter的web开发应该也成熟了吧。我会再用Electron将web端打包成桌面端。对，所有的活都有我一个人完成。大家看，这里面也没有多少技术，一个人是可以挑战一下的。

当然，所有的代码都将会开源。

代码放在：https://github.com/gogoswift/luckin，欢迎各位大佬 Star

准备工作

在这一篇中，我们一起来做两件事

1 创建小程序 2 下载微信开发者工具

我们首先要登录微信公众平台，去注册一个小程序 https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN 这个页面会要求我们填写注册邮箱，当我们填写完注册邮箱，设置好密码之后，邮箱会收到一封激活邮件。账号激活后，我们就可以进入小程序的后台，去填写小程序的信息了。内容嘛，大家看着填，这里就没有统一标准了。当我们填写完信息后，我们再点“查看详情”。 此时我们就进入了小程序的基本设置，将网页一拖到底，可以看到AppID(小程序ID)，这个非常重要，我们复制一下，待用。至此，我们的准备工作就完成了一半。接下来我们要去以下网址下载“微信开发者工具”https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html^[1]安装好以后，然我们打开微信开发者工具，点这个大大的加号创建新的小程序。 在左侧，我们选择“小程序”，右侧，填一些必要的信息。注意第三