首页
小窝数据
邻居
关于
推荐
夜影Halo
夜影网盘
Search
1
高斯数学动画分享
315 阅读
2
免费的内网穿透服务-星河frp内网穿透
250 阅读
3
群晖surveillance接入监控摄像头实现无限制空间存储录像
216 阅读
4
群晖6.17安装mail plus server提示perl错误解决办法
185 阅读
5
Clash.Verge使用方法pc端
148 阅读
随笔心得
网络技术
资源分享
登录
Search
标签搜索
群晖
joe美化
joe主题
docker
css样式
儿童动画
Clash
图片
WordPress
wget
cad
图片api
自建邮箱
习题打印
图床插件
伪静态
erp
sitemap
seo
抖动特效
夜影
累计撰写
33
篇文章
累计收到
26
条评论
首页
栏目
随笔心得
网络技术
资源分享
页面
小窝数据
邻居
关于
推荐
夜影Halo
夜影网盘
为您搜索到
1
篇关于
微信小程序
的相关文章,期待您能满意而归!
2025-11-20
基于 Typecho 后端的微信小程序,主题使用的是joe
Typecho 博客微信小程序基于 Typecho 后端的微信小程序,支持文章展示、分类浏览、搜索、友链、关于等功能。项目结构miniprogram/ ├── pages/ # 页面目录 │ ├── splash/ # 启动页 │ ├── home/ # 首页(推荐+分类+瀑布流) │ ├── category/ # 分类页(左右结构) │ ├── links/ # 友链页 │ ├── about/ # 关于页 │ ├── search/ # 搜索页 │ ├── article/ # 文章详情页 │ ├── archive/ # 归档页 │ └── tags/ # 标签云页 ├── utils/ # 工具类 │ ├── request.js # HTTP 请求封装 │ ├── api.js # API 接口管理 │ └── util.js # 通用工具函数 ├── assets/ # 静态资源(需自行添加) │ ├── logo.png # 小程序 logo │ ├── avatar.png # 默认头像 │ └── icons/ # 底部导航图标 ├── app.js # 小程序入口 ├── app.json # 全局配置 ├── app.wxss # 全局样式 └── project.config.json # 项目配置小程序截图安装步骤1. 安装 Typecho REST API 插件方法一:使用 typecho-rest-api 插件# 进入 Typecho 插件目录 cd /path/to/your/typecho/usr/plugins # 下载后手动解压到 usr/plugins/Rest 目录启用插件:登录 Typecho 后台进入「控制台」→「插件」找到 Rest 插件,点击「启用」验证安装:访问 https://your-site/api/ 应该能看到 API 文档2. 配置小程序2.1 修改 app.js 配置打开 app.js,修改全局配置:globalData: { // API 基础地址(修改为你的域名) apiBase: 'https://your-site/api', // 网站地址 siteUrl: 'https://your-site', // 网站信息 siteInfo: { name: 'Yey Home', // 小程序名称 description: '个人技术博客', // 描述 avatar: '/assets/avatar.png', // 头像路径 // 联系方式(在关于页面显示) contacts: { qq: '你的QQ号', wechat: '你的微信号', github: '你的GitHub用户名', gitee: '你的Gitee用户名', blog: 'https://www.yeyhome.com', email: 'your@email.com' } } }2.2 修改 project.config.json打开 project.config.json,修改 appid:{ "appid": "你的小程序AppID" }2.3 添加静态资源需要在 assets/ 目录下添加以下文件:必需文件:logo.png - 启动页 logo(推荐 200x200px)avatar.png - 默认头像(推荐 160x160px)底部导航图标(assets/icons/ 目录):home.png / home-active.png - 首页图标category.png / category-active.png - 分类图标link.png / link-active.png - 友链图标about.png / about-active.png - 关于图标search.png / search-active.png - 搜索图标图标推荐尺寸:81x81px3. 配置服务器域名在微信小程序后台配置:登录 微信小程序后台进入「开发」→「开发管理」→「开发设置」找到「服务器域名」在「request 合法域名」中添加:https://www.yeyhome.com⚠️ 注意:小程序只支持 HTTPS 请求确保你的 Typecho 网站已启用 HTTPS域名需要备案4. 配置友情链接(可选)友链数据存储方式有两种:方式一:在 Typecho 创建独立页面在 Typecho 后台创建新页面设置页面缩略名(slug)为 links在内容中添加友链数据(JSON 格式):[ { "name": "博客名称", "url": "https://example.com", "description": "博客描述", "avatar": "https://example.com/avatar.png" } ]方式二:修改代码使用临时数据打开 pages/links/links.js,修改 getMockLinks() 函数中的数据。功能说明1. 启动页首次打开显示,包含 logo、名称、描述点击「进入小程序」后不再显示可清除小程序缓存重新显示2. 首页上部:轮播展示推荐文章中部:分类统计卡片下部:瀑布流文章列表支持下拉刷新、上拉加载更多3. 分类页左侧显示分类列表右侧显示选中分类的文章支持下拉刷新、滚动加载4. 友链页展示友情链接列表点击复制链接到剪贴板5. 关于页个人信息展示网站统计(文章数、分类数、标签数、访问量)文章归档、标签云入口联系方式(点击复制)6. 搜索页实时搜索文章搜索历史记录支持分页加载7. 文章详情富文本展示文章内容支持图片点击预览复制文章链接分享功能API 接口说明小程序使用的 API 接口(需确保 Typecho REST API 插件已安装):接口说明/api/posts获取文章列表/api/posts/{id}获取文章详情/api/categories获取分类列表/api/tags获取标签列表/api/pages/{slug}获取独立页面开发调试导入项目打开微信开发者工具选择「导入项目」项目目录选择 miniprogram 文件夹填写 AppID点击「导入」本地调试在微信开发者工具中:点击右上角「详情」勾选「不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书」即可在本地调试真机预览确保服务器域名已配置点击工具栏「预览」扫码在手机上预览常见问题Q1: 请求失败,提示域名不合法解决方案:确保在小程序后台配置了服务器域名域名必须是 HTTPS开发时可在开发者工具中勾选「不校验合法域名」Q2: API 返回 404解决方案:检查 Typecho REST API 插件是否已启用访问 你的域名/api/ 测试 API 是否可用检查 app.js 中的 apiBase 配置是否正确Q3: 图片不显示解决方案:确保 assets/ 目录下有相应的图片文件检查图片路径是否正确图片需要放在小程序目录内,或使用 HTTPS 外部链接Q4: 友链数据为空解决方案:检查是否在 Typecho 创建了 slug 为 links 的页面或使用 getMockLinks() 中的模拟数据确保友链数据格式正确Q5: 搜索功能不可用解决方案:确保 Typecho REST API 插件支持搜索功能检查 API 接口 /api/posts?search=关键词 是否可用如不支持,需要自行扩展 API 或使用其他搜索方案自定义开发修改主题色打开 app.wxss,修改以下变量:/* 主色调:紫色渐变 */ linear-gradient(135deg, #667eea 0%, #764ba2 100%) /* 可替换为其他颜色,例如蓝色: */ linear-gradient(135deg, #1890ff 0%, #0050b3 100%)添加新页面在 pages/ 目录下创建新页面文件夹在 app.json 的 pages 数组中添加页面路径如需底部导航,在 tabBar.list 中配置修改 API 数据格式如果你的 API 返回格式与代码中不同,需要修改 utils/api.js 中的数据处理逻辑。技术栈框架:微信小程序原生框架后端:Typecho + REST API 插件样式:WXSS(类 CSS)数据请求:wx.request许可证MIT License联系方式如有问题或建议,请通过以下方式联系:博客:https://www.yeyhome.com在小程序「关于」页面查看更多联系方式开发完成!祝您使用愉快! 🎉下载地址Github 百度网盘 蓝奏云
2025年11月20日
12 阅读
0 评论
0 点赞