灵沐微信小程序丨搭建保姆级教程-南盟笔记

Nan Ge2024-07-162024-09-04

小程序效果预览图

搭建要求

本文以腾讯云服务器及域名为演示,要求“服务器”和“域名”经过备案后才可搭建,必须 “备案” 是硬性要求,其次需注册一个微信小程序,服务器要求 CentOS 8 系统, 域名没有要求~

1、简单的说一下,如何备案 | 服务器和域名都在腾讯云购买 , 那么可直接在腾讯云后台进行备案 , 备案前先搭建自己(网站名称与备案网站名称)需要一致 , 然后再填写备案所需的相关资料, 首次先通过腾讯云人工简单审核 , 然后腾讯云才会提交到管局备案, 这中间过程可能需要1-7天左右, 每个地区审核时间不同, 关于备案流程以及如何填写资料, 这里不做详细介绍,请自行搜索相关信息的查询.

腾讯云备案地址: 腾讯云备案_个人域名备案_网站备案_企业备案-腾讯云 (tencent.com)

2、微信小程序自行去注册一个即可 !

注册流程: 小程序注册流程 - 腾讯客服 (qq.com)

腾讯云服务器设置

防火墙规则：1337（小程序端口）3306 （MySQL数据库端口）

安装宝塔面板 Centos 安装脚本

1	yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

宝塔安装完成之后，安装如下图所有的配置工具～（以Nginx 1.22.1 为列，Nginx就是软件名称，1.22.1就是版本号，对应安装即可！）

宝塔面板设置

Node 版本：20.15.0

操作流程：显示所有版本—中国镜像—更新列表—下载v20.15.0—命令行版本(下图中官方源很慢)

创建MySQL数据库

操作流程：数据库—添加数据库—数据库名称（lingmu）—确定

提示：数据库名称可以用其他名称，但是在下边安装小程序后台的时候需要添加数据名称，可别输错了！

宝塔安全端口放行设置：1337（小程序端口）3306 （MySQL数据库端口）

操作流程：安全—添加端口规则—端口（1337、3306）—确定

安装小程序后台 Strapi

操作流程：文件—新建文件夹（命名：lingmu）—终端—输入以下代码

全局安装 yarn 模块

1	npm i -g yarn

安装Strapi 到 my-project 文件夹中

1	yarn create strapi-app my-project

提示：这段代码会出现几个选择项，键盘的上下键选择即可！

Custom (manual settings)
Skip
JavaScript
Postgre
N

进入到my-project安装依赖

1	yarn install

下载小程序源码

小程序源码：点击此处下载

关于小程序的后台功能介绍请到看官方文档即可：直达地址

～小程序新版本，请到官方文档下载～

小程序源码中的接口和资源俩个文件“（server.js）、（src.zip）zip文件上传后需要解压“，上传到后台 my-project 文件夹中即可

my-project目录下打开终端先执行编译

1	npm run build

my-project目录下打开终端开发者模式运行

1	npm run develop

创建Node 项目

创建网络后台并添加域名和SSL证书

创建流程：网络—Node项目—添加Node项目—项目目录（/www/wwwroot/lingmu/my-project）—项目名称（myproject）—启动项选择（start:strapi start）—项目端口（1337）—域名绑定（需已备案的域名）—确定

配置SSL安全证书

操作流程：设置—SSL-Let’s Encrypt（申请免费证书）—强制https—保存

进入小程序网站后台，添加的域名就是网站后台地址

配置网站后台选项（首次进入需要注册账号，右上角有切换为中文标识，密码需开头大写）

操作流程：设置—用户及权限插件（角色）—Publi

演示：以 Category 为列，点击下拉栏之后会出现几个选项，全选即可！
Category (全选)
Dos (全选)
WxSet (全选)
Doc (全选)
Wall (全选)
Doing (全选)

添加丨Strapi 后台丨备案号,此段文字可忽略

# 宝塔面板后台路径,添加备案代码之后运行编译
 /my-project/node_modules/@strapi/strapi/lib/middlewares/public/index.html
# 编译之后如果不显示,重启云服务器即可解决~
npm run build


//备案代码

<div style="background-image:url(xxxxxx)position: fixed; left: 0;bottom: 40px;text-align: center;width: 100%;">
      <a href="https://beian.miit.gov.cn/">xxxxxxxx-1</a>
</div>

获取微信小程序的 ID （自行去注册小程序）

获取流程：开发者管理即可看到小程序ID，复制并保存备用

配置服务器域名

按照下列域名配置xxxx 代表你的域名，比如我的域名是www.baidu.com（https://www.baidu.com）

流程：开发管理—修改—微信扫码授权—修改完成保存即可

`服务器配置`	`域名`
request合法域名	https://www.xxxxx
socket合法域名	wss://www..xxxxx
uploadFile合法域名	https://www.xxxxxx
downloadFile合法域名	https://
udp合法域名	udp://www.xxxxxx