欢迎来到本网站

全国统一咨询热线:166-2870-3070

新闻中心

新闻中心News Center

联系方式

联系方式Contact infoemation

电话:166-2870-3070

邮箱:support@0707app.com

地址:上海市徐汇区569号数字化创意园1号楼606-607室

当前位置:明翔网络 > 新闻中心 > 小程序开发:腾讯、阿里、百度、头条都在抢!

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

文章出处:http://www.ucunicom.com/a/119.html 阅读量:83 发表时间:03-09 09:44
新闻中心

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


最早小程序在微信平台上成名,手握 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 讲》。本文中没有展现完整的项目源代码,可以到作者的课程中下载使用;最后,要想开发牛逼的小程序,还需要有系统的课程,这样学起来一定会更加轻松 

全国咨询热线:166-2870-3070

二维码

地址:上海市徐汇区569号数字化创意园1号楼606-607室

版权所有 © 1999-2017 Copyright © 1999-2017 All Rights Reserved

no cache
Processed in 0.513554 Second.