Connect WordPress website with wechat applet

Time:2021-6-11

With the increasingly powerful functions of wechat applets, especially the opening to individual developers, individual developers have the opportunity to try wechat applets. If you have your own personal website, you can move your personal website to wechat app, and directly access the content of the website through the app.

In order to obtain the content of the website by wechat applet, the website is required to provide the API of Web services, such as the JSON API for obtaining the content, which includes query, add, update and other operations. My website uses WordPress version 4.7.4 and provides rest API, so I don’t need to develop the API myself. I can use it directly. If the conditions are met, I’ll do it as soon as I say. I’ll take my own website to practice, which can be regarded as a real hands-on small program.

Connect WordPress website with wechat applet

Note: for an app applied by an individual developer, because it is unable to submit an “entertainment information” app, if it is not submitted as an “entertainment information” app, it will be rejected during the audit. The following is the feedback of rejection when I submitted it for the first time

Small program “shouwangxuan website” code release audit results

Your app “shouwangxuan website” failed to pass the code release audit for the following reasons:
1: Applet content does not conform to the rules:
(1) : the content of the app service is related to entertainment information, which belongs to the unopened category. It is recommended to choose the enterprise app
According to the feedback audit results, only enterprise applets can publish “entertainment information” applets. However, since April 28, 2017, certified public official account can quickly register and certify new small programs. If you can find a certified official account to help quickly register a small program, a small program that is registered can publish “entertainment information” class applet.

Basic settings

First of all, configure the basic information of wechat applets. This part of the configuration must be cautious, because the number of modifications per month is limited. In particular, the name of the app needs to be authenticated before it is published. You must think carefully before you name it, and it will be troublesome to modify it after it is published.

Connect WordPress website with wechat applet

First of all, you need to go to the background management of the applet to obtain the developer ID and key of the applet. At the same time, you need to set the link address of the domain name that provides the web service API. In particular, the link address of the domain name needs to be HTTPS( For details on how to turn on HTTPS for WordPress type websites, see the article: WordPress can easily turn on HTTPS for the whole website)
Connect WordPress website with wechat applet

Small program development

The development of small programs can refer to the official documents:https://mp.weixin.qq.com/debu…. For WordPress websites, we mainly get the following contents:

1、 Get the list of posts

  1. Rest API link:https://www.watch-life.net/wp…,per_ The page parameter indicates the number of records on each page, and the page parameter indicates the number of pages.

2. Get the main code of the article list:

Connect WordPress website with wechat applet

When the list of articles is displayed, the content of the article is not displayed completely, but only the summary. Therefore, a part of the content of the article is obtained as the summary. At the same time, considering that there is HTML code in the article, the HTML code in the article is removed, so the display is clean and tidy.

3. The front end (wxml file) displays the main code of the article list
Connect WordPress website with wechat applet

The above code mainly realizes the display of article title and abstract.

2、 Get the content of posts

1. Rest API link:https://www.watch-life.net/wp…, ID is the ID of the article

2. Get the main code of the article content:

Connect WordPress website with wechat applet
Because the article contains a large number of HTML tags, which cannot be displayed in wechat applet, a third-party program is used to parse HTML into wxml: wxparse. The code marked with red box in the figure above uses the calling method of the program.

3. The front end (wxml file) displays the main code of the content of the article

Connect WordPress website with wechat applet
2、 Get the classification of pages
1. Rest API link:https://www.watch-life.net/wp…

2. To get the code of page classification, you can refer to the procedure of getting the list of articles.

2、 Get the content of the page
1. Rest API link:https://www.watch-life.net/wp…, ID represents the ID of the page

2. The code to get the content of the page can refer to the program to get the content of the article.

So far, a simple small program link WordPress website program development is completed. Finally, submit the applet and review it. After approval, it can be released. After the release of the small program, you can bind the official account number to the small program. After binding, you can see the applet in the official account, as shown in the following figure:

Connect WordPress website with wechat applet

Finally, the applet is shown as follows:
Connect WordPress website with wechat applet

My website server in foreign countries, in the speed of access to some slow, so the small program display will also be some slow, in addition, the text of the article in the processing of the format there are still some problems, I will continue to improve the follow-up, update the version as soon as possible.

I have put the source code of “shouwangxuan” website applet in GitHub open sourcehttps://github.com/iamxjb/win…

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