基于 PbootCMS+UniApp 搭建企业展示小程序 全套配置教程

本文由广东鲸弘科技有限公司提供惠州小程序开发 / 网站建设专业分享。

郑重说明：本系统采用的是Pbootcms开源系统的api接口开发的小程序前端，请尊重原作者版权，本站www.vi23.com  是小程序插件的唯一教程网站，其它均为盗版。

一、项目概述

本项目基于 PbootCMS（PHP） 作为后端 API 服务，uni-app（Vue3 + Pinia） 作为前端框架，开发了一套完整的微信小程序。实现了用户登录、个人资料管理、内容展示、留言互动等功能，并针对 PbootCMS 的 API 特性进行了深度适配。

二、技术栈

三、核心功能实现

1. 微信登录（静默重试 + 用户信息获取）

• 使用 uni.login 获取 code，传递给后端 api.php/member/wxlogin。

• 后端通过 jscode2session 获取 openid，自动创建/更新用户。

• 静默重试机制：当首次登录失败（如 code 过期、网络抖动）时，自动重试 1 次，提升成功率。

• 用户信息获取：通过 <button open-type="chooseAvatar"> 选择微信头像，通过 <input type="nickname" /> 获取微信昵称（符合微信最新隐私规范）。

• 支持头像上传到服务器（带 API 强制认证签名）。

2. 手机号绑定（微信原生授权）

• 使用 <button open-type="getPhoneNumber"> 获取手机号 code。

• 后端调用微信 getuserphonenumber 接口解密手机号，并存入 ay_member.usermobile。

• 支持重复绑定（更换手机号），后端通过 updateMobile 方法实现。

3. 个人中心页面

• 展示用户头像、昵称、脱敏手机号。

• 支持修改昵称（自定义弹窗）、更换头像（调用 uni.chooseImage 后上传）。

• 退出登录（清除 Pinia store 和本地存储，跳转登录页）。

• 使用 Pinia 管理登录状态，通过 uni.setStorageSync 持久化 token 和用户信息。

4. 文章/产品内容展示

• 封装 PbootCMS 常用 API：getArticleList、getArticleDetail、getSortInfo、getSlide 等。

• 支持列表分页、排序、子栏目切换。

• 详情页使用 v-html 渲染富文本，并自动处理图片自适应。

5. API 通信层封装（request.js）

• 统一签名认证：每次请求自动添加 appid、timestamp、signature（双重 MD5），满足 PbootCMS API 强制认证要求。

• PATHINFO 路由支持：URL 格式为 /api.php/模块/方法，通过 Nginx PATHINFO 重写实现。

• 文件上传兼容：uni.uploadFile 必须将 appid、timestamp、signature 放入 formData 中，否则 API 认证失败。

• 错误处理：网络超时自动重试（仅登录）；非 code===1 响应统一进入 catch 分支。

6. 页面返回原位置（redirect 参数）

• 在需要登录的页面，跳转登录页时传递 redirect 参数（当前页面路径及参数）。

• 登录/绑定成功后，通过 uni.reLaunch 或 uni.navigateTo 跳回原页面。

• 个人中心进入绑定页同样支持返回逻辑。

7. Redis 缓存优化

• 在 api.php 入口集成 Redis 缓存，缓存 API 成功响应（code===1），有效期 7 天。

• 缓存 key 根据请求 URI + 查询参数生成，并排除了 appid、timestamp、signature 等动态参数。

• 注意：仅缓存成功响应，避免缓存错误结果；更新内容后需手动清空 Redis 或等待自动过期。

四、关键开发要点

1. PbootCMS 后端适配

• 自定义会员接口：在 apps/api/controller/MemberController.php 中实现 wxlogin、bindPhone、update 等方法。

• 数据库字段：ay_member 表需包含 openid、usermobile、headpic、nickname、ucode 等字段（后台管理依赖 ucode、username 等）。

• token 缓存：登录成功后生成 token，存入 /runtime/token/ 目录，用于后续身份验证。

• PATHINFO 支持：确保 Nginx 配置了 location ~ .php$ 的 fastcgi_param PATH_INFO $path_info; 和 try_files 规则。

2. 前端 uni-app 适配

• Pinia 持久化：userStore 的 setToken 和 setUserInfo 自动同步到 uni.setStorageSync，initLogin 在 App.vue 的 onLaunch 中调用。

• 头像上传签名：调用 generateSignature() 生成时间戳和签名，放入 formData 中。

• 子分类导航：通过 getSubSortList 获取子栏目，实现横向滚动菜单。

• 日期格式兼容 iOS：使用 formatDate 将 - 替换为 /，解决 iOS 的 new Date() 解析问题。

3. 常见问题及解决方案

4. 安全性考虑

• API 签名机制防止篡改和重放攻击。

• 后端对用户输入进行 trim() 和 htmlspecialchars 转义。

• token 使用 MD5(openid + time + uniqid) 生成，并存储在独立缓存目录，有效期 24 小时。

• 文件上传限制扩展名，防止恶意脚本上传。

-------------------------教程开始-------------------------

一、获取小程序配套的前后端程序源码

1、本小程序源码唯一出处为本公司的淘宝店及自营站点，目前仅支持淘宝购买，并由掌柜的发送下载源码包。其它渠道均为盗版售卖，我们的源码带有识别码功能，识别到非本站点出处将无法正常运行。

2、获取到源码后操作解压，你会看到：前端，后端 两个文件夹。

3、同时申明：本小程序基于PbootCMS开源，我们小程序前端对应也都是开源，无任何加密和恶意监控，代码干净无报错。

二、下载工具

1、在官网下载HBuilder X  和 微信开发者工具

https://hx.dcloud.net.cn/Tutorial/install/windows

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

如果不知道怎么安装的可以找下教程或者问下AI。

三、覆盖后端文件

后端文件你会看到：

api.php

/apps/api/controller/MemberController.php  

 /apps/api/controller/ListController.php

/apps/api/model/MemberModel.php

/apps/api/model/CmsModel.php

/apps/admin/view/default/member/member.html

以上为小程序需要完整文件，对应覆盖即可。如果你的程序没有特殊修改过，在根目录无脑直接覆盖替换即可。

四、数据库修改

目前以MySQL为例：
打开你的phpmyadmin，进入你的数据库，找到”SQL“按钮

把以下代码复制进去并执行

-- 添加 openid 字段（如果不存在）
ALTER TABLE `ay_member` ADD COLUMN `openid` VARCHAR(100) DEFAULT '' COMMENT '微信小程序openid' AFTER `wxid`;
-- 为 openid 添加索引（提高查询效率）
ALTER TABLE `ay_member` ADD INDEX `idx_openid` (`openid`);

SQlite的.DB数据库请查看另外一篇教程：《Pbootcms系统开发微信小程序之修改SQlite数据库》

注意：如果你不需要微信登录，这段可以忽略

五、导入前端程序

1、打开HBuilder X开发工具

2、左上角：项目，导入项目，选择前端文件夹导入即可。

3、安装：md5库，在uniapp的终端标签卡里面执行：

npm install js-md5 --save

这段是在有报错的时候执行，如果没有报错可以不用执行。

4、如下图左边，你会看到完整的目录文件夹

六、修改配置文件

1、打开utils/request.js文件

export const API_DOMAINweb = 'https://你的域名.com'
export const API_DOMAIN = 'https://你的域名.com/api.php'
export const APPID = '后台设置'
const APPSECRET = '后台设置'

把以上换成你的域名和你在后台WebAPI设置APPID、APPSECRET。这里记得后台的WebAPI一定要开启API状态。还有就是 官网的域名授权。不然报404

2、在根目录找到manifest.json ，在基础配置中找到uniapp应用标识，点击重新获取 按钮。

3、再找到：微信小程序配置 ，把你的小程序appID填写进去。

七、首页模块配置说明

1、skeleton是加载骨架屏，无需理会。

2、以下示例代码全部都是功能模块，它们之间的位置可以随意更换，顺序可以随便放，也可以重复复制。非常灵活。

<IndexBanner :gid="1" :num="2" />  //轮播图
<HeaderMenu />  //导航
<IndexProduct :cid="5" title="热门产品" :limit="8" :isrecommend="1" />  //左右滚动一排一列
<IndexAbout :scode="1" title="公司简介" :showTitle="false" />  // 图文介绍
<IndexadList :cid="8" title="广告"  :limit="3" :showTitle="false"/>  //单张图片
<IndexcategoryList :scode="5" :activeId="6" />  // 可以左右滚动的子栏目
<IndexProduct2 :cid="5" title="最新产品" :limit="4" :showTitle="false" />  //一排两列布局
<IndexcardList :cid="8" title="服务案例"  :limit="3" :showTitle="true" :showMeta="true"/> //一行一列布局
<IndexNewlist :cid="2" title="新闻资讯" :limit="4" /> //一排一列，左边图片右边文字布局
<FloatNav />  //底部导航
<Footer />  // 版权信息

3、标签说明

cid：栏目ID

gid：轮播图分组ID

scode：文章ID

title：模块标题名称

limit：调用数量

showtitle:是否显示板块标题，falase关闭，true开启

isrecommend：是否显示推荐的信息，1为推荐，0为不推荐，不写isrecommend标签为不限制。

4、打开pages/user/user文件，找到” url: `/pages/page/page?scode=1`“，把这个1改成你的公司简介的栏目ID。

5、在mp.weixin.qq.com登录你的小程序，在开发配置里面把你的域名配置进去，这里不会的看下其它教程。

八、修改主题颜色

1、在根目录找到uni.scss样式文件，把当前蓝色颜色值 #0052d9 换成你要的颜色即可，

九、上传小程序

1、在uniapp软件找到运行，选择运行到微信开发者工具。

2、在微信开发者小程序工具中顶部导航找到：上传 按钮，完成小程序的上传。