小程序如何读取%%20博客内容？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

小程序如何读取%%20博客内容？

文本%20|%

几周前使用vue开发微信小程序，我花了两天时间制作了我的%20网站的微信小程序版本。

本文记录了我自己开发**个版本小程序的过程。

今天知程序（微信ID%）分享的这篇文章，将一步步讲解如何借助%20API%20开发a%20网站的微信小程序版。

关注“了解小程序”公众号，在微信后台回复“开发”，获取小程序开发技巧精选文章。

小程序如何读取%%20博客内容？

%20%20API 已在版本 %204.6%20 中启动。 简单来说，就是通过%%20个请求完成的客户端-服务器数据交互方案。

当我们访问普通的%%20网站时，在不开启静态缓存的情况下，大致需要“从数据库%20→%20服务器%20PHP%20进程拉取数据到%%20→%20用户浏览器界面”的过程。

REST%20API%20的处理过程类似，但略有不同的是，输出是%%20格式的数据，一般由客户端（而不是Web浏览器）使用。

有了%%20API，一个网站就可以制作不同的客户端（%20or%20iOS%20%20app、微信小程序）并共享数据库。

我们可以通过浏览器直接访问%%20的接口地址之一：

/wp-json/wp/v2/posts?=5&page=1

，您可能会看到类似的内容返回。

现在，我来解释一下上面的%20URL%20。

/wp-json/wp/v2/

它是%20定义的%20API%()和版本号的组合。

帖子

在%%20中，称为“结束”()。

和

页

是参数。

上面的%20URL表示输出%201%20页*新%205%20篇文章的数据（5%20篇文章在%201%20页）。

微信小程序可以通过%%20 API获取%%20网站的数据。 数据通过前端代码处理渲染后，就是你在微信客户端看到的界面。

%20的%%20API%20已经很完整了，包括文章数据、页面数据、用户数据等。

使用%%20作为小程序的后端确实节省了大量的人力。 至少对于我们这样的前端狗来说，我们不用写繁琐的后端代码。

开始做一个%20WP%20小程序

上一章大致介绍了原理后，我们以本站开发“%20极客”小程序**版为例，介绍一下三个页面（首页、内容页、阅读记录页）一般是如何工作的。 制成。

1.%20准备工作

准备工作我就不细说了，但一般包括以下几个操作。

在微信公众平台管理后台注册小程序账号并配置合法域名等信息。

二是确保服务器配置正确（但不一定需要备案）。

另外，在开始开发之前，我对服务器端的%%%20API%20做了一些定制的输出。

2.%20项目结构

结合微信官方%%%20个例子和个人需求，项目结构划分如下：

.├──%20app.js├──%20app.json├──%20app.wxss%20├──%.js%20//%20配置文件├──%%20//%20图片目录├─ ─%%20//%20页面目录├──%%20//%20实用%%20分类└──%%20//%20第三方库

3.%20构建文章列表页面

小程序首页为文章列表页。 小程序启动时会显示*新%205%20篇文章，然后通过下拉推流加载更多文章。

这里，我们使用的%%%20API%20是

/wp-json/wp/v2/posts?={num}&page={num}

。

索引.js

该文档的核心是通过

wx。

接口小程序如何读取%%20博客内容？，访问上面的%20API%20URL%20获取文章数据，然后

渲染。

//%20({%20%20%20%20url:%20url,%20%20%20%:%%20()%20{%20%20%20%20%20%20%20%. ({%20%20%20%20%20%20%20%20%20%20%20%:%.data.posts.(.data.map(%20(项目)%20{%20%20 %20%20%20%20%20%20%20%20%20%20%20...%20%20%20%20%20%20%20%20%20%20%20%20% 20//%20数据过滤/格式化等%20%20%20%20%20%20%20%20%20%20%20%20%20...%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%%;%20%20%20%20%20%20%20%20%20%20%20%20})) %20%20%20%20%20%20%20%20});%20%20%20%20}%20%20});}

我将这些代码封装在函数中，方便后续的重复调用。

设定的数据通过

索引.wxml

循环输出。因为需要做滚动加载，所以用了小程序

-看法

成分。

上面的%%20代码中，绑定了两个事件函数：一个是下拉事件

，一个是点击跳转文章页面的事件

。

//%20下拉刷新:%%20(event)%20{%20%20%20%20var%%20=%;%20%20%20%.({%20%20%20%20 %20 %20%20%:%.data.page%20+%201%20//页+1%20%20%20%20});%20%20%20%.log('%:' %20 +%.data.page);%20%20%20%.({%:%.data.page%20});},%20//%20路由导航到文章内页： %%20(event )%20{%20%20%20%.log('');%20%20%20%20var%20id%20=%..id;%20//%20id%20这里其实是%20中的文章ID需要传递到%20页面%20%20%20%20var%20url%20=%20'..//?id='%20+%20id;%20 %20%20%20wx .({%20%20%20%20%20%20%20%20url:%20url%20%20%20%20})}

4.%20构建文章详情页面

文章页面使用的%20API%20地址是

/wp-json/wp/v2/posts/{id}

.同样地，由

wx。

接口访问%20URL，然后将数据渲染到%%20页面。

代码与上面类似，不再重复。 但需要提醒的是，这涉及到如何将富文本转换为微信小程序可以识别的%%20的问题。

因为在获取到的%%20数据中，文章的正文部分是一段%%20代码。 如果直接向小程序输出%%20会报错。

我们需要将这个%%20代码转换成微信小程序%%20语言。 我将在下一章介绍这个过程。

4.%20阅读记录页

阅读记录页面用于显示用户的浏览历史记录。 直接按照官方的%%%20例子来做。

该页面主要用到以下两个接口：本地缓存相关接口和用户授权相关接口（

wx.登录

,

wx。

等待）。

从用户体验的角度来看，不应该一开始就向用户申请授权，而应在页面有需要时才申请。 同时，用户拒绝授权时也应该得到妥善处理。

关注“了解小程序”微信公众号，在微信后台回复“用户信息”，看看小程序如何正确获取用户信息。

记录的文章阅读历史数据以本地缓存的形式保存在客户端，而不是保存在云端。 因此，“阅读记录仅保存在本设备中”的提醒是有必要的。

同时，根据小程序缓存限制，我将记录限制设置为%2020%20篇。

//%20调用API从本地缓存获取读取记录并记录 var%%20=%20wx.('')%20||%20;//%20过滤重复值 if%20(logs. %20> %200)%20{%20%20%20%%20=%.(%20(log)%20{%20%20%20%20%20%20%20%%20log[0] %20!==%20id;%20%20%20%20});}//%20如果超过指定数量 if%20(logs.%20>%2019)%20{%20%20%20 ％。流行音乐; //去掉*后一个}%.([id,%.data.title.]);wx.('',%);

上面的代码实际上是放在

.js

因为我需要保存文章%20ID%20和标题，并且只

.js

，这两类数据会同时获得。

*后，我需要

日志.js

的

在生命周期函数中，绑定一个更新数据的函数：

:%(cb){%20%20var%%20=%;%20%20//%%20%20%.({%20%20%20%:%20(wx.('')%20 ||%20).map(%20(log)%20{%20%20%20%20%20%%20log;%20%20%20%20})%20%20})},

开发过程中我踩过的坑

本章主要记录开发过程中遇到的一些坑以及我采取的解决方案。

1.%20Tab%20Bar%20的图片问题

小程序官方声称支持%20SVG%20图片，但%20tab%20bar%20不支持%20SVG%20图片。

官方建议使用%2081%20px%20×%2081%20px%20大小的%20PNG%20图像，但这仍然有点棘手。

建议设计时%20%20%20tab%20bar%20图标要稍微透明%，否则真机上图标会很大。

2.%20图片防盗链%%20设置

如果您托管图片的服务器有防盗链处理，您必须

把它放到白名单里。记住，这个白名单不是

。

3.

图像

组件的绝对路径必须以%%20开头

图像

成分

源代码

绝对路径，在%20web%20开发中允许类似的东西

///图片.png

协议名称的这种省略是存在的。

这种图片路径在微信网页开发工具中也能正常显示。 但在真机上无法正常加载。 在真机上必须是HTTPS开头的绝对路径。

如果服务器数据端难以处理，可以使用如下函数来处理：

// 补全 URL 中缺失的 (url) { if (!/^(f|ht)tps?:\/\//i.test(url)) { url = "https:" + url; 网址； }

4、开发工具小程序UA与实际UA不同

开发工具中模拟的小程序UA类似这样：

... /53.0.2785.143 /537.36 /

从Nginx日志中我们可以知道真机上运行的UA实际上是微信的UA：

... //6.6.0 /WIFI /zh_CN

在某些情况下需要注意这些差异。

5.默认Flex布局

如果您是基于官方示例代码开发小程序，建议先将其删除。

应用程序.wxss

Flex布局相关代码。 这样做会减少遇到奇怪的样式问题的机会。

6、坑

小程序使用的富文本转换使用的是这个第三方库。 使用的时候发现了很多坑（不过这个库是目前*实用的）。

其中之一是将全局代码字符替换为

wx-

，作者的初衷是对code标签进行这样的替换，但可能一不小心就犯了错误。

唯一的解决方案是暂时删除该代码。

另外，当使用

图像

在组件中

源代码

属性，多一个逗号会被解析。

看图说话：

上图也很好的解释了上面的坑和图片路径HTTPS开头的坑。 解决方案是先更改源代码（

.js

） 修理：

// 修复：img 标签数组包含空字符 if ([0] == ''){ .(0, 1);}

关于富文本，好消息是官方的富文本组件已经发布了。

关注“了解小程序”微信公众号，在微信后台回复“富文本”，查看小程序富文本组件新能力解读。

*后的话

至此，我已经详细介绍了小程序的开发流程。 接下来就是提交官网，耐心等待审核结果通知。

整个开发过程其实并不算太困难。 如果你之前使用过Vue等MVVM框架，那么整个开发过程基本上就是看官方文档就可以了。

“极客”小程序使用链接

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等