膜拜会做小程序的大佬？看完你也可以(一)

微信小程序的应用数量超过了百万，而几乎所有头部互联网公司和独角兽企业都开发了他们对应的小程序，小程序的日活用户达到两亿多，而其中网络购物、餐饮服务占据了全网Top10榜单的一半，由此看出电商在小程序中应用广泛且用户喜爱高，而疫情的出现，也让一种新兴的电子商务成为行业创新发展的新蓝海，那就是社群电商，电商在小程序的应用如此热门，如果你也想搭建一套这样的小程序，那就一起来动手吧~

image.png

如果说你想着重头完整的手写代码，你首先需要熟悉前端语言JS+CSS+HTML5，后端语言php或java或node认选其一，而需要开发的功能包括商城、购物车、订单、微信支付、我的信息以及对应的管理后台、数据库设计等等。但是其实我们完全没有必要这样做，因为GitHub给我们提供了很多优秀的开源项目，我们只需要申请好小程序账号、部署服务、发布项目即可，源代码项目如：
①微信小程序微店：https://github.com/EastWorld/wechat-app-mall
②海风小店：https://github.com/iamdarcy/hioshop-miniprogram

今天给大家选的讲解例子是海风小店，因为它上手简单且完全开源免费，而①微店的框架过大，不便于新手学习，且他的后端要是真正商用是要收费的。

一、准备工作
1、申请小程序账号
申请小程序账号只需要按照官网文档说明操作即可，这里我就不展开说了，地址：https://developers.weixin.qq.com/miniprogram/introduction/
2、安装本地Git工具&拉取代码

在这里插入图片描述

新建文件夹hioshop，cd 到该文件夹下后，输入如下命令分别拉取小程序、后台前端、服务端代码，命令：
git pull https://github.com/iamdarcy/hioshop-miniprogram
git pull https://github.com/iamdarcy/hioshop-admin
git pull https://github.com/iamdarcy/hioshop-server

[图片上传失败...(image-c32241-1602750045171)]

3、创建数据库&修改配置
①数据库使用的是mysql，推荐管理工具使用Navicat。
安装教程参考：https://blog.csdn.net/bobo553443/article/details/81383194
②新建数据库，名称可为：hiolabs（注意数据库字符编码为utf8mb4），并导入项目根目录下的hioshop.sql，初始化好原始数据
③进入hioshop-server文件夹，更改数据库配置 src/common/config/database.js文件，
修改数据库名为刚刚建立的数据库名称，填写自己本地数据库地址和账号密码

在这里插入图片描述

④填写微信登录和微信支付配置和其他设置，打开 src/common/config/config.js文件，如果微信支付、oss服务什么的你都还没申请，都可以先不填写，但是微信的appid 和secret 是必填的

在这里插入图片描述

微信的appid 和secret 在微信小程序官网登录以后，在控制台页面的开发->开发设置->开发者ID中

在这里插入图片描述

二、启动项目
1、启动服务端
首先我们需要部署并启动服务端，这样我们的小程序和后端管理程序才能连接到本地服务器，使用本地的数据库。
打开终端， cd进入hioshop-server文件夹，输入命令：npm start
此时控制台打印正常的绿色sql日志信息，说明服务端正确启动

在这里插入图片描述

2、调试小程序
①下载微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
②在工具中导入小程序项目，填写任意项目名称，目录中选择从git上拉取下来的hioshop-miniprogram文件夹，并填写自己的App，点击导入

在这里插入图片描述

③导入后等待约1分钟，加载完毕

在这里插入图片描述

小程序的大体框架和样式如下图展示，非常的干净舒服且功能齐全。

在这里插入图片描述

④修改数据源：此时小程序的数据源还不是你本地的，我们打开hioshop-miniprogram项目下的config文件夹，查看api.js文件文件：
默认的数据源地址是：’https://www.hiolabs.com/api/’
修改为本地的数据源：'http://localhost:8360/api/'
⑤保存配置文件后，我们直接回到小程序开发工具里面，点击’我的‘一栏，并使用微信登录验证，查看数据库有登录信息表示调试成功

在这里插入图片描述

WTestin测开大喵