以Serverless WordPress为后端开发文章类小程序-CFANZ编程社区

引言

如果你想将自己站点的文章同步到微信的小程序，发挥小程序的特点，推荐你使用WordPress为后端来开发小程序。

因为从wordpress 4.7版本开始.wordpress内置了rest api，可以很方便地使用站点提供的web服务API来获取内容，作为小程序的后端。

我近期上线的小程序iOS逆向,初衷就是觉得好的文章应该是经常被检索的。一个关于文章的观点分享给大家：

把主要精力放在文章的内容和质量上，并让文章可以被检索和被更多的地方所引用，这样才是对文章最大的保护。而不是在社交圈上被大众转被大众转发、点赞、粉丝、订阅和打赏。

I 博客版小程序

1.1 功能

鉴于微信把可以推送多篇文章的公众号接口给关了，所以“聊天搜索文章”的功能也就没什么价值了。

为了兼顾移动端的体验，包括搜索文章，此小程序可用于检索WordPress文章,发挥小程序在微信里打开，无须下载app的特点，同时也无须再访问传统的PC站点，即可随时随地评论互动。

目前小程序分为4个模块

首页：最新的文章、精选公众号文章、快捷入口
专题分类：精选专题
发现：搜索文章、热门文章
我的：客服消息、知识星球、关于

目标用户

想要阅读到优质iOS文章的群体、想要入门iOS开发的群体。

1.2 核心实现

基于uni-app框架，使用开源建站程序WordPress作为后台，简单对接快速生成小程序。可将WordPress网站的文章、分类、评论等内容同步到小程序

利用WordPress插件获取基础配置信息
利用WordPress REST API 获取文章数据

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

1.3 开发工具

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

II REST API

从wordpress 4.7版本开始wordpress官方内置了rest api，利用WordPress站点提供的web服务API来获取内容，作为小程序的后端。

因为WordPress REST API 已经相当完善，利用它可以作为后端服务，不必写后端服务代码，就可在 Android，iOS，小程序里直接调用。

REST API：为应用程序提供了一个接口，通过以JSON对象发送和接收数据来与WordPress站点交互。

这些api包括查询、添加、更新等操作 developer.wordpress.org/rest-api/ 如果没有对URL 进行重写，那么WordPress REST API 的访问URL 应该是这样的：

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

.../wp-json/wp/v2/posts?per_page=8&page=1&orderby=date&order=desc 伪静态之后的URL格式： service-2zeyfywf-1256666977.sh.apigw.tencentcs.com/wp-json/wp/…

posts: 表明是获取文章的内容
Categories（分类）
Tags（标签）
Pages（页面）
Comments（评论）

以Serverless WordPress为后端开发文章类小程序_php

content="{{about_center.content.rendered}}"

2.1 开启 rest api

REST API是WordPress4.4版本开始提供的功能，不过是以插件的方式提供的，WordPress 4.7版本后才内置到系统里，如果你的WordPress站是4.7以前的版本，需要下载api插件：wordpress.org/plugins/res…

如果是WordPress 4.7 或更高版本，要想正常访问 api,需要调整满足两个条件：

在wordpress后台设置固定链接（permalink）

注意：不要设置“朴素”项

最好在固定链接的最后加上html的为后缀

设置wordpress 网站的url重写(伪静态)

为了去掉rest api中间的index.php路径，需要通过URL 重写来实现

最简单的重写方式：使用宝塔面板，在网站选项中的伪静态，直接选择wordpress

2.2 为REST API 接口新增返回字段

WordPress插件：给REST API新增文章特色图片（缩略图）字段

├── -dstrict.php 首页模块(精选栏目)

├── -friend.php 配置友情

III 通过WordPress插件获取文章配置信息

将静态的配置信息以数组的形式放置在插件的PHP文件
动态信息通过插件的对应页面配置

3.1 将静态的配置信息以数组的形式放置在插件的PHP文件

<?php
$arr = array (
    [
        array(
        'title'=>'搜索',
        'type'=>'xs_tap',
        'appid'=>'',
        'route'=>'/pages/search/search',
        'himg'=>'../../static/index/1.png'
      ),


);
echo json_encode($arr);
?>

以Serverless WordPress为后端开发文章类小程序_php_03

安装插件

进入WordPress仪表盘，点击"插件" – "安装插件"- "上传插件" ，直接将本地项目打包上传

注意：WordPress 默认上传项目大小限制为 2M，如果需要修改，请修改php.ini 里的 upload_max_filesize参数并重新上传，由于云函数有上传大小限制，该参数最大为 4M

3.2 动态信息通过插件的对应页面配置

安装POSD.zip插件后启用，在后台设置pods菜单----组件----安装Migrate: Packages

打开pods.html文件复制所有内容，在上图中点击migrate packages，点击导入粘贴我们的代码。

2.REST API TO MiniProgram：按官方api二次开发的规范定制的。

插件的下载地址：github.com/iamxjb/wp-r… 直接上传文件夹到wordpress的插件目录，然后启用

插件安装启用后，需要在后台配置一些参数。

wordpress后台 => 设置 =>微信小程序设置

以Serverless WordPress为后端开发文章类小程序_微信小程序_04

设置“专题”页的封面图片

IV 小程序代码

4.1 代码结构

├── .hbuilderx (官方文件夹)
├── components （组件）
│   ├── api.js (域名请求文件)
├── pages
│   ├── about (关于页面)
│   ├── category (分类页面)
│   ├── download (下载和下载详情页面)
│   ├── frinend (友情界面)
│   ├── index (首页)
│   ├── me (我的页面)
│   ├── questions (问题页面)
│   ├── search (搜索页面)
│   ├── tags (标签页面)
│   ├── weblist
│   ├── wxmore
├── static (图片目录 部分图片是svg格式)
├── App.vue
├── main.js
├── manifest.jsan  (配置文件--小程序id)
├── pages.jsan (配置文件--页面标题，底部导航)
├── theme.json (配置文件--深色模式)
└── uni.scss