实战小程序网上商城

两年前还籍籍无名的小程序,如今已经成为移动互联网的新风口。

最早小程序在微信平台上成名,手握 10 亿月活用户的微信,很快成为小程序创业者的掘金之地。巨头的嗅觉敏锐,支付宝、百度随即跟进,今日头条也开始内测小程序,几大平台纷纷出手,让小程序赛道更加拥挤,小程序生态多元化的背后,是巨头新一轮跑马圈地。

而小程序之所以这么火,是因为其自身的引流模式和盈利模式,毕竟既会技术、又知道如何将技术变现的开发人员到哪都是香饽饽。本文以四大巨头都在关注的小程序电商为例,手把手教你开发小程序版网上商城。

1. 开发小程序商城

本文将实现一款小程序版的网上商城,前端使用 JavaScript 开发小程序,后端使用 Node.js + Express + MySQL。首先用 SQL 脚本建立 MySQL 数据库,数据库名为 orishop。MySQL 用户名是 root,密码是 12345678,也可以使用其他用户名和密码。

下面先看一下本项目的主界面,本项目分为客户端和服务端实现,客户端涉及到轮询图、按钮、图片列表、产品展示、购物车等。

项目效果展示:

2. 轮序图设计

轮序图是在 App 首页上部显示的,用于展示商品信息,可以以一定时间自动切换商品信息。轮序图需要使用 swiper 组件,每一个轮序图 Item 需要使用 swiper-item 组件,通常每一个 Item 是一个图片,可以直接在<swiper-item>中放置一个<image>标签。轮序图的布局代码如下。

3. 控制轮序图

轮序图的布局代码中使用了很多变量来控制轮序图的显示,例如,indicatorDots 用来控制是否显示面板指示点,autoplay 用于控制是否自动切换图像。interval 用于控制切换时间的间隔,duration 用于控制滑动动画时长。这些变量都需要在 index.js 文件的 data 变量中设置,代码如下:

在上面的代码中 imgUrls 变量没有设置值,如果想测试轮序图,可以在小程序工程的根目录创建一个 images 目录,并且在该目录中放置若干个图像文件。为了让轮序图水平充满整个界面,需要在 index.wxss 文件中添加如下的样式代码。

4. 使用 Node.js + Express 连接 MySQL 数据库

由于本项目需要使用服务端,所以在编写客户端的同时,还要编写服务端的程序,这一部分会使用 Node.js + Express 连接 MySQL 数据库,在连接 MySQL 数据库之前,先要创建相关的表和视图。

本项目使用 WebStorm 开发,创建一个名为 service 的工程,接下来在 service 工程中创建 my_connect.js 文件,并输入下面的代码。

接下来测试连接数据库的代码是否正确,在 service 工程的 index.js 文件中添加如下代码。

由于 Node.js 官方提供的模块不支持操作 MySQL 数据库,所以运行本例的代码需要使用下面的命令行安装 MySQL 模块。然后在浏览器地址栏中输入 http://localhost:3000,就会在 WebStorm 的控制台看到输出结果。

5. 从 MySQL 数据库中获取要显示的轮询图信息

在这一部分仍然编写服务端代码,在小程序端需要显示轮询图,轮序图中的数据需要从 v_goods 视图获取,该视图可以得到最热,销售最好的商品信息。接下来在 mysql_connect.js 文件中添加如下代码。

接下来创建路由脚本文件 hnf.js,并添加下面的代码:

接下来在 app.js 中使用下面的代码注册 hnf 路由。

6. 动态显示轮询图

现在修改小程序端的代码,在这一部分会在小程序端通过 wx.request 函数访问上一部分创建的路由,并根据返回数据动态显示轮序图。在 index.js 文件的 onload() 函数中添加下面的代码。

7. 实现导航按钮布局

在轮序图下方是一排导航按钮,效果如下图所示:

导航按钮的布局代码需要添加到小程序工程的 index.wxml 文件中。接下来在 app.wxss 文件中添加如下的样式,其他布局也会用这个样式,所以将该样式添加到全局的 app.wxss 文件中。

在 index.wxss 文件中添加样式代码,每一个按钮占整个宽度的 11%。导航按钮也是动态显示的,数据依赖于 navigationData 变量,可以在 index.js 文件的 data 中添加如下代码来测试导航按钮的布局是否正确,记住,这只是用于测试的代码,在后面的布局会用动态的数据替换这些实验数据。

8. 动态显示导航按钮

本节会在服务端从数据库中获取导航按钮的数据,客户端会根据这些数据动态显示导航按钮。

首先切换回 WebStorm,在mysql_connect.js文件中添加如下的方法,该方法用于获取商品类型,也就是导航按钮数据。有多少个商品类型,就显示多少个导航按钮。

在服务端创建一个 type.js 路由文件,在 app.js 文件中添加代码注册路由。切换到小程序端,在 index.js 文件的 onLoad 方法中添加下面的代码。

9. 显示最热、最新和畅销商品

在小程序首页下方通过列表显示了最新、最热和畅销商品,与轮询图显示的商品类似,此处只是为了演示列表的使用。

10. 显示商品详细信息

本节显示了显示商品详细信息的布局,首先在小程序端创建 shopinfo.wxml 布局文件,并输入下面的代码。

接下来在 shopinfo.wxss 文件中输入代码,最终显示的效果如下图所示。

总结

以上的小程序商城开发项目案例来源李宁的达人课《小程序与云开发实战 36 讲》。本文中没有展现完整的项目源代码,可以到作者的课程中下载使用;最后,要想开发牛逼的小程序,还需要有系统的课程,这样学起来一定会更加轻松

原文发布于微信公众号 - GitChat精品课(CSDN_Tech)

原文发表时间:2018-11-12

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

动态控制C4C UI元素的显示和隐藏

C4C UI上UI元素的显示和隐藏可以通过Key User在Adaptation模式里通过编辑一些简单的rule去控制,诸如这种格式:

4354
来自专栏小文博客

为你的站点加上“懒加载”——提高用户体验&节省流量

通常来说,一个正常web页面是由图片和文字以及各种CSS,JS构成,而这其中,拖慢网速的罪魁祸首就是图片。懒加载即将页面中的图片分布加载,边浏览边加载,从而减轻...

4419
来自专栏更流畅、简洁的软件开发方式

我的网站的后台管理的结构图。

不知道这个能不能放在首页,不行的话我会测下来的。 另外这个算不算是一种架构呢? 欢迎大家多多批评指教! ? 说在前面: 1、 配置文件并不是 web.confi...

2925
来自专栏小白课代表

OneTab – 帮你节省 95% 的内存,让 Chrome / Firefox 重焕新生

浏览器作为我们上网的窗口,在我们的工作学习中担任着非常重要的角色,但人们想要浏览什么东西的时候,往往都是打开浏览器,打开网站,搜索关键词,尤其是你想要查某样东西...

3665
来自专栏腾讯大讲堂的专栏

ReactJS 服务端同构实践【QQ音乐web团队】

作者:calvin 腾讯 QQ音乐 数字音乐部 工程师 最近在项目中接入了 ReactJS 并在服务端做了同构直出。关于 ReactJS 服务端同构业界已经有...

2655
来自专栏CSDN技术头条

小程序开发:腾讯、阿里、百度、头条都在抢!

最早小程序在微信平台上成名,手握 10 亿月活用户的微信,很快成为小程序创业者的掘金之地。巨头的嗅觉敏锐,支付宝、百度随即跟进,今日头条也开始内测小程序,几大平...

1942
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native升级指南|v0.40+升级适配经验与心得

React Native作为一个有上千开发者参与的开源项目,自从2015年3月27日第一版发布以来到现在已经有147次版本发布了,平均起来几乎每周都会有新的版本...

3958
来自专栏腾讯移动品质中心TMQ的专栏

H5前端性能测试快速入门

前言 说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。那本文谈到...

2916
来自专栏强仔仔

利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码

今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码的功能。 其实主要注意几点细节就可以轻松实现这样的功能了,第...

3059
来自专栏陈津的专栏

谈谈 React + Redux 的可复用性

本文主要介绍React + Redux 全家桶在团队业务开发实际使用中遇到的一些混合复用性问题、思考以及解决。

1.2K2

扫码关注云+社区

领取腾讯云代金券