关于bootstrap:hexo-Wechat-Mini-Program打造博客小程序

在上一次的文章中，介绍了如何应用 vercel+hexo 打造本人的线上博客，如果有跟着一步一步实际了的敌人，应该曾经搭建了本人的博客了，今儿个咱们再玩儿点新的花色，那就是在 hexo 中写了博客，怎么让他在小程序中也能够间接预览。

做这个的起因在于，目前小程序在微信关上极其不便，比方在简历外面你间接扔个二维码比扔个链接，让面试官手机一扫看着也更不便，并且因为我自身还没有做过小程序相干的货色，所以也想玩一玩。

为什么不必 Taro 或 uniapp？
Taro 试了试我的项目也搭建好了，然而写的有点累，所以起初就有点好受，整好之前买了一本掘金的小册，小程序开发入门与实际，就我集体而言，还是挺举荐这个小册的，用来入门妥妥的，不打广告，实在感触！

至于 uniapp 的话，也是齐全没接触过，临时可能也不会接触，所以就抉择了微信小程序

因为本文波及两个方面的货色，一个是博客中的数据怎么转成接口模式供小程序调用，另一个是小程序开发的所须要具备的条件。那么接下来就带着这两个问题开始吧！！

hexo 插件
在 hexo 泛滥插件中，又一个叫 hexo-generator-restful 的插件，顾名思义就是将 hexo 中的某些货色能够转换生成 restful 接口供其余中央调用，GitHub 地址：https://github.com/yscoder/hexo-generator-restful，然而呢这个插件只是获取到了一些简略的数据，包含文章列表、分类列表、标签列表以及自定义页面的货色，如果不满足需要你也能够 fork 下来本人进行二次开发一下！
微信小程序
微信小程序的话，须要申请，在微信公众平台注册并欠缺相干的信息即可，过程也比较简单这里不再赘述，如有问题能够留言通知我哈，尽我所能！所须要的工具，因为比拟环境和语法都比拟非凡，微信有专门的开发者工具，Vscode 外面也有一些能够开发的插件，然而说实话着实不太好用，时不时就卡死了，如果有敌人晓得更好用的工具，麻烦通知我一声，非常感激！！！

1、关上咱们之前建好的博客我的项目，在 package.json 中装置插件，

装置命令：npm install hexo-generator-restful

2、关上 \_config.yaml 文件，粘贴以下代码，当然配置信息具体形容能够在 Github 上查看获取。留神配置信息的代码缩进

# 对外 API
restful:
  # site 可配置为数组选择性生成某些属性
  # site: ['title', 'subtitle', 'description', 'author', 'since', email','favicon','avatar']
  site: true        # hexo.config mix theme.config
  posts_size: 10    # 文章列表分页，0 示意不分页
  posts_props:      # 文章列表项的须要生成的属性
    title: true
    slug: true
    date: true
    updated: true
    comments: true
    path: true
    excerpt: false
    cover: true      # 封面图，取文章第一张图片
    content: true
    keywords: true
    categories: true
    tags: true
  categories: true         # 分类数据
  use_category_slug: true # Use slug for filename of category data
  tags: true               # 标签数据
  use_tag_slug: true      # Use slug for filename of tag data
  post: true               # 文章数据
  pages: true

3、配置好当前，push 代码，vercel 主动部署后即可拜访。拜访地址是你的域名 +/api/***，你也能够间接拜访域名 +/api，查看残缺的数据类目。举个 ????，看看我的就行，哈哈哈。因为我的域名是 https://blog.wangboweb.site，所以只须要在前面加上 /api 即可。

文章列表：https://blog.wangboweb.site/api/posts.json
分类列表：https://blog.wangboweb.site/api/categories.json
标签列表：https://blog.wangboweb.site/api/tags.json
文章详情：https://blog.wangboweb.site/api/articles/%E9%9A%8F%E7%AC%94/2021.json

4、到这里，hexo 博客方面就曾经配置实现了，这种形式生成的接口不须要鉴权，因而你能够在任意我的项目外面调用它。

在搭建小程序我的项目时，除了注册小程序再就是应用微信开发者工具进行小程序开发了，那么下载微信开发者工具。

登陆微信小程序，在设置中找到 AppId，记住；
关上微信开发者工具，扫码登陆
新建小程序我的项目
- 项目名称：填写你的项目名称
- 目录：抉择我的项目所在目录
- AppID：就是在微信小程序后盾中的那个 AppId
- 开发模式：小程序
- 后端服务：小程序云开发示意能够应用云函数以及云开发环境，是微信提供的，通过微信云 SDK 进行调用；不应用云服务则是简略的微信小程序我的项目。因为我曾经开明了云开发性能因而这里我也抉择了云开发。
- 新建好后，就是这样的，默认的页面
- 接下来就能够失常开发了。有趣味的能够查看我当初正在做的我的项目，wx-blog
- 我的项目目录构造
```
- cloudFunctions ` 云函数 `
- miniProgram ` 我的项目目录 `
  - UIComponents ` 援用的三方 UI 组件库 `
  - components ` 业务组件 `
  - constants ` 常量 `
  - image ` 我的项目里用到的图片 `
  - pages ` 页面目录 `
  - style ` 公共款式 `
  - app.x ` 入口页面 `
  - project.config.json ` 配置文件 `
  
```
- UI 组件库用的是 iView 组件库，拜访地址

具体小程序怎么开发，网上有很多的材料和文档教程，大家能够学习一下，因为 hexo 中曾经提供了接口，在小程序中只须要设置好接口前缀，进行数据调用即可。

因为目前我做的还没开发实现，所以还没有上线临时无法访问，这里给大家看一下目前的成果，目前显示的列表就是调用了 hexo 博客中的数据进行展现的。

到这里其实也就根本完了，后续中在 hexo 博客中写了博客当前，vercel 主动部署接口也会自动更新，小程序关上的时候也会获取到最新的数据。

整个过程其实也没有什么难度，利用的也都是第三方的插件，至于微信小程序的开发有什么坑我临时还没有遇到，因为还没有深刻去做，后续实际的过程中有遇到再写吧。

hexo-generator-restful

小程序开发入门与实际

本文由博客群发一文多发等经营工具平台 OpenWrite 公布

关于bootstrap:hexo-Wechat-Mini-Program打造博客小程序

前言

起因

介绍

hexo-generator-restful 配置

小程序开发

实现成果

总结

参考