久久伊人久久伊人,成人二三区

前言

????在上一次的文章中，介紹了如何使用 vercel+hexo 打造自己的線上博客，如果有跟著一步一步實踐了的朋友，應(yīng)該已經(jīng)搭建了自己的博客了，今兒個咱們再玩兒點新的花樣，那就是在 hexo 中寫了博客，怎么讓他在小程序中也可以直接預(yù)覽。

原因

????做這個的原因在于，目前小程序在微信打開極其方便，比如在簡歷里面你直接扔個二維碼比扔個鏈接，讓面試官手機一掃看著也更方便，并且因為我本身還沒有做過小程序相關(guān)的東西，所以也想玩一玩。

為什么不用 Taro 或 uniapp？

Taro 試了試項目也搭建好了，但是寫的有點累，所以后來就有點難受，整好之前買了一本掘金的小冊，小程序開發(fā)入門與實踐，就我個人而言，還是挺推薦這個小冊的，用來入門妥妥的，不打廣告，真實感受！

至于 uniapp 的話，也是完全沒接觸過，暫時可能也不會接觸，所以就選擇了微信小程序

介紹

????因為本文涉及兩個方面的東西，一個是博客中的數(shù)據(jù)怎么轉(zhuǎn)成接口形式供小程序調(diào)用，另一個是小程序開發(fā)的所需要具備的條件。那么接下來就帶著這兩個問題開始吧??！

hexo 插件

在 hexo 眾多插件中，又一個叫hexo-generator-restful的插件，顧名思義就是將 hexo 中的某些東西可以轉(zhuǎn)換生成 restful 接口供其他地方調(diào)用，GitHub 地址：https://github.com/yscoder/hexo-generator-restful，但是呢這個插件只是獲取到了一些簡單的數(shù)據(jù)，包括文章列表、分類列表、標簽列表以及自定義頁面的東西，如果不滿足需要你也可以 fork 下來自己進行二次開發(fā)一下！
微信小程序

微信小程序的話，需要申請，在微信公眾平臺注冊并完善相關(guān)的信息即可，過程也比較簡單這里不再贅述，如有問題可以留言告訴我哈，盡我所能！所需要的工具，由于比較環(huán)境和語法都比較特殊，微信有專門的開發(fā)者工具，Vscode 里面也有一些可以開發(fā)的插件，但是說實話著實不太好用，時不時就卡死了，如果有朋友知道更好用的工具，麻煩告訴我一聲，十分感謝！?。?/p>

hexo-generator-restful 配置

1、打開我們之前建好的博客項目，在 package.json 中安裝插件，

安裝命令： npm install hexo-generator-restful

2、打開_config.yaml 文件，粘貼以下代碼，當然配置信息具體描述可以在Github上查看獲取。注意配置信息的代碼縮進

# 對外API
restful:
  # site 可配置為數(shù)組選擇性生成某些屬性
  # 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         # 分類數(shù)據(jù)
  use_category_slug: true # Use slug for filename of category data
  tags: true               # 標簽數(shù)據(jù)
  use_tag_slug: true      # Use slug for filename of tag data
  post: true               # 文章數(shù)據(jù)
  pages: true

3、配置好以后，push 代碼，vercel 自動部署后即可訪問。訪問地址是你的域名+/api/***，你也可以直接訪問域名+/api，查看完整的數(shù)據(jù)類目。舉個 ??，看看我的就行，哈哈哈。因為我的域名是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 博客方面就已經(jīng)配置完成了，這種方式生成的接口不需要鑒權(quán)，因此你可以在任意項目里面調(diào)用它。

小程序開發(fā)

????在搭建小程序項目時，除了注冊小程序再就是使用微信開發(fā)者工具進行小程序開發(fā)了，那么下載微信開發(fā)者工具。

登陸微信小程序，在設(shè)置中找到 AppId，記??；
打開微信開發(fā)者工具，掃碼登陸
新建小程序項目
- 項目名稱：填寫你的項目名稱
- 目錄：選擇項目所在目錄
- AppID：就是在微信小程序后臺中的那個 AppId
- 開發(fā)模式：小程序
- 后端服務(wù)：小程序云開發(fā)表示可以使用云函數(shù)以及云開發(fā)環(huán)境，是微信提供的，通過微信云 SDK 進行調(diào)用；不使用云服務(wù)則是簡單的微信小程序項目。因為我已經(jīng)開通了云開發(fā)功能因此這里我也選擇了云開發(fā)。
  
  小程序開發(fā)
- 新建好后，就是這樣的，默認的頁面
- 接下來就可以正常開發(fā)了。有興趣的可以查看我現(xiàn)在正在做的項目，wx-blog
- 項目目錄結(jié)構(gòu)
  - cloudFunctions 云函數(shù)
  - miniProgram 項目目錄
    - UIComponents 引用的三方UI組件庫
    - components 業(yè)務(wù)組件
    - constants 常量
    - image 項目里用到的圖片
    - pages 頁面目錄
    - style 公共樣式
    - app.x 入口頁面
    - project.config.json 配置文件
- UI組件庫用的是iView組件庫，訪問地址