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-restfulPlug 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 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 restful: # 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 .
The article lists ：blog.wangboweb.site/api/posts.j…
List of categories ：blog.wangboweb.site/api/categor…
Tag list ： blog.wangboweb.site/api/tags.js…
Article details ：blog.wangboweb.site/api/article…
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 .
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 .
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
Three parties cited UI Component library
Pictures used in the project
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 .
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 .