[心得体会] 个人博客APP上线记录
在个人博客网站搭建完成后,为进一步提升使用体验,可考虑开发一款配套个人APP。具体实施分两步, 后端接口搭建和用HBuilderX开发简单APP。
一、后端接口搭建:
需在Typecho博客服务器部署RestAPI插件,提供标准化的数据接口,支撑APP的文章、分类、标签等数据的获取与展示。
1. 插件创建与权限配置:
cd /var/www/html/usr/plugins/#the default plugin directory of Typechomkdir RestAPIcd RestAPIsudo nano Plugin.php#the API logic implementationsudo chown -R www-data:www-data /var/www/html/usr/plugins/RestAPI#Web Server owner is www-datasudo chmod -R 755 /var/www/html/usr/plugins/RestAPI
2. 插件接口校验
2.1 插件启用
登录Typecho博客后台,依次进入「控制台」→「插件管理」,在插件列表中找到已部署的“RestAPI”插件,启用。
2.2 接口可用性测试(替换YourDomain为个人博客实际域名):
– 文章列表接口:https://blog.YourDomain.com/api/articles
– 分类列表接口:https://blog.YourDomain.com/api/categories
– 标签列表接口:https://blog.YourDomain.com/api/tags
3. Plugin.php示例
Plugin.php为RestAPI插件的核心文件,实现了接口路由、数据查询等核心功能,以下仅为示例,非原文。
<?phpnamespace TypechoPlugin\RestAPI;use Typecho\Plugin\PluginInterface;use Typecho\Widget\Helper\Form;if(!defined('__TYPECHO_ROOT_DIR__')) {exit;}classPluginimplementsPluginInterface{public static function activate(){\Typecho\Plugin::factory('Widget_Archive')->handleInit = array(__CLASS__, 'handleInit');}public static function deactivate(){}public static function config(Form $form){}public static function handleInit($archive){$pathInfo = $archive->request->getPathInfo();if(preg_match('/^\/api\//', $pathInfo)) {self::processAPIRequest($pathInfo);exit;}}private static function processAPIRequest($pathInfo){$db = \Typecho\Db::get();$request = \Typecho\Request::getInstance();#以下略,代码可以让AI完成}}
二、用HBuilderX开发简单APP
1.下载编辑器 HBuilderX, 直接解压使用,不需要安装。
https://www.dcloud.io/hbuilderx.html
2. 新建项目
2.1 打开 HBuilderX, 文件 → 新建 → 项目
2.2 选择:uni-app → 默认模板 → Vue3, 项目名称:YourBlogName
3. 编写首页(pages/index/index.vue)
这段代码请求你的Rest API接口并展示列表,可以网上找示例。
4. 配置 APP
4.1 manifest.json:修改应用名称等。
4.2 替换 logo.png为自己的logo.
5. 云打包安卓 APK
5.1 打包前可进行简单Chrome测试,运行代码,通过本地地址(如http://localhost:5173),验证页面渲染正常、接口请求成功。
5.2 右键项目 → 发行 → 原生 App – 云打包
5.3 等待 1–3 分钟, 自动下载到
YourBlogName/unpackage/release/xxx.apk
6. 把apk文件上传传到微信或QQ等, 安卓手机安装App。
===========
封面介绍:大连的海

夜雨聆风