两年前，这个未知的小程序现在已经成为移动互联网的新出路。

最早的小程序在微信平台上出名。微信每月拥有10亿活跃用户，迅速成为小程序企业家的金块。巨头们有着强烈的嗅觉，支付宝和百度立即跟进。今天的头条也开始测试小程序。几个主要平台已采取行动，使小程序的跟踪更加拥挤。小程序生态系统多样化的背后是新一轮的巨人。

小程序之所以如此受欢迎，是因为它们拥有自己的排水模型和利润模型。毕竟，到处都有了解技术并知道如何通过技术获利的开发人员。本文以四大巨头正在关注的小程序电子商务为例，并教您如何开发在线商店的小程序版本。

1.开发小程序商城

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

让我们看一下该项目的主界面。该项目分为客户端和服务器实现。客户涉及轮询图，按钮，图像列表，产品展示，购物车等。

项目绩效显示：

2.舍入序列图设计

回合序列图显示在App主页的上部，用于显示产品信息，该信息可以在特定时间段内自动切换。轮次时序图需要使用swiper组件，每个轮次时序图项目都需要使用swiper-item组件。通常，每个项目都是图片，可以在其中直接放置标签。回合序列图的布局代码如下。

3.控制回合序列图

回合序列图的布局代码使用许多变量来控制回合序列图的显示。例如，indicatorDots用于控制是否显示面板指示器点，而autoplay用于控制是否自动切换图像。 interval用于控制切换时间的间隔，duration用于控制滑动动画的持续时间。这些变量需要在index.js文件的数据变量中设置，代码如下：

在上面的代码中，imgUrls变量没有值。如果要测试回合序列图，则可以在applet项目的根目录中创建一个images目录，并在此目录中放置几个??图像文件。为了水平填充整个界面，需要在index.wxss文件中添加以下样式代码。

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

由于该项目需要使用服务器端，因此在编写客户端时，还必须编写服务器端程序。这部分将使用Node.js + Express连接到MySQL数据库。连接到MySQL数据库之前，必须首先创建相关的表And view。

该项目是使用WebStorm开发的。创建一个名为service的项目。接下来，在服务项目中创建一个my_connect.js文件，然后输入以下代码。

接下来，测试连接到数据库的代码是否正确。将以下代码添加到服务项目的index.js文件中。

由于Node.js提供的官方模块不支持运行MySQL数据库，因此在此示例中，要运行代码，您需要使用以下命令行来安装MySQL模块。然后在浏览器地址栏中输入：3000，您将在WebStorm控制台中看到输出结果。

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

在这一部分中，服务器代码仍然被编写。轮询图需要显示在小程序上。轮询图中的数据需要从v_goods视图中获取，该视图可以获取最受欢迎和最畅销的产品信息。接下来，将以下代码添加到mysql_connect.js文件中。

接下来创建路由脚本文件hnf.js并添加以下代码：

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

6.动态显示轮询图

现在修改小终端的代码。在这一部分中，小终端将使用wx.request函数访问在上一部分中创建的路由，并根据返回的数据动态显示序列图。将以下代码添加到index.js文件的onload（）函数。

7.实现导航按钮布局

回合序列图下方是一行导航按钮，效果如下图所示：

导航按钮的布局代码需要添加到applet项目的index.wxml文件中。接下来，将以下样式添加到app.wxss文件中，其他布局也将使用此样式，因此请将此样式添加到全局app.wxss文件中。

将样式代码添加到index.wxss文件。每个按钮占整个宽度的11％。导航按钮也会动态显示，并且数据取决于navigationData变量。您可以将以下代码添加到index.js文件的数据中，以测试导航按钮的布局是否正确。请记住，这只是测试代码。将这些实验数据替换为动态数据。

8.动态显示导航按钮

在此部分中，服务器将从数据库中获取导航按钮数据，客户端将根据这些数据动态显示导航按钮。

首先切换回WebStorm，然后将以下方法添加到mysql_connect.js文件中。此方法用于获取产品类型，即导航按钮数据。导航按钮与产品类型一样多。

在服务器端创建一个type.js路由文件，并添加代码以在app.js文件中注册路由。切换到小终端，并在index.js文件的onLoad方法中添加以下代码。

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

在小程序主页的底部，列表中显示了最新，最热和最畅销的产品，与轮询图中显示的产品类似。这只是为了演示列表的使用。

10.显示产品详细信息

此部分显示了用于显示产品详细信息的布局。首先，在小终端上创建shopinfo.wxml布局文件，然后输入以下代码。