文本%20|%

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

本文记录了小程序第一个版本的开发过程。

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

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

小程序如何读取%%内容？

%20是在%204.6%20版本推出的，简单来说就是通过%%20请求完成客户端与服务端的数据交互解决方案。

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

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

使用%%可以在一个网站上创建不同的客户端（%20或者%%20的%以及微信小程序）并共享一个数据库。

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

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

，您可能会看到类似这样的返回。

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

/wp-json/wp/v2/

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

在 %%20 中，它被称为“终点”()。

和

页

是参数。

上面的%表示输出第%201%20页（5%20篇文章为%201%20页）最新的%205%20篇文章的数据。

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

%20%%%%20已经非常完整了，它可以处理文章数据，页面数据，用户数据等。

使用%%20作为小程序的后端确实节省了不少人力，至少对于我们前端狗来说不用再写那些硬梆梆的后端代码了。

开始制作%20WP%20小程序

在上一章简单介绍了原理之后，下面我们就以我们网站开发的“%”小程序的第一个版本为例，介绍一下其中的三个页面（首页、内容页、阅读记录页）大致是怎么制作的。

1.%20准备

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

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

其次，服务器确保其配置正确（但归档并不是一定需要的）。

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

2.%20项目结构

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

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

3.%20构建文章列表页

小程序首页为文章列表页，启动小程序时会展示最新的%205%20篇文章，之后会通过下拉流的方式加载更多文章。

这里我们使用 %%%%20 是

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

。

.js

该文件的核心是

wx.

接口，访问上面的%%%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%:%.data..(.data.map(%20(item)%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%20%20%20}%20%20});}

我把这些代码封装在一个函数里，方便后续重复调用。

数据由设置

.wxml

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

-看法

成分。

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

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

。

//%20下拉刷新：%%20()%20{%20%20%20%%%20=%;%20%20%20.({%20%20%20%20%20%20%20 %20%:%.data.page%20+%201%20//page+1%20%20%20%20});%20%20%20%.log('%:'%20+% .data.page);%20%20%20.({%:%.data.page%20});},%20//% 通过导航到文章页面：%%20()%20{%20%20%20].log('');%20%20%20%%20id%20=%..id;%20// %20这里的id其实就是 %20中的文章id，需要传递给%20页面%20%20%20%%%%20=%20'..//?id='%20+%20id; %20%20%20%20wx.({%20%20%20%20%20%20%20%20%:%%20%20%20%20})}

4.%20构建文章详情页

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

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

同样地，

wx.

接口访问%，然后把数据渲染到%%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%20=%.(%20(log)%20{%20%20%20%20%20%20%20%20%[0]%20!= =%20id;%20%20%20%20});}//%20如果超过指定数量 if%20(logs.%20>%2019)%20{%20%20%20].pop;//去除最后一个 }%.([id,%.data..]);wx.('',%);

上面的代码实际上放在

.js

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

.js

，才可以同时获得这两类数据。

最后，我还需要

日志.js

的

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

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

我在开发过程中踩过的坑

本章主要记录开发过程中的一些坑以及我采用的解决办法。

1.%%%20图片问题

官方小程序声称支持%%20张图片，但是%%%20并不支持%%20张图片。

官方建议使用 %%20 图片，尺寸为 %2081%20px%20×%2081%20px%20，但这还是有点坑。

建议在设计 %%%20 图标时为其留出一些透明度，否则图标在实际设备上会显得非常大。

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

如果你托管图片的服务器有防盗链处理功能，你需要

将其放入白名单。请记住，此白名单不是

。

3.

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

成分

源码

%%20 开发中允许使用绝对路径。

///图片.png

这省略了协议名称的存在。

这个图片路径在微信网页开发者工具里可以正常显示，但是在真机上无法正常加载，在真机上必须以绝对路径开头。

如果服务器数据不好处理，可以使用下面的函数来处理：

// 完成 URL 中缺失的 (url) { if (!/^(f|ht)tps?:\/\//i.test(url)) { url = ":" + url; } url;}

4.开发者工具里的小程序UA和实际UA不一样

开发工具里模拟的小程序UA是这样的：

.../53.0.2785.143/537.36/

从日志中我们可以看出真机上运行的UA其实是微信的UA：

... / /6.6.0 /无线网络 /

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

5. 默认弹性布局

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

应用程序.wxss

Flex 布局相关代码。这样做可以减少你遇到奇怪样式问题的概率。

6. 陷阱

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

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

wx-

作者原本的意图是针对代码标签做这样的替换，但是他可能错误地犯了一个错误。

唯一的解决办法是暂时删除该代码。

此外，使用时

在组件中

源码

属性将会有一个额外的逗号被解析。

图片与故事：

上图也解释了上面的坑，以及图片路径开头的坑，解决办法是先改源码（

.js

） 修理：

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

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

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

最后的话

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

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

「极客」小程序使用链接