开发 | 用 7 天时间,他做了个仿麦当劳的小程序

文 | Jerry Lee

作为全栈的学习者,初学微信小程序,抱着试试做心态,一个星期内初步完成了仿「i 麦当劳」小程序的项目。

接下来,我与知晓程序(微信号 zxcx0101)就来跟大家一起回顾一下这个项目的完成过程。

关注「知晓程序」公众号,在微信后台回复「开发」,获取小程序开发技巧精选文章。

为什么选择小程序?

小程序对于新手来说,是很容易上手的。你只需要用几天时间去熟悉小程序的构建过程和文档,就可以做出一个比较完整的小程序。

特别是 rpx,有了它,小程序可以自动适应不同的手机屏幕,这也使得开发者的工作量大幅降低

关注「知晓程序」公众号,在微信后台回复「rpx」,获取 rpx 单位详细解读文章。

对于用户来说,小程序是一个不需要下载安装即可使用的应用,而且它的背后是强大的微信。

所以,如果我们能够用自己的创造思维去看待它,你会有很大的收获。O(∩_∩)O

开发工具

  • 微信 Web 开发者工具,以及开发文档:微信开发的小程序编辑软件,下载安装即可使用。同时,开发文档可以解释小程序的 API 接口用法。
  • Easy Mork:用它可以模拟小程序向后端交换数据,可以使用 JSON 格式数据。
  • 阿里的矢量图标库:这个是个好东西,以前我总是为找不到图标元素烦恼,现在有了它,基本上能找到需要的图标。

功能实现

1. 优惠券的显示及页面传值

我们从 Easy Mock 模拟获取到优惠券的信息,并且利用了 wx:for 这个控制属性,绑定一个数组,将信息显示到页面上。

我们还可以注意这个信息 navigator,绑定了跳转页面的属性。

在跳转的过程中,它可以传递变量。例如 ?url={{item.url}}。在本例中,我需要传递图片地址信息到下个页面。

当然页面传值并不只有这样方法,还有设置全局的数据缓存、引入事件订阅和发布框架 onfire.js 等方法。

接下来,我们需要获取从服务器发来的数据。我们利用 wx.request() 向服务器发起数据请求。

通过这个接口,发起的是 HTTPS 请求,并且同时只能进行 5 个网络请求

我们从 Easy Mock 中获取数据信息,利用 setData() 改变 imgs 变量的值。

2. 星座选择器

表单组件 picker 支持三种选择器,通过 mode 来区分,分别是普通选择器,时间选择器,日期选择器,这里我们选择的是普通选择器。

  • range 是展示列表值的数组,列表中所有的元素都在里面声明。
  • mode 是设定选择器模式。在这里,我们将其设定为 selector
  • value 表示用户当前选中的项目。
  • bindchange 是选择器的值改变时,所触发的事件。

从微信端获取的个人信息放在本地,并利用 wx.setStorageSync() 缓存特定的信息。通过 picker 获取到的星座,就可以利用这个方法,放到本地。

关注「知晓程序」微信公众号,在微信后台回复「源码」,获取项目源码地址。

我踩过的「坑」

刚开始,我对文档不熟悉,导致自己走了很多的弯路。

例如,我做星座选择器的时候就不知道 picker 这个组件,改而使用了 action-sheet。因为 action-sheet 里面的数据不能超过 6 项,所以我在这里卡了一段时间。

在开发小程序时候,至少需要通读一遍文档,知道小程序提供什么组件和 API,避免使用了不合适的组件。

还有,微信小程序的编译包是不能超过 2 MB 的,如果你不将自己的图片放在服务器,也尽可能将你的图片压缩一下。我开发的时候,编译包就超过了 2 MB。

另外,由于之前不了解弹性布局 Flex,页面总会有些瑕疵。自从用了 Flex 之后,发现它可以完美地解决小程序界面布局的问题,妈妈再也不会担心我的图片文字同时居中了。

关注「知晓程序」微信公众号,在微信后台回复「Flex」,一篇文章带你了解 Flex 布局。

最后,我们来看下小程序整体运行效果吧。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-08-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.6 第三方js类库

1180
来自专栏前端新视界

浅谈 Angular 项目实战

我不是 Angular 的布道者,但如今自称 Angular 派,使用 Angular 做项目让我有一种兴奋感。目前的三大主流前端框架都研究过,博客中也有三者的...

1500
来自专栏娱乐心理测试

vue开发类似淘宝商品评价页面(星级,上传多张图片)

最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示:

1562
来自专栏互联网杂技

20个为前端开发者准备的文档和指南7

1. DevTools Challenger 它是一个交互式的站点,演示了如何在Firefox开发者版本里使用其拥有的新的相关动画功能。 ? 2. The HT...

3675
来自专栏编程

前端三大框架大杂烩

摘要:从angular的诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有其特定的原因和背景。不同的开发者选择时,也是依...

3315
来自专栏极乐技术社区

五个套路看懂微信小程序开发(下)

你或许听说过,快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现,这个教程虽然简单,但对于微信小程序开发来说,80%的套路都能从这里学习到,你...

3149
来自专栏章鱼的慢慢技术路

Unity入门教程(上)

5607
来自专栏java工会

前端进阶攻略|最全的前端开源JS框架和库

3637
来自专栏葡萄城控件技术团队

TypeScript VS JavaScript 深度对比

1634
来自专栏企鹅号快讯

前端三大框架vue,angular,react大杂烩

摘要:从angular的诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有其特定的原因和背景。不同的开发者选择时,也是依...

2476

扫码关注云+社区

领取腾讯云代金券