乐于分享
好东西不私藏

[心得体会] 个人博客APP上线记录

[心得体会] 个人博客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。

===========

封面介绍:大连的海