WordPress 网站开发“微信小程序”实战(五)

本站WordPress +“微信小程序”实战系列文章已经到了第五篇,这次记录的是“DeveWork极客”小程序v2.0 的更新。2.0 版本在UI 上改动不大,但是“内核”却做了大改动——这些改动旨在提升小程序运行速度及降低性能消耗。

如果你没有看过本小程序,可以通过下面的小程序码进入体验。注意看文章的此时你扫码进入的版本可能不是2.0 版本了。

还是一样,如果你是第一次看本系列文章,建议先过目之前的文章:

《WordPress 网站基于REST API 开发“微信小程序”实战》

《WordPress 网站开发“微信小程序“实战(二)》

《WordPress 网站开发“微信小程序“实战(三)》

《WordPress 网站开发“微信小程序“实战(四)》

本系列文章虽然是WordPress 作为角色之一来写,但小程序的部分其实是共通的,如果你是开发小程序的,不妨也一看。坑都是在那,而我却帮你提前踩了不少。

重磅功能

前言

将WordPress 作为小程序的后端,建议是做一些针对性的优化(如《WordPress REST API 定制化输出》)以减少HTTP 请求传输过程中不必要字节数。Jeff 本身对自己的WordPress 做了很好的优化,但作为小程序的坚实后端,对此产生的效果还是不满足啊。

以WordPress 作为后端驱动的小程序,一般而言是资讯(内容)展示型的小程序,往往涉及到一些额外的数据处理,如借助wxParse 做富文本转化,日期等数据段的转义。这些放在服务端(WordPress)或者客户端(小程序)中做都可以,但一般而言我们希望是在服务端就能完成。

另外,作为内容展示型小程序,对于数据的实时性要求不高,所以很有必要做相关的缓存策略。WordPress 本身有不少成熟的缓存方案,但对于小程序而言我们可以做到更多。

改进

基于以上总总,开发“DeveWork极客”小程序2.0 版本时,Jeff 对整个小程序后端做了如下的架构变化:

1)原来的WordPress 端除了现有的优化,基本不做其它处理。

2)用Node + Redis 写了一个小型的后端,用来转发与缓存 WordPress REST API,Redis 作为内存数据库的缓存机制确保了读过程的快速;这个额外写的后端承载的另外功能是,将原本在小程序端进行的数据处理(如wxParse 的html2json、评论数据重新排序等)搬到这个后端进行。小程序端基本上只是纯数据的渲染,大大降低了小程序端的运行性能要求及提高运行速度。

用下面的图直观表示就是:

效果

实施了以上的效果如何呢?让我们来看下。

1)在尽量保证其它同等条件下,对某篇文章的请求结果对比:

2)原REST API 数据对比:

实际使用起来的对比效果么,就见仁见智了。在我看来,因为本来就优化得很好,所以并没有“立竿见影”的那种效果,倒是锦上添花了。

其它

除了后端的变化,在客户端(小程序端)还做了如下的优化工作:

1)预加载与本地localStore 缓存。当用户进入“DeveWork极客”小程序首页,有很大的概率是会去点击第一篇文章,因此在加载完文章列表并展示后会去请求第一篇文章的文章详情数据并缓存到LocalStore 中。因为异步的关系用户是无感知的,而当用户真正点击了第一篇文章会直接加载LocalStore 的内容——这时候用户感觉到的就是快。

2)根据像素密度(pixelRatio)进行图片的云端处理。在这里就不解释“像素密度”的含义了,通俗地举个例子:原来600x600 大小的图片在iPhone7p(pixelRatio =3)上是最佳清晰度(兼顾清晰度与文件大小的“最佳”)的,那么在iphone7(pixelRatio =2)则是400x400 大小就好,再小则不清晰,再大则浪费。屏占比可以通过wx.getSystemInfo()小程序接口获得。

关于小程序的性能优化上,后面Jeff 会专门写一篇文章,敬请关注。

新增功能

文章详情页的FixBar

为了配合新增的评论 + 收藏功能,2.0 版本在文章详情页增加了一个浮动的FixBar,上面有“返回+写评论+评论数+收藏+分享”的几个icon 及其入口。开诚布公,这个FixBar 借鉴于IT之家的移动端相关页面,对,设计上非原创。

返回功能,配合实战(四)提到的文章内链功能做了如下区分:当是通过文章内链进来的文章,icon 是HOME 且点击返回首页。其它情况则是返回上一层页面。

写评论跟评论数的入口,后文会有介绍。值得吐槽的是,点击评论数的icon 会跳转到评论区域,感觉小程序的wx.createSelectorQuery()接口还是有许多bug。

收藏与分享入口,实现起来也简单,就不多说了。

查看评论

2.0 版本另外一个重要的功能是加入了评论相关功能。评论列表的展示用到的WordPress REAT API 接口是https://example.com/wp-json/wp/v2/comments?post={id}&per_page={per_page}&page={page}

文章评论一般放在文章详情页面,为了兼顾用户体验,Jeff 是处理成按需加载的方式——默认在文章页面进入的时候不加载评论数据,而是用户拉到页面底部的时候才产生请求。毕竟有些用户可能连文章第一段都没看完就离开的,按需加载才是王道。

另外,上面的Comment API 默认的数据段是按照时间排序的评论数组,在 WordPress 中存在的父子评论关系在 API 中是通过parentid两个字段联系起来。为了在小程序前端的评论列表中也体现这种父子评论关系,必须要进行相关数据结构处理。Jeff 在这里是仅展现一级的父子评论关系,数据结构处理是直接放到上一章节的提到的“Node 后端”上进行,返回到小程序端的已经是二次处理好的数据(包括评论时间改成"xx前"这种格式),小程序端直接渲染数据即可。

另外,还与本站评论表情打通,使得在小程序端也能正常显示这些自定义表情图片。具体的实现方式其实也很简单,比如哭的表情,将:cry:转化为小程序的Image view 然后添加相应CSS 就好(效果见上图)。

发布评论

WordPress 的发布评论的接口是https://example.com/wp-json/wp/v2/comments?author_name={昵称}&author_email={邮箱}&content={评论内容}&post={文章id},POST 方法。不过你默认发过去会显示如下:

为了安全,WordPress 默认是不允许开启匿名评论。但可以通过如下代码去hack 下:

// https://devework.com/wordpress-weapp-5.html // REAT API 允许匿名评论 function dw_rest_allow_anonymous_comments() { return true; } add_filter('rest_allow_anonymous_comments','dw_rest_allow_anonymous_comments');

开启匿名评论后,请自行采取一些措施确保该接口不会被滥用,Jeff 的话是采用类似JWT(JSON Web Tokens)的验证形式确保安全的。

小程序的用户常规能获取到的昵称+头像URL,可以作为评论的基本信息。WordPress 中的评论则是昵称+邮箱+网址(可选)作为基本信息。为了将这两种账户体系打通,Jeff 是把小程序的用户头像URL 作为WordPress 评论的“网址”字段,然后在PC 的主题上也做了相应的改造。

小程序端的评论输入框,本来是想用textarea 组件来做,发现有个百思不得其解的坑:采用浮动定位,form 下的是textarea+submit btn 组合,这个时候在手机上点击按钮死活退出不了焦点,即使强制去控制focus属性为false。后面实在不想再花时间去排查,明智地用input组件算了。

另外值得一提,发现在小程序发布评论,评论内容包含emoji 的不能正常发布。后面排查了,应该是emoji 编码问题导致的,现阶段处理方式是过滤掉emoji。

收藏功能

收藏功能跟阅读浏览功能类似,具体代码就不展示了,也是利用LocalStore。目前仅支持保存在本机设备,后面会接入云端同步功能。

相关文章

相关文章的功能,Jeff 为了减少额外的请求,是集成到文章详情的API 上去的。5篇相关文章的实现,默认是展示该文章同标签下的文章,如果不足5篇,则通过同分类的文章补足。在这里献上PHP 的核心代码:

// https://devework.com/wordpress-weapp-5.html // 在rest api 上输出相关文章 function raa_get_related_posts_by_id( $postid ) { $post_num = 5; $exclude_id = $postid; $posttags = get_the_tags(); $i = 0; $result = array(); if ( $posttags ) { $tags = ''; foreach ( $posttags as $tag ) { $tags .= $tag->term_id . ','; } $args = array( 'post_status' => 'publish', 'tag__in' => explode( ',', $tags ), 'post__not_in' => explode( ',', $exclude_id ), 'ignore_sticky_posts' => 1, 'orderby' => 'comment_date', 'posts_per_page' => $post_num ); $tags_query = get_posts( $args ); foreach ( $tags_query as $tag_post ) { $temp = new stdClass(); $temp->id = $tag_post->ID; $temp->title = $tag_post->post_title; $featured = get_post_meta( $tag_post->ID, 'featured', true ); if ( $featured ) { $temp->featured_image = $featured; } else { $temp->featured_image = get_post_meta( $tag_post->ID, 'thumb', true ); } $result[] = $temp; $exclude_id .= ',' . $postid; $i ++; } wp_reset_query(); } if ( $i < $post_num ) { $cats = ''; foreach ( get_the_category() as $cat ) { $cats .= $cat->cat_ID . ','; } $args = array( 'category__in' => explode( ',', $cats ), 'post__not_in' => explode( ',', $exclude_id ), 'ignore_sticky_posts' => 1, 'orderby' => 'comment_date', 'posts_per_page' => $post_num - $i ); $cats_query = get_posts( $args ); foreach ( $cats_query as $cat_post ) { $temp = new stdClass(); $temp->id = $cat_post->ID; $temp->title = $cat_post->post_title; $featured = get_post_meta( $cat_post->ID, 'featured', true ); if ( $featured ) { $temp->featured_image = $featured; } else { $temp->featured_image = get_post_meta( $cat_post->ID, 'thumb', true ); } $result[] = $temp; $exclude_id .= ',' . $postid; $i ++; } wp_reset_query(); } return $result; }

代码有点挫,毕竟好久没有写PHP 了。如果你有更好的实现方式,欢迎分享。

其它优化

其它的优化功能仅罗列下:

1)文章页面、“我”的tab 页面在UI 上做了一些修改;

2)修复了在安卓上一些样式问题;

3)增加了一些广告入口;

4)优化了全局Loading 的展示方式;

5)图片增加个placeholder,并配合新的1.5基础库在某些地方启用 lazyload。

本文完。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

简单粗暴,以小见大 -- 实现一个按钮的前端组件

按钮,一个button,一个div,一个a标签,都可以做成按钮。现在要把它做成一个前端组件,那前端组件是什么? 定义很多,我随便网上查一个,“指一些设计为通用性...

2317
来自专栏Bug生活2048

告别单调工作系列——利用python再次拯救漂亮妹子

记得帮妹子搞定自动提交表单之后的第三天,妹子端着奶茶乐呵呵的来找我,和我一番畅谈理想,又指点江山之后,终于切入了正题。

1052
来自专栏开源项目

精选 6 款程序员自己开发的文本编辑器 | 码云周刊第 51 期

相信很多小伙伴在编辑文本都会使用 Windows 自带的记事本,但是记事本由于功能所限,无法满足办公需要,下面推荐 6 款我们“程序猿”自己做的文本编辑器,普通...

3926
来自专栏腾讯移动品质中心TMQ的专栏

TMQ第五期沙龙回顾|Selenium自动化测试框架

HTTP接口测试平台构建和运行 活动时间:2016年7月28日 QQ群视频交流 活动介绍: TMQ QQ群沙龙第四期分享 本次分享的主题是H...

22210
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙回顾|Appium:轻松玩转混合自动化测试

活动介绍 TMQ在线沙龙第三十九期分享活动圆满结束啦! 本次分享的主题:Appium-轻松玩转混合自动化测试。 共有184位测试小伙伴报名参加活动。 想知道活动...

2898
来自专栏极客猴

搭建手机抓包环境

智能手机的普及,这使得移动互联网成为另一个流量巨头。越来越多的公司也会转而直接提供 App 来展示内容。例如微信以及其生态(微信公众号、小程序)、抖音等。这也说...

3012
来自专栏ytkah

微信竟然还能当笔记用!【微信高级教程8】

  微信除了用来聊天沟通、刷朋友圈、看公众号外,很多朋友还不知道微信还能当笔记用吧?记笔记?没错,新版微信的收藏功能就隐藏这样的神秘技能。厦门就随ytkah一起...

28711
来自专栏Spark学习技巧

Flink系列之时间

一,fink支持的时间 Flink的流式应用支持不同的时间观。 1,处理时间 处理时间是指执行相应操作的机器的系统时间。 当流程序采用处理时间运行时,所有基于时...

2755
来自专栏魏艾斯博客www.vpsss.net

解决宝塔面板环境的 wordpress 网站页面 404 错误

1K4
来自专栏知晓程序

小程序入口可以被删除或隐藏吗?| 小程序问答 #27

我们在第 25 期「小程序问答」中,为大家揭秘了「删除小程序之后,会发生的事情」。

782

扫码关注云+社区

领取腾讯云代金券