typecho原生微信小程序
如默
撰写于 2023年 07月 18 日

说明

一直想把网站做成小程序,github上typecho的小程序也都是远古版本,今年官方也升级到了typecho 1.2.1版本,目前还没有可用的小程序,我自己抽空写了一个,开源给大家使用。

先附上开源地址:Gitee国内 Github

其中,Restful后端接口插件,mp为小程序源码,img为介绍图片

小白教程

鉴于很多人询问如何使用,这里先附上一个小白教程:

1,下载源码,将Restful文件夹内容放在typecho博客程序的plugin文件夹下,然后进入博客后台,启用插件
2,进入微信小程序后台,点击左侧菜单开发管理,点击顶部菜单开发设置,服务器域名这里添加request域名为https://xxx,这个域名就是你博客程序的域名
3,用微信开发者工具,新建一个微信小程序,目录选择源码的mp目录,修改代码根目录app.js里的baseURL为你自己的博客地址,然后在当前目录执行npm install,点击工具,构建npm即可
4,预览没问题即可上传代码,然后在微信后台提交审核,等待通过就可以访问了。

:如果你启动插件修改了插件的后台请求地址,那么baseURL就写你修改后的地址

环境

本站环境如下:

# PHP版本:8.1.17
# 网站服务器:nginx/1.22.1
# 数据库:Pdo_Mysql[Version:5.7.42-log]
# Typecho版本:1.2.1

微信小程序没有使用uni-app等框架,采用原生小程序和Vant前端框架,本小程序秉承简洁原则,大方美观

小程序二维码见本站右侧顶部,或扫一扫下图:

如默星空小程序

如默星空小程序

主要功能及优点

  • 首页文章列表、文章搜索、文章分类浏览、文章归档时间轴、关于
  • 浏览文章评论、分享页面、复制联系信息
  • 文章代码高亮、行号、语言显示
  • 文章链接自动复制
  • 文章表格横向滚动
  • 一键返回顶部
  • 接口请求时间限制,防止崩溃
  • 使用缓存,提升加载速度

预览图

首页

首页

分类

分类

归档

归档

关于

关于

代码高亮

代码高亮

评论

评论

后端

代码中typecho-plugin-Restful文件夹为接口插件,修改名称为Restful,上传到插件目录,启用即可。

默认后端请求地址为https://xxx.com/api/,可自行在插件中设置,此插件源码地址为:typecho-plugin-Restful

前端

小程序代码,appjs里修改后端接口地址:

// app.js
App({
  onLaunch() {
    // 获取当前年份
    const date = new Date();
    const currentYear = date.getFullYear();
    this.globalData.currentYear = currentYear;
  },

  globalData: {
    baseURL: "https://xxx",
    currentYear: null,
  },
});

这个接口地址需要在微信小程序开发后台添加一下,然后执行npm install,然后构建npm即可

已知问题

  • 评论功能暂不支持,目前也不打算支持,因为不简洁而且不容易过审

计划更新

  1. 增加黑暗模式(功能不复杂,开发版已支持,就是实在懒得适配css,很烦)
  2. 自己写接口,就当练习了
  3. 未完待续……

小程序审核

审核之前,后台最好备份一下数据,然后留两三篇技术文章,不要抄袭,不要发资讯之类的,一般都没问题,评论最好不要有。

本站小程序从提交审核到通过,14分钟,很快,如下图:

微信小程序审核

微信小程序审核

结语

这个微信小程序的本意就是方便在移动端浏览文章,所以阅读是最重要的功能,其余都是点缀,不希望太复杂,虽然网站是响应式布局,但很少有人用手机访问。

BUG反馈请提交issue,留言请在本文留言,欢迎提出意见,开源程序,随缘更新。

typecho原生微信小程序

温馨提示:

本文最后更新于2023年12月29日,已超过115天没有更新,若内容或图片失效,请留言反馈。

说明

一直想把网站做成小程序,github上typecho的小程序也都是远古版本,今年官方也升级到了typecho 1.2.1版本,目前还没有可用的小程序,我自己抽空写了一个,开源给大家使用。

先附上开源地址:Gitee国内 Github

其中,Restful后端接口插件,mp为小程序源码,img为介绍图片

小白教程

鉴于很多人询问如何使用,这里先附上一个小白教程:

1,下载源码,将Restful文件夹内容放在typecho博客程序的plugin文件夹下,然后进入博客后台,启用插件
2,进入微信小程序后台,点击左侧菜单开发管理,点击顶部菜单开发设置,服务器域名这里添加request域名为https://xxx,这个域名就是你博客程序的域名
3,用微信开发者工具,新建一个微信小程序,目录选择源码的mp目录,修改代码根目录app.js里的baseURL为你自己的博客地址,然后在当前目录执行npm install,点击工具,构建npm即可
4,预览没问题即可上传代码,然后在微信后台提交审核,等待通过就可以访问了。

:如果你启动插件修改了插件的后台请求地址,那么baseURL就写你修改后的地址

环境

本站环境如下:

# PHP版本:8.1.17
# 网站服务器:nginx/1.22.1
# 数据库:Pdo_Mysql[Version:5.7.42-log]
# Typecho版本:1.2.1

微信小程序没有使用uni-app等框架,采用原生小程序和Vant前端框架,本小程序秉承简洁原则,大方美观

小程序二维码见本站右侧顶部,或扫一扫下图:

如默星空小程序

如默星空小程序

主要功能及优点

  • 首页文章列表、文章搜索、文章分类浏览、文章归档时间轴、关于
  • 浏览文章评论、分享页面、复制联系信息
  • 文章代码高亮、行号、语言显示
  • 文章链接自动复制
  • 文章表格横向滚动
  • 一键返回顶部
  • 接口请求时间限制,防止崩溃
  • 使用缓存,提升加载速度

预览图

首页

首页

分类

分类

归档

归档

关于

关于

代码高亮

代码高亮

评论

评论

后端

代码中typecho-plugin-Restful文件夹为接口插件,修改名称为Restful,上传到插件目录,启用即可。

默认后端请求地址为https://xxx.com/api/,可自行在插件中设置,此插件源码地址为:typecho-plugin-Restful

前端

小程序代码,appjs里修改后端接口地址:

// app.js
App({
  onLaunch() {
    // 获取当前年份
    const date = new Date();
    const currentYear = date.getFullYear();
    this.globalData.currentYear = currentYear;
  },

  globalData: {
    baseURL: "https://xxx",
    currentYear: null,
  },
});

这个接口地址需要在微信小程序开发后台添加一下,然后执行npm install,然后构建npm即可

已知问题

  • 评论功能暂不支持,目前也不打算支持,因为不简洁而且不容易过审

计划更新

  1. 增加黑暗模式(功能不复杂,开发版已支持,就是实在懒得适配css,很烦)
  2. 自己写接口,就当练习了
  3. 未完待续……

小程序审核

审核之前,后台最好备份一下数据,然后留两三篇技术文章,不要抄袭,不要发资讯之类的,一般都没问题,评论最好不要有。

本站小程序从提交审核到通过,14分钟,很快,如下图:

微信小程序审核

微信小程序审核

结语

这个微信小程序的本意就是方便在移动端浏览文章,所以阅读是最重要的功能,其余都是点缀,不希望太复杂,虽然网站是响应式布局,但很少有人用手机访问。

BUG反馈请提交issue,留言请在本文留言,欢迎提出意见,开源程序,随缘更新。


赞 (4)

猜您想看

评论区(6条评论)

我要评论

Vaptcha 初始化中...

w45sen
LV1
  

从hub下载的1.2.1版本,扁译后可以显示所有文账列表和平论,但是点进文账看不到文章内容,但是能看到平论。文账内容可以搜锁到,调式器只有at.alicdn.com缓存的字体错误,不知道那里有问提。请问如何解绝呢?

如默
博主
   w45sen

首先,检查一下你的文章详情接口是否有效,用postman等工具测试一下,然后检查小程序代码是否修改接口数据等,具体可以通过QQ联系,或者邮箱。建议邮箱

lu
LV1
  

谢谢博主,费心了.

lu
LV1
  

感谢博主,只是本人小白不懂,干着急,

如默
博主
   lu

没事,慢慢来,不需要懂什么技术,可以随时问

如默
博主
   lu

更新了小白教程,可以照着这个操作就可以了