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

作者: 纳兰央措 | 来源:发表于2018-12-06 12:02 被阅读89次

最近在开发我的个人小程序（微信搜索：叶赫先生）以及帮别人开发的过程中，总是遇到一些比较特(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;
  },

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读