外卖小程序-微企邦业务4部(在线咨询)-小程序

哪些企业或者行业适合定制小程序？

今天小编就为大家简单罗列几个大类供各位老板参考。（文末有惊喜哦）

电商买卖适用于各行各业，例如：服装、电器、家居等衣食住行

预约服务适用于酒店预订、家政服务、场地预订等提前预约的服务

新闻资讯适用于各个行业的资讯内容展示、企业介绍，可评论互动

社区讨论适用于各个行业用户群体交流，兴趣或讨论组等服务

商家联盟适用于本地资源整合，打造自己的商圈联盟

到店系统餐饮行业提前约，免排队，提高执行效率

知道程序点击卡片，立即定制小程序

科技创意

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

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

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

1. 开发小程序商城

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

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

项目效果展示：

2. 轮序图设计

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

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%。导航按钮也是动态显示的，数据依赖于 n***igationData 变量，小程序，可以在 index.js 文件的 data 中添加如下代码来测试导航按钮的布局是否正确，记住，这只是用于测试的代码，在后面的布局会用动态的数据替换这些实验数据。

8. 动态显示导航按钮

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

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

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

9. 显示、畅销商品

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

10. 显示商品详细信息

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

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

anDev 嗜码 2018-11-08之前老师让我整理一下小程序的一些学习资料，正好班上很多同学的毕业设计都有要做小程序开发，我索性就一起分享出来，大家一起参考学习。聊天记录小程序端开发小程序端可以理解为Web中的前台，即界面显示，使用一些常用的网页元素以及css，对界面进行布局，使用js进行数据绑定操作。只需要有基本的html、css、js的基础就能开始学习了，至于如何学习，可以通过视频教程、博客等等的方式，***重要还是要自己实践，下面是一些相关的资料，自己进行选择性的学习：微信小程序开发文档。文档大概过一遍，大致了解有哪些组件、常用api就可以了，需要的时候再来查询。小程序视频教程。这是一套小程序视频教程，虽然教程里的工具以及部分api微信已经更新了，但是基础的东西没有改变，还是有一点价值。另外，也可以去慕课网看一些免费的课程，如果觉得没有太大作用建议去购买付费课程。小程序源码大全。有时候我们写小程序不知道如何布局，这时候参考别人的源码很有必要。这里面有120多个小程序的源码，有的包括前后台，可以根据自己的需求进行适当修改。小程序后端开发与调试之前在文章中也有提到过，后台的开发语言有很多种选择，可以是php、node.js、也可以是J***a，微信对这个没有做出限制，大家可以选择自己***为擅长的开发语言。

后台开发好了，如何在本地对小程序进行调试呢？平时我们使用s***或者ssh开发好后台后，调试网页的正常运行是在浏览器里输入localhost或者127.0.0.1进行访问服务器。但是小程序的调试是不支持本地域名以及ip地址访问的，因此我们需要将本地的ip映射到外网，这里有个内网穿透工具，具体使用方法参考这篇文章：《微信小程序如何搭建本地环境开发》。

至于前后台数据如何交互，其实主要使用wx.request这个api，可参考的文档以及博客。这里放一些博客地址，大家自行参考：简单的微信小程序与J***a后台的连接小程序学习路线校徽头像制作小程序前后台源码校徽头像制作小程序前台教程校徽头像制作小程序后台教程后台回复小程序资源获得所有资源链接，或者点击阅读原文跳转到我的博客进行。推荐阅读