258资源分享网

本站微信小程序版“DeveWork极客”在中文WP 圈子可谓是一直被模仿，从未被超越。如今快速迭代，写作本文的现在是1.6 版本。作为“WordPress 开发微信小程序”系列的第四篇，记录的是v1.3 ~ v1.6 的开发要点。

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

直接从v1.2 到v1.6 并不是我要做版本帝，确实迭代了这四个版本，也提交审核了四次，只不过有两次提交是为了修复严重的bug。本文的展开方式跟之前的稍微不一样。建议先看完之前的文章再看本文：

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

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

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

v1.6 最重磅功能是实现小程序页面“文章内链”可跳转，不信你可以点击任意蓝色链接看看。相信你也明白，所谓“文章内链”，本质上就是WordPress 的文章页URL。在小程序上Jeff 是过滤了非devework.com 的外链与非文章页URL。

具体技术实现就不说了，因为要改动的文件还蛮多的。对于外链与非文章页URL 的过滤上也可能还存在漏网之鱼。值得一说的是：跳转是用wx.redirectTo接口而非wx.navigateTo，因为后者在使用时候会保留当前页面，跳转到应用内的某个页面；而小程序规定页面路径只能是五层。如果用户层层点击，切换了五篇文章后续就无法响应了——如此用户可能会认为你做的小程序有问题。

而wx.redirectTo因为是“关闭当前页面，跳转到应用内的某个页面”的方式，所以基于用户体验考虑，第一次点击文章内链时会有一个温馨提醒：

小程序最近新出了wx.setTopBarText接口用来动态设置置顶栏文字内容。v1.6 也加上了这个功能，具体的标题就跟分享时候的标题保持一致就行了。

使用这个接口，官方文档上有一句“调用成功后，需间隔5s 才能再次调用此接口”，Jeff 的处理方式是setTimeout() 5s 后再调用这个接口。

// https://devework.com/wordpress-weapp-4.html // 设置置顶标题栏 setTimeout(() => { wx.setTopBarText({ text: title }); }, 5000);  

现在借助wx.setEnableDebug接口实现上线的正式版小程序中启用vconsole，但不得不说，有个小坑：如果要用这个接口，一般都是通过在某些地方埋入点击事件的方式（类似彩蛋）开启。但因为小程序本身默认没有做用户鉴权，只要知道了是点哪里打开，**任何用户**都能打开！Jeff 还以为只有绑定的小程序管理者身份的微信用户才能打开。

综上所述，使用wx.setEnableDebug需要开发者本身做一些鉴权判断。具体方式就自行发挥想象力，就不分享自己的实现方式了。

如果要做vconsole 的线上toggle（即当前是打开的，点击“彩蛋”就关闭；当前是关闭的，点击“彩蛋”就开启），分享下我配合localStore 实现的代码：

// https://devework.com/wordpress-weapp-4.html // toggle vconsole let debugFlag = wx.getStorageSync('openDebug') || false; console.log(debugFlag); if (!debugFlag) { wx.setEnableDebug({ enableDebug: true }); wx.setStorage({ key: "openDebug", data: true }) } else { wx.setEnableDebug({ enableDebug: false, success: function (res) { console.log(res.data) } }); wx.setStorage({ key: "openDebug", data: false }) }  

“DeveWork极客”小程序首页是类似无限加载（下拉刷新）的文章的交互，随着用户往下拖动屏幕不断请求数据。当到达一定的数据量的时候，会出现“exceed max data size!event_name=custom_event_appDataChange,size=xxxxx”的错误，如下面的截图所示：

不用猜也知道是this.setData 一次性设置的data 过大导致的。处理方式上可结合如下两种方式：