微信小程序前端及后台部署搭建详细教程

总结分享下微信商城小程序搭建的详细教程。相信无论是新手还是小白，只要按照教程来操作，也能轻松制作出一个属于自己的全套的微信商城小程序。本期内容较多，为防迷路，感兴趣的建议收藏。

准备条件

一、版权信息

本套商城小程序源码为官方开源版本，你可免费商用，无需担心版权风险，所以可以放心大胆地进行开发。

二、硬件设施

搭建小程序需要使用微信开发者工具，你只需要准备一台电脑即可，对电脑的配置没有特殊要求。

三、基础费用

1. 你需要购买一台服务器，价格大约在80元左右。
2. 注册一个域名，约20元。
3. 如果需要开通线上支付功能，需要完成小程序认证，个体工商户需要30元，企业则需要300元。

搭建步骤

前期准备

1. 服务器购买

• 进入腾讯云官网（阿里云亦可）。
• 完成免费注册并进行实名认证。
• 进入活动专场，以优惠价格选购服务器。推荐选择“轻量应用服务器”，配置如2核2G3M或2核2G4M，价格一般在100元以内。
• 注意选择“时长”为“自购买1年内有效”，然后点击购买。
• 在配置选择页面，“地域”随便选择一个，“镜像”选择“CentOS Stream 8”，然后点击“立即购买”。

2. 服务器配置

• 在腾讯云官网首页右上角进入“控制台”，找到服务器点击进入。
• 放行端口，需要开放3306（数据库端口）和8888（宝塔面板端口）。
• 重置服务器密码，要求包含大写、小写、数字或符号中的至少三项，务必保存好。
  
  

3. 域名注册及备案

• 在控制台下方搜索“域名注册”，进入域名管理后台。
• 创建域名信息模板，填写相关信息后提交审核。
• 注册一个域名，格式如XXXX.YY，推荐购买.cn类型的域名。
• 域名注册后需要备案，登录腾讯云官网，找到备案入口，按照指引填写相关信息提交审核。
• 审核时间一般为2-3天，期间可以联系我获取一个已备案的域名进行练习。

4. 宝塔面板安装

• 使用浏览器搜索“宝塔面板”，进入官网点击“立即免费安装”。
• 选择Linux面板在线安装，按照提示完成安装过程。
• 安装完成后，获得宝塔面板的网址、账号和密码，登录宝塔面板，开始自己的搭建工作。
  
  

5. 小程序注册、备案及认证

• 浏览器搜索“微信公众平台”，注册一个小程序账号。

• 填写小程序信息，包括名称、头像和介绍。

• 提交注册信息后，进行小程序备案。
  

• 小程序认证后才能开通线上支付功能，认证费用根据主体类型而定。

6. 微信商户支付账号注册及使用

• 搜索“微信商户支付平台”，点击接入微信支付，选择注册微信商户支付号。
• 填写姓名、营业执照等信息后提交。
• 注册完成后，开通3个支付产品。
• 设置APIv3秘钥和申请新证书，以便对接微信支付。
  
  
  
  
  
  在证书工具中填写商户号和企业名称，获得请求串，将请求串复制粘贴到网页中，获得证书串，将证书串复制粘贴到证书工具中，提示证书申请成功，生成了一个zip压缩文件，打开是3个证书文件。

但其实很简单，就是一个网页和工具相互验证密码并匹配的过程。

这三个证书和上面的32位秘钥，就是我们对接微信支付的关键，在小程序后台填写上传即可完成对接。

后端搭建

1. 域名解析

• 在腾讯云官网首页右上角进入“控制台”，点击“域名注册”进入面板。
• 找到“我的域名”，点击“解析”，添加二级域名。
  

2. 新建站点

• 登录宝塔面板，在左侧导航找到“软件商店”，安装数据库5.6和PHP7.4版本。
• 同时在PHP中安装拓展fileinfo redis。
• 在宝塔面板点击“网站”，选择“添加站点”，填写解析的二级域名。
  

3. 上传后端源码

• 点击网站根目录，删除默认文件。
• 在根目录下点击“上传”，选择后端源码文件，上传后解压。
  

4. 设置运行目录

• 在左边导航点击“网站”，再点击二级域名。
• 点击“网站目录”，将“运行目录”设置为“/public”，然后保存。
  

5. 申请SSL证书

• 在宝塔面板左侧点击“网站”，再点击二级域名。
• 点击“SSL”，选择“Let’ Encrypt”，申请成功后勾选“强制HTTPS”，然后保存。
  

6. 后台程序安装

• 获取数据库名、用户名和密码后，开始后台安装。
• 在后台安装页面填写数据库信息，点击“开始安装”。
• 安装成功后，即可进入后台管理界面，进行店铺装修、商品上架等设置。
  

后台配置

1. 合法域名设置

• 登录微信公众平台，在左侧导航栏点击“开发管理”。
• 找到服务器域名，填写为你自己的二级域名。

2. 小程序Appid和密钥

• 在“微信公众平台”左侧导航栏点击“开发管理”，可以看到小程序的Appid。
• 点击“生成”可以生成小程序密钥。
• 登录商城小程序管理后台，点击“小程序设置”，将获取的小程序Appid和密钥复制粘贴在此。

前端搭建

1. 下载HBuilderX

• 在浏览器搜索“Hbuilderx”，下载并安装。
• 打开Hbuilderx工具。

2. 导入前端源码

• 在HBuilderX顶部菜单栏点击“文件”-“导入”-“从本地目录导入”，导入商城小程序前端源码文件。

3. 修改域名网址

• 打开前端源码中的config.js文件，找到apiUrl项，填入你的二级域名。

4. 获取应用标识

• 点击前端源码中的manifest.json文件，选择基础配置，重新获取uni-app应用标识。

5. 填写小程序Appid

• 在manifest.json文件中选择微信小程序配置，修改为你自己的小程序Appid。

6. 下载微信开发者工具

• 在浏览器搜索“微信开发者工具”，选择稳定版进行下载安装。
• 安装完成后，微信扫码登录。

7. 打包发行微信小程序

• 在HBuilderX工具顶部菜单栏点击“发行”-“发行小程序-微信”，等待一段时间后，会自动跳转打开微信开发者工具。

8. 上传源码

• 微信开发者工具打开后，点击“编译”，如果左侧能够正常显示小程序页面，说明搭建没有问题，点击“上传”。

审核发布

1. 设置小程序类目

• 登录微信公众平台，在左侧导航栏找到“设置”，选择小程序类目。

2. 提交审核

• 在微信公众平台左侧导航栏找到“版本管理”，点击“提交审核”。

3. 发布小程序

• 审核通过后，登录微信公众平台，在版本管理中找到审核版本，点击发布。

写在最后

到此，恭喜你拥有一个属于自己的微信商城小程序，也掌握了一个新的赚钱技能。今后，你可以通过宝塔面板尝试搭建更多不同类型的小程序或网站，打开一扇有趣又有意义的大门。

如果你在搭建过程中遇到任何问题，欢迎随时与我进行交流，一起学习进步！