Hexo + wechat Mini program create blog app

Kechen 2021-02-23 16:08:38
hexo wechat mini program create


     In the last article , It introduces How to use vercel+hexo Build your own online blog , If you have a friend who has been practicing step by step , I should have set up my own blog , Let's play some new tricks today , That is in hexo I wrote a blog in , How to let him preview directly in the small program .


     The reason for doing this is , At present, it is extremely convenient to open small programs on wechat , For example, you can throw a QR code in your resume , It's more convenient for interviewers to scan their mobile phones , And because I haven't done anything about applets myself , So I want to play .

  • Why not Taro or uniapp?

    Taro I've tried, and the project has been set up , But I'm a little tired of writing , So it was a little bit hard afterwards , Just bought a small book of nuggets , Introduction and practice of small program development , As far as I'm concerned , I still recommend this brochure , It's for getting started , No advertising , True feelings !

    as for uniapp Words , I've never been in touch with , Maybe not for the time being , So I chose wechat app


     Because this article involves two aspects , One is how the data in the blog can be converted into an interface for small programs to call , The other is the requirement of small program development . So let's start with these two questions !!

  • hexo plug-in unit

    stay hexo Many plug-ins , One called hexo-generator-restful Plug in for , As the name suggests it is hexo Something in can be transformed into restful Interface for other places to call ,GitHub Address :github.com/yscoder/hex…, However, this plug-in only gets some simple data , Include a list of articles 、 List of categories 、 Tag lists and custom pages , If you don't meet your needs, you can fork Come down and do secondary development by yourself !

  • Wechat applet

    Wechat app , Application required , stay WeChat public platform Register and complete the relevant information , The process is also relatively simple. I won't repeat it here , If you have any questions, please leave me a message , Do everything within my ability ! Tools needed , Because of the special comparison environment and grammar , Wechat has special developer tools ,Vscode There are also some plug-ins that can be developed , But to be honest, it doesn't work very well , It gets stuck every now and then , If a friend knows better tools , Please let me know , Thank you very much. !!!

hexo-generator-restful To configure

1、 Open the blog project we built before , stay package.json Install plug-ins in ,

Installation command : npm install hexo-generator-restful

2、 open _config.yaml file , Paste the following code , Of course, the configuration information can be described in Github View on to get . Pay attention to the code indentation of the configuration information

# foreign API
# site Can be configured to selectively generate certain properties for arrays 
# site: ['title', 'subtitle', 'description', 'author', 'since', email', 'favicon', 'avatar']
site: true # hexo.config mix theme.config
posts_size: 10 # Article list pagination ,0 Indicates no paging 
posts_props: # Article list items need to generate properties 
title: true
slug: true
date: true
updated: true
comments: true
path: true
excerpt: false
cover: true # Cover image , Take the first picture of the article 
content: true
keywords: true
categories: true
tags: true
categories: true # Classified data 
use_category_slug: true # Use slug for filename of category data
tags: true # Tag data 
use_tag_slug: true # Use slug for filename of tag data
post: true # The article data 
pages: true
 Copy code 

3、 Once configured ,push Code ,vercel After automatic deployment, you can access . The access address is your domain name +/api/***, You can also access the domain name directly +/api, See the complete data category . Take up a , Just look at mine , Ha ha ha . Because my domain name is https://blog.wangboweb.site, So just add... To the back /api that will do .

4、 Come here ,hexo The blog has been configured , The interface generated in this way does not need authentication , So you can call it in any project .

Applet development

     When building a small program project , In addition to registering applets, we also use wechat developer tools to develop applets , Then download WeChat developer tools .

  • Login wechat app , Found in settings AppId, remember ;
  • Open wechat developer tool , Scan the code and log in
  • New applet project
    • Project name : Fill in your project name

    • Catalog : Select the directory where the project is located

    • AppID: It's the one in the background of wechat app AppId

    • Development mode : Applet

    • The back-end service : Small program cloud development can use cloud function and cloud development environment , It's provided by wechat , Through wechat cloud SDK To call ; Not using cloud services is a simple wechat applet project . Because I have opened the cloud development function, so here I also choose cloud development .  Applet development

    • When the new building is finished , That's it , Default page

    • Then you can develop normally . If you are interested, please check the projects I am working on ,wx-blog

    • Project directory structure

      • cloudFunctions Cloud functions
      • miniProgram Project directory
        • UIComponents Three parties cited UI Component library
        • components Business component
        • constants Constant
        • image Pictures used in the project
        • pages Page directory
        • style Public style
        • app.x Entry page
        • project.config.json The configuration file
    • UI The component library uses iView Component library , Access address

     How to develop specific small programs , There are many materials and documents on the Internet , You can learn about , because hexo The interface is already provided in , In the applet, you just need to set the interface prefix , Just call the data .

Realization effect

     Because I haven't finished the development yet , So it's not online yet. It's not accessible right now , Here's a look at the current effect , The list currently displayed is called hexo The data in the blog is displayed .


     It's almost over here , Follow up in hexo After blogging in the blog ,vercel The auto deployment interface is also automatically updated , When the applet is opened, it will also get the latest data .

     There is no difficulty in the whole process , They are all third-party plug-ins , As for the development of wechat apps, I haven't encountered any pitfalls yet , Because I haven't done it in depth yet , In the process of follow-up practice, please write it again .

Reference resources


Introduction and practice of small program development


  1. Are airpods still the strongest? Horizontal evaluation of 4 true wireless headphones
  2. Seamless connection with tableau, how can this large bank with 5000 + active users realize self-service analysis?
  3. react-native版文字跑马灯
  4. React native text running lantern
  5. Java、JavaScript、C、C++、PHP、Python都是用来开发什么?
  6. What are Java, JavaScript, C, C + +, PHP and python used to develop?
  7. this.byId(SupplierForm).bindElement in SAP UI5
  8. SAP UI5 JavaScript文件的lazy load - 懒加载
  9. this.byId (SupplierForm).bindElement in SAP UI5
  10. Lazy load lazy load of SAP ui5 JavaScript files
  11. "Gnome 3" - interface elements, desktop components, part names (learning notes) @ 20210223
  12. How to connect the ground gas to the micro front end?
  13. How to transform single / micro service application into serverless application
  14. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  15. Seven array methods for JavaScript you need to master in 2021
  16. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  17. Seven array methods for JavaScript you need to master in 2021
  18. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法
  19. Seven array methods for JavaScript you need to master in 2021
  20. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  21. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  22. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  23. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  24. 前端面试常考题:JS垃圾回收机制
  25. Frequently asked questions in front end interview: JS garbage collection mechanism
  26. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  27. Java之HTTP网络编程(一):TCP/SSL网页下载
  28. HTTP network programming in Java (1): TCP / SSL web page download
  29. Java之HTTP网络编程(一):TCP/SSL网页下载
  30. HTTP network programming in Java (1): TCP / SSL web page download
  31. 使用vite搭建vue项目
  32. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  33. 在 vue 中通过 express 连接数据库
  34. Using vite to build Vue project
  35. Display PDF file in component: Vue pdf
  36. Connecting database through express in Vue
  37. 2021届秋招哈啰出行前端面经(一面)
  38. vue使用sdk进行七牛云上传
  39. Javascript性能优化【内联缓存】 V8引擎特性
  40. Small true wireless smart headset evaluation: put intelligence into the ear
  41. The front end experience of the 2021 autumn recruitment
  42. Vue uses SDK to upload Qi Niu cloud
  43. 深入理解 Web 协议 (三):HTTP 2
  44. dhtmlxGantt如何重新排序任务
  45. JavaScript performance optimization [inline cache] V8 engine features
  46. 深入理解 Web 协议 (三):HTTP 2
  47. Deep understanding of Web protocol (3): http 2
  48. 深入理解 Web 协议 (三):HTTP 2
  49. How dhtmlxgantt reorders tasks
  50. 深入理解 Web 协议 (三):HTTP 2
  51. JavaScriptBOM操作
  52. JavaScriptBOM操作
  53. Deep understanding of Web protocol (3): http 2
  54. Deep understanding of Web protocol (3): http 2
  55. dhtmlxGantt甘特图重新排序任视频教程
  56. vue实现七牛云上传图片功能
  57. vue.js环境配置步骤及npm run dev报错解决方案
  58. Deep understanding of Web protocol (3): http 2
  59. JavaScript BOM operation
  60. JavaScript BOM operation