TinyTale-halo小程序Win部署教程
默认分类

TinyTale-halo小程序Win部署教程

前言 此文章大部分Ctrl+C作者的博客和使用文档，仅仅对于Windows操作系统和其他内容的一些补充。不是搞开发的，有些报错原因可能解释不了，纯纯是因为多次编译试错而来，所以此文档适合零基础的人。 原作者地址 安装文档：https://www.jiewen.run/docs/TinyTale/st

前言

  • 此文章大部分Ctrl+C作者的博客和使用文档，仅仅对于Windows操作系统和其他内容的一些补充。不是搞开发的，有些报错原因可能解释不了，纯纯是因为多次编译试错而来，所以此文档适合零基础的人。

原作者地址

  • 安装文档：https://www.jiewen.run/docs/TinyTale/start/install

  • 获取openid：https://www.jiewen.run/docs/TinyTale/basic/get-openid

  • 插件授权：https://www.jiewen.run/docs/TinyTale/basic/Plugin-License

简介

TinyTale 是一款基于 Halo博客系统的微信小程序，可以展示博客文章、图库、瞬间等内容。简洁、美观、易用，是你的博客的最佳搭档。Halo小程序。

先决条件

注册微信小程序

  • 进入后会看到首页有个小程序发布流程-把这4个流程按顺序填写完成

  • 重要部分-小程序类目填写-请看以下截图

  • 主营-在设置主营类目 里面设置 综合工具

  • 获取小程序 AppID(小程序ID) 与 AppSecret(小程序密钥)只显示一次 ，请一定记录好并保存到txt文档里面请勿丢失

安装HBuilderX

  • 解压 HBuilderX.4.14.2024043013.zip 到D盘或者你需要保存的位置

安装NodeJS

  • 安装

  • 选择安装位置或者默认

  • 安装全部组件检查环境变量

  • 等待安装完成

  • 验证nodejs是否安装完成，使用一下命令验证

node -v

npm -v

安装微信小程序开发软件

  • 下载

  • 双击安装 - 下一步 - 我接受 - 默认安装就好了

  • 使用注册好的微信小程序 （微信账号扫码登录）

  • 登录并导入项目

  • 项目下载请移动至微信群公告下载最新的小程序版本 选择1.0.0-beta3

  • 下载地址：https://www.123pan.com/s/TneRVv-ZAnH.html

  • 后续小程序开发人员会更新版本请下载最新版本

导入项目

HBuilderX软件基本调试

  • 打开 HBuilderX 软件，从本地目录导入项目

  • 鼠标选择项目主目录，鼠标右键使用命令行窗口打开所在目录

  • 使用内置终端

  • 请耐心等待依赖的下载

  • 请打开群公告里面的安装教程或者接着往下看

    • 安装文档：https://www.jiewen.run/docs/TinyTale/start/install

      获取openid：https://www.jiewen.run/docs/TinyTale/basic/get-openid

      插件授权：https://www.jiewen.run/docs/TinyTale/basic/Plugin-License

小程序依赖下载

  • 执行以下命令

yarn 
或者
yarn install

  • 第一次执行可能会报错，这是没有安装yarn组件

  • 安装命令行终端安装 Npm install -g yarn

  • 安装yarn后请关掉HBuilderX软件从新打开使用鼠标右键使用命令行打开所在目录

  • 输入 yarn 下载依赖

  • 等待下载完成不要关闭窗口

软件基础设置

  • 选择Uniapp - src - manifest.json 点击重新获取

  • 如果弹出需要注册请注册好账号信息在点击从新获取

  • 选择微信小程序

    • 注册微信小程序的时候获取到的 AppID(小程序ID)

  • 修改 base.ts 文件 打开 src - config - base.ts

  • BASE_URL 与 WEB_URL 可以填写一样的

  • 项目名称：填写自己的博客名字

  • token：在后面获取

const config: Config = {
  // 项目名称
  title: '文的板凳',
  // 项目版本
  version: '1.0.0',
  // API地址
  BASE_URL: '网站地址',
  // 网站地址
  WEB_URL: '网站地址',
  // token

  API_KEY: ''
}

启动项目

回到终端

  • 输入

yarn run dev:mp-weixin

  • 显示以下内容说明已经完成

  • 编译后微信小程序文件位置 Uniapp - dist - dev - mp-weixin

安装halo插件

插件导入

  • 打开halo管理后台 https://localhost/console

    • 点击 插件 - 右上角安装

  • 在群公告里面下载好插件 1.0.3版本

插件配置

  • 鼠标单击打开

插件授权

  • 请确认网站域名是否正确，点击注册用户

  • 一定要注册用户这是插件授权用的，其他地方注册的用户无效。

  • 获取用户名

  • 填写用户名

  • 前往审核

  • 点击提交授权申请

  • 点击授权

  • 授权完成

获取halo-API

  • 点击hal后台左下角个人中心

  • 选择个人令牌

  • 新建令牌

  • 选择令牌过期时间尽量选择久一点

  • 权限 - 附件 - 全选所有权限

  • 保存 Token 将仅显示一次

  • Token的作用 ：

    • 用于请求配置信息

    • 用于获取，发布图库和瞬间

pat_eyJraWQiOiJkSHF4TTdPNlctSlZ1ODFWXy1YRzBOaXc5NC1iYldpNXVJZ2FSX3JvRmtZIiwiYWxnIjoiUlMyNTYifQ.eyJpc3MiOiJodHRwczovL25vdGUuZmlpaWxsLnRvcCIsInN1YiI6ImFkbWluIiwiZXhwIjoxOTIyOTYxMjQwLCJpYXQiOjE3MTUxNjk0MjgsImp0aSI6IjJhNzUwNzQ4LTFiNmYtZWYxZS0wNDg4LTY2ODUxZjI4NTY2YiIsInBhdF9uYW1lIjoicGF0LWFkbWluLU54Z0VPIn0.GlXtUBKBJOAGVUPxvXGbe5VHmjoZnP9uGpYsyNFf_0pDv1dWkRjnqKOahvJ6aiv3W_AbdNCUPe5XoP8MRx607F27qZi0fsSGplEHBc05udhxyA997_H7qSTVR6Izkt76_BMS2FD_-8xrsz25HZo1JF1UzRVo5fpP4kaiRtJZgFdYyXrkjiMYTZJ7sNalg62I8PL1QDCbmulKcE6U4bR5UOxLbxbtMiGZDNrommFrmvIO-9zKLRoa57elCICxlW_HVmz-G8ENvIwyahPH1aQ5Ins6QpQiw9YpJBeXBsrFhTIo13iG4cGXk_i935jPIBEmqp_RmLuAUhDGdMbhklKIETRZ-tU0gXauQKqm8pAwMXhNgHtqaIR_O7UyNCa1luNla68JNHQdW_-6hq9SqB6AqSKTsdlBisqLezy43jvWTce-Ano9Y_FWOFH0n_UwpsGk-F-D4vmJe8q4V02a6xhCZz-C2qAZly3X_WLNzlkaIlA8cm03WzrqnlCDQzH46nbpldv348ld8G2wjZJmelzxFHcnAhR73fUWueVTVrQoXqf3Pqjaw9PdIbCjmOnDWFkMtI1nJipr7UDX2gc2Iu2Gbr69TzbOE4mmPQ2lEZk20hD2s0uLVpv4GWujQyCmRVajUyDWcgUCiWsOEwKQKEAYGQZzDqwZnFqZkcVy6XXiIwE

APPSECRET选项配置

  • 填写在微信小程序里面获取的APPID和APPSECRET，openID后续获取。

微信小程序开发软件调试参数

导入编译后的程序

修改代码目录tabbar文件夹（新版本的代码不需要修改，注beta3）

  • 重命名这个文件夹把tabbar 改为 tabBar。

获取openid

openID是干嘛的？

  • 原网页地址：获取openid：https://www.jiewen.run/docs/TinyTale/basic/get-openid

  • 简单来说openid就是小程序用户访问的唯一标识，根据应用的APPID 和 APPSECRET 以及访问的时候生成的code，获取到。

    在这里我们用来标记是否是管理员，实现无感显示管理员内容。

如何获取

  • 回到HBuilderX

  • 在文件src/pages/about/index.vue 下，有一段注释的代码。

找到以下代码

      uni.request({
        url:
          'https://api.weixin.qq.com/sns/jscode2session?appid=' +
          '你的APPID' +
          '&secret=' +
          '你的APPSECRET' +
          '&js_code=' +
          loginRes.code +
          '&grant_type=authorization_code', // 请求路径
        success: (result) => {
          console.log(result)
          console.log('openid：' + result.data.openid)
          console.log(configStore.basic?.openid === result.data.openid)
          if (configStore.basic?.openid === result.data.openid) {
            isAuth.value = true
          }
        }
      })

  • 更改下图绿色方框红色的位置

    • 把AppID(小程序ID)与AppSecret(小程序密钥) 填写进去 按CTRL+S 保存

  • 修改代码后 取消注释

下面还是这样的状态

  • 回到微信小程序开发软件

  • 点击关于 - 点击调试器 - 点击Console 找到openis开头的英文复制冒号：后面的信息保存。

  • 复制下来openid,在回到插件配置页面


    取消注释

  • 回到 HBuilder X 把刚才我们修改的那一端代码注释掉或者删除。

  • 使用CTRL + S 保存

填写在halo后台获取的个人令牌 api-key到微信小程序代码里

  • 找到config - base.js 把获取到API KEY 填写在“”之间保存

填写halo后台TinyTale小程序设置

  • 完整的填写 基础设置 首页设置 关于我的设置 文章页设置 里面的信息，要不然页面信息获取不完整。

基础设置

首页设置

关于我的设置

文章页设置

微信开发小程序项目预览

LICENSED UNDER CC BY-NC-SA 4.0
评论
访问统计
总访问量： 👀｜ 访客数： 🚶‍♂️