零基础开发一款微信小程序商城 - 好文

一个朋友问我能不能帮忙做个商城？我一个完整网页都写不出的 Android
开发者，我该怎么拒绝呢？好吧，看在小程序这么火的形势下，我还是答应了！找了个开源项目，差不多花了三天时间搞定。

本场 Chat 主要是讲一个开源的微信小程序商城的安装运行调试及数据修改，包括前台和后台的开发。

* 通过 IDEA 安装后台代码运行。
* 安装 MySQL，Navicat 管理工具进行数据库管理操作。
* 安装微信小程序开发工具，运行代码。
最后：在决定购买之前，希望您能看下上面内容，这篇文章不讲前后端技术，只是一篇开源商城项目的调试运行。效果可以在我同名公众号上查看，如果真对您有用，再决定订购。

小程序真的太火了，我家四线小城市的朋友都知道了，当然，基于我是程序员，遂找我一块开发微信小程序商城。

正如前面所说，我网页这一块是欠缺的，一个完整的网页都没写过的我，你想让我搞啥呢？造飞机？真以为是个程序员啥都会？

最终还是答应了，主要出于三个方面考虑：

* 别人在有需求的时候主动找到我，说明对我能力的信任，不想辜负别人的信任。
* 小程序确实是个引流的巨大入口，市场需求很大，可以尝试学习下。
* 可以挣钱，下午茶有着落了。
正如前面所说，我是找了个开源项目，差不多花了三天时间搞定。一天时间看找开源项目，一天时间部署运行环境，看了半天 API 文档。差不多就是这么个进度。

下面我们先来看下实现的效果，小程序效果如下：

后台管理系统效果：

下面我们进入正文：

*
*
* 项目介绍 <https://blog.csdn.net/valada/article/details/81124218#>
* 下载 Tomcat <https://blog.csdn.net/valada/article/details/81124218#tomcat>
* 下载安装 MySQL <https://blog.csdn.net/valada/article/details/81124218#mysql>
* 下载安装数据库管理工具 <https://blog.csdn.net/valada/article/details/81124218#-1>
* 下载安装 IntelliJ IDEA
<https://blog.csdn.net/valada/article/details/81124218#intellijidea>
* 启动后台管理系统 <https://blog.csdn.net/valada/article/details/81124218#-2>
* 下载小程序编译器 <https://blog.csdn.net/valada/article/details/81124218#-3>
* 总结 <https://blog.csdn.net/valada/article/details/81124218#-4>
项目介绍

我找的开源项目是李鹏军开源的微信小程序商城，前后端开源。项目地址：platform-wechat-mall
<https://gitee.com/fuyang_lipengjun/platform>，感谢鹏哥的无私奉献，让我坐享其成。当然，他也开通了 QQ
技术交流群，大家可以进群一起讨论。也和他微信聊过，感觉是很有想法很 nice 的人。

关于这个项目的技术选型，好吧，大家还是看图吧，我也不知道几个，了解下就好。

接下来我们主要是做一些软件的安装，如果各位有装好的可以跳过对应的部分。

好了，不多说了，下面是具体的软件安装步骤：

下载 Tomcat

1.点击进入 tomcat 下载官网 <https://tomcat.apache.org/download-80.cgi>，下载 Tomcat，我这边使用
Tomcat 8.0。

2.解压 Tomcat 压缩包到指定文件，并运行 bin 目录下的 startup.bat 文件

这时候我们可以在浏览器输入 http://localhost:8080/，运行如下界面即启动成功：

下载安装 MySQL

数据库是后开开发必备，所以如果没有安装 MySQL 的朋友，就先花几分钟将 MySQL 安装一下。

1.下载安装 MySQL：官方下载地址 <https://www.mysql.com/>

2.下载打开安装，一直下一步即可，需要注意下面两个点，一是账号名密码，二是服务器名。

3.到 MySQL 的安装目录下，进行 MySQL 服务的启动

显示服务启动成功，表示你的 MySQL 已经安装成功，接下里我们安装可视化管理工具。

下载安装数据库管理工具

数据库管理工具有很多，我这里用的 Navicat 来管理数据库。如果你使用其他的亦可以，对项目无影响。具体可以参考：SQlite 数据库查看工具软件集
<https://www.sqlite.org/cvstrac/wiki?p=ManagementTools>。

Navicat 官方下载地址 <https://www.navicat.com.cn/what-is-navicat-data-modeler>
滑到底部，点击下载。这个只能试用 14 天。

安装运行成功后，我们点击连接上面启动成功的数据库，输入数据库密码。

最终在当前数据库下面有个 platform-shop 的包。及运行成功。导入数据库也可以在下一步启动后台管理系统时再进行。这样就能在当前下载的目录下找到
platform.sql 文件。否则可以到开源项目地址中去下载 platform.sql 文件。

下载安装 IntelliJ IDEA

很多开发的朋友应该电脑中都装有 ItelliJ IDEA，如果你装有 IDEA 可以直接跳过此步骤。

* 首先我们下载安装 IntelliJ IDEA 官网下载 <http://www.jetbrains.com/idea/>，安装到本地。IDEA
安装参考链接 <http://xinzhi.wenda.so.com/a/1524484981616786>
* 激活 IntelliJ IDEA。激活注册码获取地址
<https://blog.csdn.net/jilky123/article/details/80522125>
启动后台管理系统

1.将项目导入到 IDEA 中，Check out from Version Control 选择 git

2.输入项目仓库地址：https://gitee.com/fuyang_lipengjun/platform.git

3.配置 tomcat

a. 打开 Edit Configurations，点 + 号，选中 Tomcat Server 选中 Local

b. 配置之前下载的 Tomcat，点击 Configure 配置 Tomcat。如果是最新版本请在 On"Update"action 后选项选择
Update classes and resources，这样每次修改 js、html、java 都不需要重启。

c . 点 Fix 选择 platform_framework:war exploded 把项目部署到 tomcat

部署完成之后，我们点击运行按钮，运行整个项目：

等待运行完成。我们就可以看到效果了：

到这里，我们后台管理的编译运行就完成了，我们通过登录管理系统内部对商品进行发布修改：

现在我们本地的数据库已建立完成，现在我们可以开始建立前端界面对数据进行访问了。接下来我们开始编译运行小程序代码。

下载小程序编译器

当然，如果没有注册微信小程序的朋友请在微信开发平台注册
<https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN>
自己的微信小程序下载微信小程序开发工具
<https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html>
，下载，填写自己微信小程序 APP ID 及获取 AppSecert。

下面我们将请求链接设置为 http://localhost:8080/api，获取数据就是后台管理器修改的数据。这时候我们打开浏览器登陆
localhost:8080，进入综合管理平台，就可以修改自己想展示的数据了。

总结

其实对于后台一窍不通的我暂时还不知道如何通过自己域名访问，之前计划是这篇文章打算将上线的一块总结出来供大家一起学习，但是由于我的域名备案刚通过，时间有限。还需要学习更多后台及服务器方面的知识。下一步计划准备学习下后台开发，这段时间搞了个自己的博客管理系统。当然，我也发了关于学习博客管理系统的
Chat：零基础建立自己的博客网站 <https://gitbook.cn/gitchat/activity/5b4ac8325cbca1517850004b>
，有兴趣的朋友可以关注下。有兴趣的朋友也可以在微信公众号 aserbao 给我留言交流。

本文首发于GitChat，未经授权不得转载，转载需与GitChat联系。

阅读全文: http://gitbook.cn/gitchat/activity/5b3999075db6f06811eb14f8
<http://gitbook.cn/gitchat/activity/5b3999075db6f06811eb14f8?utm_source=csdn_blog>

一场场看太麻烦？成为 GitChat 会员，畅享 1000+ 场 Chat ！点击查看
<https://gitbook.cn/gitchat/vip?utm_source=vip_blog>

热门工具换一换