Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The introduction

If you want to synchronize your site articles to micro channel small program, play the characteristics of small program, recommend you to use WordPress for the back end to develop small program.

Starting with wordpress 4.7, wordpress has a built-in REST API that makes it easy to use the Web services API provided by the site to fetch content as a back end of a small application.

I recently launched a small program iOS reverse, the original intention is that good articles should often be retrieved. A point of view about the article to share with you:

Focus on the content and quality of the article, and make the article searchable and cited by more places, this is the greatest protection of the article. Instead of being retweeted, liked, followed, subscribed and tipped in social circles.

I blog version applet

1.1 features

Since wechat has shut down its public account interface, which allows users to push multiple articles, the “chat search for articles” function is of little value.

In order to give consideration to the mobile experience, including searching for articles, this applet can be used to retrieve WordPress articles. The applet can be opened in wechat without the need to download the APP. At the same time, it does not need to visit the traditional PC site, so you can comment and interact anytime and anywhere.

At present, the small program is divided into four modules

  1. Home page: latest articles, selected public articles, shortcut entrance
  2. Category of topics: Selected topics
  3. Discovery: Search for articles, popular articles
  4. My: Customer service news, knowledge planet, about

The target user

People who want to read good iOS articles, people who want to get started on iOS development.

1.2 Core Implementation

Based on uni-APP framework, using open source website building program WordPress as the background, simple docking and quick generation of small programs. Syncs WordPress articles, categories, comments, etc. to applets

  1. Obtain basic configuration information using WordPress plug-ins

  2. Get article data using the WordPress REST API

export const API = 'iosre.cn'
export const Getfriend = API +'/wp-content/plugins/iosre/iosre-friend.php'
Copy the code

1.3 Development Tools

Kunnan.blog.csdn.net/article/det…

II REST API

Starting from wordpress 4.7, the rest API is built into wordpress. It uses the Web service API provided by wordpress sites to obtain content and serve as the back end of small programs.

Because the WordPress REST API has been quite complete, it can be used as a back-end service, without writing back-end service code, can be directly called in Android, iOS, small programs.

REST API: Provides an interface for applications to interact with WordPress sites by sending and receiving data as JSON objects.

These apis, such as query, add, update, operating developer.wordpress.org/rest-api/ if no URL rewrite, so WordPress REST API access URL should be like this:

www.iosre.cn/index.php/w…

. /wp-json/wp/v2/posts? Per_page = 8 & page = 1 & orderby = date&order = desc pseudo static URL format: after service-2zeyfywf-1256666977.sh.apigw.tencentcs.com/wp-json/wp/…

  1. Posts: Indicates getting the content of the article
  2. Categories (Categories)
  3. Tags
  4. Pages
  5. Comments:

content="{{about_center.content.rendered}}"
Copy the code

2.1 Enabling rest APIS

The REST API is available in WordPress4.4, but as a plugin. It was built into WordPress 4.7. If your WordPress site is older than 4.7, you will need to download the plugin: WordPress.org/plugins/res…

For WordPress 4.7 or later, two conditions need to be met in order to access the API properly:

  1. Permalink in wordpress background

Note: Do not set the “plain” option

It is best to suffix fixed links with HTML

  1. Setting url rewriting for wordpress sites (pseudo static)

To get rid of the index.php path in the middle of the REST API, you need to do URL rewriting

Easiest way to rewrite: use the pagoda panel, pseudo static in the site options, and select wordpress directly

2.2 Adding Return Fields for REST APIS

WordPress plugin: Added a feature image (thumbnail) field to the REST API

Demo plug-in download address:Download.csdn.net/download/u0…

├─ dstrict.php

├─ -friend.php Config Friendship

III Obtain article configuration information using the WordPress plug-in

  1. Place static configuration information as an array in the plug-in’s PHP file
  2. Dynamic information is configured on the corresponding page of the plug-in

3.1 Place static configuration information as an array in the PHP file of the plug-in


      
$arr = array([array(
				'title'= >'search'.'type'= >'xs_tap'.'appid'= >' '.'route'= >'/pages/search/search'.'himg'= >'.. /.. /static/index/1.png'));echo json_encode($arr);
? >

Copy the code

Installing a plug-in

Enter WordPress dashboard, click “plug-in “-” Install plug-in “- “Upload plug-in”, directly package the local project to upload

Note: The default size limit of upload_max_filesize in WordPress is 2M. If you need to change it, modify the upload_max_filesize parameter in php.ini and upload it again

3.2 Dynamic Information Is configured on the corresponding page of the plug-in

  1. Enable posD. zip plug-in, set pods menu —- component —- install Migrate: Packages in the background

Open pods.html and copy everything, click Migrate Packages in the image above, click Import and paste our code.

2.REST API TO MiniProgram: customized according TO the official API secondary development specifications.

Download the plugin at github.com/iamxjb/wp-r… Upload the folder directly to the wordpress plugins directory and then enable it

After plug-in installation is enabled, some parameters need to be configured in the background.

  1. WordPress background => Settings => wechat applets Settings

  1. Set the cover image for the “Features” page

WordPress background => Category => Select a category for editing

IV small program code

4.1 Code Structure

Official ├ ─ ─. Hbuilderx (folder) ├ ─ ─ components (component) │ ├ ─ ─ API. Js (domain name request file) ├ ─ ─ pages │ ├ ─ ─ the about (on) page │ ├ ─ ─ the category │ classification (page) ├ ─ ─ the download, download and download page for details) │ ├ ─ ─ frinend (friendship interface) │ ├ ─ ─ index (home) │ ├ ─ ─ the me (my page) │ ├ ─ ─ questions (questions page) │ ├ ─ ─ the search (Search page) │ ├── Tags │ ├─ Weblist │ ├─ WxMore ├─ static │ app.vue ├─ main.js ├─ Manifest.jsan (Config File - Mini program ID) ├─ pages.jsan (Config file - Page Title, bottom navigation) ├─ theme.json (Config file - Black mode) Uni.scssCopy the code

4.2 Related Configurations

Kunnan.blog.csdn.net/article/det…

4.3 traffic main

Kunnan.blog.csdn.net/article/det…

4.4 Article Style

Kunnan.blog.csdn.net/article/det…

see also

Welcome to the# Applet: iOS reverse