Using WordPress rest API to develop wechat applet

Time:2021-6-8

Since I released and opened the wechat app for WordPress, many webmasters of WordPress website have asked questions about program development. In fact, in the article “connecting WordPress website with wechat app”, they have talked about some basic points, but there are still many people who don’t understand some details, so I want to write a more comprehensive and basic tutorial, Mainly for entry-level users, experts do not need to see.

WordPress version of “shouwangxuan” wechat applet open source address:https://github.com/iamxjb/win…

As for the title, please forgive me, I Title The party.
Using WordPress rest API to develop wechat applet

WordPress REST API

WordPress has launched rest API in version 4.4. If you use the latest version of WordPress, it should provide rest API functions. What is the rest API? To make it clear, it is estimated that you will write an article. It is recommended that you read the restful API design guide written by Ruan Yifeng. After reading it, you can basically understand it. In short, WordPress rest API is to use the browser to access the rest API link provided by WordPress through HTTP to obtain the “content” of the WordPress website, which is returned to the browser in JSON format.

For example, use Chrome browser to visit the API address of my website article:https://www.watch-life.net/wp…, you will see the same result as the following figure:

Using WordPress rest API to develop wechat applet
For a detailed introduction to WordPress rest API, see the link:https://developer.wordpress.o…

WordPress rest API links are usually related to the installation path and URL rewriting of WordPress. Therefore, WordPress rest API links may be different. The main difference lies in the link rules of WordPress itself. The same part is the rest API routing part.

Usually, a WordPress website is successfully installed. If the URL is not rewritten, the URL of WordPress rest API should be as follows:

https://www.youdomain.com/ind…

The WordPress of my website has been rewritten by URL, so the URL of rest API is to directly visit the root directory of the website:https://www.watch-life.net/wp…

Usually, WordPress rest API links are as follows:

/wp-json/wp/v2/posts
?per_page=8&page=1&orderby=date&order=desc
… (ellipsis part): according to WordPress website’s own rules.

WP JSON: detailed description of rest API, such as direct accesshttps://www.watch-life.net/wp…You can see these instructions

WP / V2: it describes the rest API version. The V2 version described here, such as direct accesshttps://www.watch-life.net/wp…, you can see the function description of V2 version.

Posts: is the endpoint of the rest API. It is also used to express what kind of content to get WordPress. “Posts” indicates to get the content of the article. There are other routing endpoints here, such as categories, tags, pages and comments. The API links for obtaining these contents are as follows:

Get a link to the classification API:https://www.watch-life.net/wp…
Get the tag API link:https://www.watch-life.net/wp…
Get page API link:https://www.watch-life.net/wp…
Get the comment API link:https://www.watch-life.net/wp…

For more routing endpoints, please refer to the API documentation.

? per_ Page = 8 & page = 1 & order by = date & order = desc: These are the parameters, per_ Page is the number of records per page, page is the current page, order by is the sort method, and order is the sort method. Different routing endpoint parameters will be different.

WordPress rest API is quite perfect. It can be used as a back-end service to obtain most of the content of WordPress. In this way, there is no need to write back-end service code, and it can be called directly in Android, IOS and small programs.

Wechat applet

1. Preparation
For the registration of the app and the configuration of the server domain name, please refer to my previous article: connect the WordPress website with the wechat app, which will not be repeated here. It needs to be noted that in the configuration of the domain name in the wechat app, it seems that the domain name that has not been registered can also pass the audit. Whether it will be strict in the future and domain names that must be filed can be used is not known.

2. Program engineering structure

The engineering structure of my WordPress version is as follows:

Using WordPress rest API to develop wechat applet

The files about the core of app.js, app.json and app.wxss are not specifically introduced. You can refer to the relevant development documents of wechathttps://mp.weixin.qq.com/debu…. Here is only the directory and files related to WordPress version of the applet.

(1) “Image” folder: obviously, this is the folder where the pictures are stored.
(2) “Pages” folder: the page used to store the functions of the applet. The files in this folder are the core folder of the whole project, and the main functions are realized by the pages contained in this folder.
(3) “Templates” folder: used to store general template pages.
(4) “Utils” folder: used to store public JS API files.
(5) “Wxparse” folder: the parsing library file used by the third party to convert HTML to wxml.

The “pages” and “utils” folders are highlighted below

(note the code in this article. If you copy it, please change the Chinese quotation marks to English quotation marks.)

1、 “Utils” folder

The core file in the “utils” folder is api.js. In this JS file, the provider needs to call the common interface method of WordPress rest API. If you use this applet to load the rest API of your website, you only need to modify the domain name part (blue part) of the following code:

var HOST_URI = ‘https://www.watch-life.net/wp…’;
If the API link is normal and other parts are not modified, you can run it directly. The interface methods provided by api.js include:

(1) Get a list of articles.
(2) Get article details.
(3) Get the list of pages.
(4) Get page details.
(5) Get the article classification.
(6) Get article reviews.
(7) Get the first picture of the article.

2、 “Pages” folder

The “pages” folder contains all the function pages in the applet: index, detail, list of articles by category and search, page details, about and logs

According to the development rules of wechat applet, each page function will include three files: JS, JSON, wxml, wxss. In short: JS file controls the program loaded by the applet and sends data requests, and provides the obtained data to wxml for display. JSON file is the configuration file, wxml is the front-end display page of the applet (equivalent to HTML of web program), wxss is the style file (equivalent to CSS of web program). A more detailed description of these documents can be found in the official documents.

Here we want to explain that the reason why we want to separate the article list page from the article list by category and search is for two reasons:

(1) The two pages are slightly different. The list page of the home page has rotation pictures, while the list page of classified and searched articles does not.
(2) in the page, you can’t jump to the tabbar navigation page through navigator, so you separate the two pages.

3. Data request
Whether you want to get the list of articles or display the details of articles, you need the wechat applet to call the WordPress rest API to get the data. The API for sending HTTP requests provided in the wechat applet is wx.request. Through this interface, you can send requests to get the data and assign the value (SetData) to the page data object (data) of the applet, The front end of the applet (wxml file) renders and displays the page based on this page data object. The calling code of wx.request interface is as follows:

wx.request({
url: url,
success: function (response) {
self.setData({
postsList: self.data.postsList.concat(response.data.map(function (item) {

//Data processing

return item;
}))
});
}
});
}
The “postslist” in the above code is the page data variable, which can be used by the front-end page (wxml page) to display data

<view class=”common-list”>
<block wx:key=”id” wx:for=”{{postsList}}”>
<view class=”list-item has-img” index=”{{index}}” id=”{{item.id}}” bindtap=”redictDetail”>
</view>
… / / skip data display
</block>
</view>
Because the postslist variable is a dataset variable, it is used as a loop to display the data list in combination with the block component.

In the list page, if there are many data items, it is considered to display the data in pages. In mobile applications, it is generally not used to click the page number to page, but to refresh the new page by drop-down. The code is as follows:

lower: function (e) {
var self = this;
self.setData({
page: self.data.page + 1
});
this.fetchPostsData(self.data);
},
For article details (including WordPress page details), the way of data request is similar to the above, but slightly different from the list. When the article content is added, it is entered through the WordPress editor, so the data contains a lot of HTML tag code, which cannot be parsed in wechat applet. Therefore, we need to turn HTML into wxml supported by small programs. In this small program, we use an open-source third-party parsing library: wxparse. Although there are still some problems in this parsing library, it can display the content of the article normally. At present, there is no perfect solution for the conversion of HTML to wxml. I hope the official can produce relevant rich text components.

Summary

Although I really want to write out every detail of WordPress rest API development wechat applet clearly and clearly to give a good guide to the beginners, in the process of writing, I feel that if I write too much detail, it will be trivial, so I will write out some key contents for reference. Small program development is not difficult, if you carefully read the official documents, you can basically ignore this article.

However, I still hope that by reading this article, it will be helpful for developers who want to use WordPress rest API to develop wechat applets, instead of giving up after reading the article as mentioned in the title of this article.

If a friend wants to participate in the development of this small program, or put forward suggestions on the functions of this small program, welcome to add my wechat, or join the wechat group for discussion

My micro signal: iamxjb, the two-dimensional code is as follows:

Using WordPress rest API to develop wechat applet

Address of this article:https://www.watch-life.net/wo…