微信小程序教程 | 如何调用指定分类下某个标签归类文章?

最近在开发我的个人小程序(微信搜索:叶赫先生)以及帮别人开发的过程中,总是遇到一些比较特(guai)殊(yi)的需求,以满足各位大佬的特殊癖好。

昨天有位大佬在群里提问:

怎么调用wp里指定分类下的指定标签文章,比如想调用【公司新闻】分类下,打了【腾讯】标签的所有文章?

这个需求乍一看上去,卧槽,有些难度!

按照数据的调用逻辑,先调用指定的这个分类ID,读取该ID下的所有文章,以json的形式输入,然后再加上指定的标签ID进行数据过滤,再调用。嗯,貌似逻辑上是这样。

巴特,你们还是太小瞧PHP的强大了。

其实,梳理一下这个需求,只有两点:

1,指定分类ID

2,指定该分类ID下包含某个标签的文章

梳理好了,那结合PHP调用数据时的强大“并发”,把调用格式同步请求一下,数据不就完美的出来了嘛?例如:

https://www.yeehee.cn/wp-json/wp/v2/posts?categories=4&tags=21

也就是说我们只要在数据请求的同时,把categories=4(指定分类)和tags=21(指定标签)按照我们的需求顺序做同时请求,返回json结果就可以了。同样,再加上一些其他的同步请求,比如每页的数量,文章排序方法等。例如:

https://www.yeehee.cn/wp-json/wp/v2/posts?per_page=10&orderby=title&order=desc&page=1&categories=4&tags=21

把请求链接放到Postman里面做数据请求测试,得到返回json结果:

[
   {
       "id": 160,
       "date": "2018-11-05",
       "slug": "how-to-add-video-plugins-to-wechat-miniprogram",
       "link": "https://www.yeehee.cn/how-to-add-video-plugins-to-wechat-miniprogram.html",
       "title": {
           "rendered": "如何利用WordPress自定义栏目功能实现微信小程序视频功能?"
       },
       "content": {
           "rendered": "微信小程序的视频播放功能折腾了很久,之前也写了相关的文章,<a href=\"https://www.yeehee.cn/how-to-add-a-video-to-miniprogram.html\" target=\"_blank\" rel=\"noopener\">如何在小程序端添加视频并正常播放?</a>但是腾讯视频的https开头的url地址中的vid是变动的,小程序端无法正确解析到变动后的vid地址,所以自然也就无法正常播放,真是糟心!\r\n\r\n今天突发奇想,既然地址一直变动导致无法正确解析,那直接拿到腾讯视频的最终vid,然后配合使用腾讯视频官方小程序插件,在小程序的wxml中调用这个函数的value值,不就解决了嘛?\r\n\r\n说干就干!那么问题又来了:但是这个vid的值写到哪儿呢?\r\n\r\n研究了一下功能,原本我是配合模板功能,添加了一段函数,如图:\r\n\r\n<img class=\"alignnone size-full wp-image-162\" src=\"https://www.yeehee.cn/wp-content/uploads/2018/11/2018110514321630.png\" alt=\"\" width=\"764\" height=\"215\" />\r\n\r\n不过这个功能太麻烦,需要重新改动模板,添加自定义字段。\r\n\r\n说到自定义字段,突然想起来在文章页面,有个自定义字段的功能,那不是正好拿来使用吗?点击<code>写文章</code>,然后右上角有个<code>显示选项</code>,点开后,把自定义栏目功能勾选,如图:\r\n\r\n<img class=\"alignnone size-full wp-image-163\" src=\"https://www.yeehee.cn/wp-content/uploads/2018/11/2018110514322256.png\" alt=\"\" width=\"1183\" height=\"239\" />\r\n\r\n这时候下方就出现了一个自定义栏目的功能,点击输入新栏目,\r\n\r\n<img class=\"alignnone size-full wp-image-164\" src=\"https://www.yeehee.cn/wp-content/uploads/2018/11/2018110514323332.png\" alt=\"\" width=\"911\" height=\"272\" />\r\n\r\n这里的名称自定义输入你想要的字段名称,例如我的是:<code>weixin_video_value</code>,后面的值,就填写腾讯视频的vid值(如何获取腾讯视频的vid最终值,自行google一下),如图:\r\n\r\n<img class=\"alignnone size-full wp-image-161\" src=\"https://www.yeehee.cn/wp-content/uploads/2018/11/2018110514320569.png\" alt=\"\" width=\"916\" height=\"276\" />\r\n\r\n全部搞定之后,编辑你的文章内容,然后发布,到这里文章就会默认有一个自定义的腾讯视频字段。\r\n\r\n但是如何在小程序内调用这个自定义字段呢?\r\n\r\n找到WordPress for app的插件中的<code>custom-fields-rest-prepare-post.php</code>文件,在里面添加一段输入字段函数:\r\n\r\n<pre class=\"pure-highlightjs\"><code class=\"php\">$weixin_vid = get_post_meta($post_id, 'weixin_video_value', true); // 增加微信小视频调用vid\r\n$_data['wexinvideovid'] = $weixin_vid ;</code></pre>\r\n\r\n注意:$post_id后面的字段名称一定要跟你刚刚自定义的字段名称一致,否则就调不出相关的字段。\r\n\r\n保存,刷新缓存,然后进入小程序的后台,设置-插件管理,点击添加插件,搜索:腾讯视频,添加,然后自行Google一下配置教程,这里不再赘述。\r\n\r\n最后,在小程序的源代码中,在你想要添加小视频的位置,添加以下代码:\r\n\r\n<pre class=\"pure-highlightjs\"><code class=\"xml\">&lt;view class='video_st'&gt;\r\n  &lt;block wx:if=\"{{detail.wexinvideovid}}\"&gt;\r\n    &lt;txv-video vid=\"{{detail.wexinvideovid}}\" playerid=\"txv0\" autoplay=\"false\"&gt;&lt;/txv-video&gt;\r\n  &lt;/block&gt;\r\n&lt;/view&gt;</code></pre>\r\n\r\n到这里,就大功告成了!"
       },
       "excerpt": {
           "rendered": "如何利用WordPress自定义栏目功能实现微信小程序视频功能?\n",
           "protected": false
       },
       "featured_media": 167,
       "categories": [
           4,
           23
       ],
       "tags": [
           21,
           19
       ],
       "post_thumbnail_image": "https://www.yeehee.cn/wp-content/uploads/2018/11/2018110613335635.jpg",
       "content_first_image": "https://www.yeehee.cn/wp-content/uploads/2018/11/2018110514321630.png",
       "post_medium_image_300": "https://www.yeehee.cn/wp-content/uploads/2018/11/2018110514321630.png",
       "post_thumbnail_image_624": "https://www.yeehee.cn/wp-content/uploads/2018/11/2018110514321630.png",
       "post_tags": [
           {
               "term_id": 21,
               "name": "小程序视频",
               "slug": "%e5%b0%8f%e7%a8%8b%e5%ba%8f%e8%a7%86%e9%a2%91",
               "term_group": 0,
               "term_taxonomy_id": 21,
               "taxonomy": "post_tag",
               "description": "",
               "parent": 0,
               "count": 2,
               "filter": "raw"
           },
           {
               "term_id": 19,
               "name": "微信小程序",
               "slug": "%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f",
               "term_group": 0,
               "term_taxonomy_id": 19,
               "taxonomy": "post_tag",
               "description": "",
               "parent": 0,
               "count": 4,
               "filter": "raw"
           }
       ],
       "author_name": "叶赫先生",
       "author_tx": "",
       "total_comments": 5,
       "category_name": "微信小程序",
       "like_count": "24",
       "pageviews": 649,
       "wexinvideovid": "",
       "next_post_id": null,
       "next_post_title": null,
       "previous_post_id": 139,
       "previous_post_title": "如何优化图片大小提升网站加载速度?",
       "_links": {
           "self": [
               {
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/posts/160"
               }
           ],
           "collection": [
               {
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/posts"
               }
           ],
           "about": [
               {
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/types/post"
               }
           ],
           "author": [
               {
                   "embeddable": true,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/users/1"
               }
           ],
           "replies": [
               {
                   "embeddable": true,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/comments?post=160"
               }
           ],
           "version-history": [
               {
                   "count": 0,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/posts/160/revisions"
               }
           ],
           "wp:featuredmedia": [
               {
                   "embeddable": true,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/media/167"
               }
           ],
           "wp:attachment": [
               {
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/media?parent=160"
               }
           ],
           "wp:term": [
               {
                   "taxonomy": "category",
                   "embeddable": true,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/categories?post=160"
               },
               {
                   "taxonomy": "post_tag",
                   "embeddable": true,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/tags?post=160"
               }
           ],
           "curies": [
               {
                   "name": "wp",
                   "href": "https://api.w.org/{rel}",
                   "templated": true
               }
           ]
       }
   },
   {
       "id": 135,
       "date": "2018-10-05",
       "slug": "how-to-add-a-video-to-miniprogram",
       "link": "https://www.yeehee.cn/how-to-add-a-video-to-miniprogram.html",
       "title": {
           "rendered": "如何在小程序端添加视频并正常播放?"
       },
       "content": {
           "rendered": "最近在折腾小程序时,发现在wordpress端使用<code>embed</code>标签添加视频时,在PC端可以正常显示,但是在小程序端不能正常显示。\r\n\r\n在百度了很多教程之后,发现只能使用麻烦一点的过程,才能让它正常显示,更重要的是没有广告!\r\n\r\n方法如下:\r\n\r\n1,首先找一个腾讯视频的独立地址,如:<code>https://v.qq.com/x/page/l0376bs3735.html</code>,其中<code>l0376bs3735</code>就是视频的源vid数据\r\n\r\n2,把vid放到这个格式中,格式为:\r\n<pre class=\"pure-highlightjs\"><code class=\"json\">http://vv.video.qq.com/getinfo?vids=l0376bs3735&amp;platform=101001&amp;charge=0&amp;otype=json</code></pre>\r\n,替换掉其中vids的值\r\n\r\n3,替换之后,把整段网址放到浏览器内回车,得到一段json数据,如下:\r\n<pre class=\"pure-highlightjs\"><code class=\"json\">QZOutputJson={\"dltype\":1,\"exem\":0,\"fl\":{\"cnt\":2,\"fi\":[{\"id\":100701,\"name\":\"msd\",\"lmt\":0,\"sb\":1,\"cname\":\"标清;(270P)\",\"br\":35,\"profile\":2,\"drm\":0,\"video\":1,\"audio\":1,\"fs\":2661404,\"sl\":0},{\"id\":2,\"name\":\"mp4\",\"lmt\":0,\"sb\":1,\"cname\":\"高清;(480P)\",\"br\":60,\"profile\":1,\"drm\":0,\"video\":1,\"audio\":1,\"fs\":5512897,\"sl\":1}]},\"hs\":0,\"ip\":\"120.85.107.109\",\"ls\":0,\"preview\":88,\"s\":\"o\",\"sfl\":{\"cnt\":0},\"tm\":1538733036,\"vl\":{\"cnt\":1,\"vi\":[{\"br\":60,\"ch\":0,\"cl\":{\"fc\":0,\"keyid\":\"l0376bs3735.2\"},\"ct\":1,\"drm\":0,\"dsb\":0,\"fmd5\":\"8d6f2341827800ad3a3a6fcea8da0b55\",\"fn\":\"l0376bs3735.mp4\",\"fs\":5512897,\"fst\":5,\"fvkey\":\"5F9F543C70BBA29AABF8AD5956A888AB682338AC32542747EA4FE200806EC776330864813EE323308C063717D6DAEE562BFE892845230FE75A8750C4B0EDEA14BBBED7E25D458047758742EF02E21232A792643411BF4431\",\"head\":0,\"hevc\":0,\"iflag\":0,\"level\":0,\"lnk\":\"l0376bs3735\",\"logo\":1,\"mst\":8,\"pl\":null,\"share\":1,\"sp\":0,\"st\":2,\"tail\":0,\"td\":\"88.24\",\"ti\":\"600个气球炸成了一支动画短片 幕后花絮\",\"tie\":0,\"type\":24,\"ul\":{\"ui\":[{\"url\":\"http://ugcbsy.qq.com/uwMRJfz-r5jAYaQXGdGnC2_ppdhgmrDlPaRvaV7F2Ic/\",\"vt\":136,\"dtc\":0,\"dt\":2},{\"url\":\"http://112.90.152.159/om.tc.qq.com/AgQtBU_zho2EChAAttiK-Nc-VmOXz8THBVa1mN-L0kk0/uwMRJfz-r5jAYaQXGdGnA9kHuThrz_e-WLttoOs8MuA/\",\"vt\":219,\"dtc\":0,\"dt\":2},{\"url\":\"http://ugcws.video.gtimg.com/uwMRJfz-r5jAYaQXGdGnAWU8PgBpGqZogfytEoZCSHk/\",\"vt\":106,\"dtc\":0,\"dt\":2},{\"url\":\"http://video.dispatch.tc.qq.com/\",\"vt\":0,\"dtc\":0,\"dt\":2}]},\"vh\":352,\"vid\":\"l0376bs3735\",\"videotype\":31,\"vr\":0,\"vst\":2,\"vw\":640,\"wh\":1.8181819,\"wl\":{\"wi\":[]},\"uptime\":1487326932,\"fvideo\":0,\"fvpint\":0,\"swhdcp\":0}]}};</code></pre>\r\n4,找到url的地址,如上图的<code>http://ugcbsy.qq.com/uwMRJfz-r5jAYaQXGdGnC2_ppdhgmrDlPaRvaV7F2Ic/</code>,后面加上其中fn的值,如:<code>l0376bs3735.mp4</code>,再加上fvkey的值,如:\r\n<pre class=\"pure-highlightjs\"><code>5F9F543C70BBA29AABF8AD5956A888AB682338AC32542747EA4FE200806EC776330864813EE323308C063717D6DAEE562BFE892845230FE75A8750C4B0EDEA14BBBED7E25D458047758742EF02E21232A792643411BF4431</code></pre>\r\n5,最终组合格式为:url + fn + '?vkey=' + fvkey,如:\r\n<pre class=\"pure-highlightjs\"><code class=\"json\">http://ugcbsy.qq.com/uwMRJfz-r5jAYaQXGdGnC2_ppdhgmrDlPaRvaV7F2Ic/l0376bs3735.mp4?vkey=5F9F543C70BBA29AABF8AD5956A888AB682338AC32542747EA4FE200806EC776330864813EE323308C063717D6DAEE562BFE892845230FE75A8750C4B0EDEA14BBBED7E25D458047758742EF02E21232A792643411BF4431</code></pre>\r\n6,把最终组合的值,写到video标签内的src中,<code>&lt;video src=\"\" controls=\"controls\" width=\"100%\"&gt;&lt;/video&gt;</code>,在编辑器的html格式下插入最终的完整代码:\r\n<pre class=\"pure-highlightjs\"><code class=\"html\">&lt;video src=\"http://ugcbsy.qq.com/uwMRJfz-r5jAYaQXGdGnC2_ppdhgmrDlPaRvaV7F2Ic/l0376bs3735.mp4?vkey=5F9F543C70BBA29AABF8AD5956A888AB682338AC32542747EA4FE200806EC776330864813EE323308C063717D6DAEE562BFE892845230FE75A8750C4B0EDEA14BBBED7E25D458047758742EF02E21232A792643411BF4431\" controls=\"controls\" width=\"100%\"&gt;&lt;/video&gt;</code></pre>\r\n以上,就大功告成了!\r\n\r\n效果展示:\r\n<video src=\"http://ugcws.video.gtimg.com/uwMRJfz-r5jAYaQXGdGnC2_ppdhgmrDlPaRvaV7F2Ic/m051554fbu2.mp4?vkey=BA0B50AB662BDB7A85A4CAF157507E5F215AA72D720143B2A711CB85CB23A2C9CF9555807B9560CBC982FB0C24734DAA80AD28251AEB2A7A16DCA756C202694324B61C3DEB5D79989BA91F9A05844A4171E1B7617BC46D152E8C1C4CC0644C31439E509D70F1C8B6\" controls=\"controls\" width=\"100%\" height=\"150\"></video>"
       },
       "excerpt": {
           "rendered": "小程序是个折腾的过程,特别是部分功能的实现。如何在小程序端显示视频并正常播放呢?\n",
           "protected": false
       },
       "featured_media": 136,
       "categories": [
           4,
           3
       ],
       "tags": [
           21,
           19
       ],
       "post_thumbnail_image": "https://www.yeehee.cn/wp-content/uploads/2018/10/2018100517581398.jpg",
       "content_first_image": "",
       "post_medium_image_300": "",
       "post_thumbnail_image_624": "",
       "post_tags": [
           {
               "term_id": 21,
               "name": "小程序视频",
               "slug": "%e5%b0%8f%e7%a8%8b%e5%ba%8f%e8%a7%86%e9%a2%91",
               "term_group": 0,
               "term_taxonomy_id": 21,
               "taxonomy": "post_tag",
               "description": "",
               "parent": 0,
               "count": 2,
               "filter": "raw"
           },
           {
               "term_id": 19,
               "name": "微信小程序",
               "slug": "%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f",
               "term_group": 0,
               "term_taxonomy_id": 19,
               "taxonomy": "post_tag",
               "description": "",
               "parent": 0,
               "count": 4,
               "filter": "raw"
           }
       ],
       "author_name": "叶赫先生",
       "author_tx": "",
       "total_comments": 6,
       "category_name": "微信小程序",
       "like_count": "17",
       "pageviews": 592,
       "wexinvideovid": "",
       "next_post_id": 160,
       "next_post_title": "如何利用WordPress自定义栏目功能实现微信小程序视频功能?",
       "previous_post_id": 115,
       "previous_post_title": "开启微信小程序评论功能后,如何对评论内容进行审核?",
       "_links": {
           "self": [
               {
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/posts/135"
               }
           ],
           "collection": [
               {
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/posts"
               }
           ],
           "about": [
               {
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/types/post"
               }
           ],
           "author": [
               {
                   "embeddable": true,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/users/1"
               }
           ],
           "replies": [
               {
                   "embeddable": true,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/comments?post=135"
               }
           ],
           "version-history": [
               {
                   "count": 0,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/posts/135/revisions"
               }
           ],
           "wp:featuredmedia": [
               {
                   "embeddable": true,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/media/136"
               }
           ],
           "wp:attachment": [
               {
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/media?parent=135"
               }
           ],
           "wp:term": [
               {
                   "taxonomy": "category",
                   "embeddable": true,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/categories?post=135"
               },
               {
                   "taxonomy": "post_tag",
                   "embeddable": true,
                   "href": "https://www.yeehee.cn/wp-json/wp/v2/tags?post=135"
               }
           ],
           "curies": [
               {
                   "name": "wp",
                   "href": "https://api.w.org/{rel}",
                   "templated": true
               }
           ]
       }
   }
]

可以看出得到的json结果,就是我们想要的数据。其中在json数据的categories和tags中,包含了我们指定的返回条件。

"categories": [
  4,
  23
],
"tags": [
  21,
  19
],

现在返回的json数据有了,那么在小程序里面如何调用呢?这就要利用我们现成的API接口,根据刚刚的请求链接改下需求,在需要调用的页面的函数内,做fetchData初始化,就能达到我们想要的效果了。

// 获取指定分类下包含指定标签的文章列表数据
getTagsPostsByCategories: function(categories) {
   var url = HOST_URI + 'posts?per_page=10&orderby=title&order=desc&page=1&categories=4&tags=21';
   return url;
 },
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容