使用原生开发高仿瑞幸小程序(一):使用 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]安装好以后,然我们打开微信开发者工具,点这个大大的加号创建新的小程序。 

  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值