在 WordPress 文章下方显示该文章的小程序码

在开发了基于 WordPress 的小程序后,就想在每篇文章下面加上这篇文章在小程序中的小程序码,微信扫一扫可以直接在小程序中查看该文章,于是就有了这篇文章 :(哈哈) 注意,下面的教程只适用于基于守望轩小程序模版开发的小程序,并且我是用 Header and Footer 插件来向文章下方添加代码的,因此下面我只给出核心的代码,而不是教你如何在 WordPress 文章后面添加内容(如要使用可自行查找添加的方法),还有就是代码使用的是 html 和 php 语言。

思路

先来说一说思路,基于守望轩小程序开发的小程序都要在 WordPress 中安装一个插件:“wp-rest-api-for-app”,这个插件提供了小程序所需要的各种 API,而我用到的就是获取小程序指定页面路径小程序码的 API,该 API 代码在“wp-rest-api-for-app/weixin-qrcode.php” 文件中,主要用到的就是“getWinxinQrcodeImg($request)”函数和“get_weixin_qcrodeimg_json($postid,$path)”函数。这两个函数,前者是注册为 WordPress 的 REST API 的函数,用来处理获取指定页面路径小程序码的请求,如果获取成功返回200状态码,否则返回其他状态码,是我主要用到的函数。而后者则是在前者里面调用的一个函数,用来向微信 API 获取该页面路径的小程序码并将其保存下来,如果成功则返回200状态码,否则返回500状态码。而后者并不是将前者传递过来的每个页面路径都发给微信 API 来请求二维码,而是一个路径请求一次后就将二维码保存到“wp-rest-api-for-app/qrcode/”目录下。后期判断该页面路径对应的小程序码是否存在,若不存在再向微信请求获取小程序码。

一直在说小程序页面路径,这个和文章有什么关系呢?每一篇 WordPress 文章都会有一个独一无二的 post id,而在小程序中,每一篇文章的页面路径都是“pages/detail/detail?id=文章 ID”,这样小程序的文章页面路径就和 WordPress 的文章联系起来了,而在“wp-rest-api-for-app/qrcode/”目录下存的小程序码的文件名则是“qrcode-文章 ID”的形式。

那么最终我的思路就是:在文章下方以 html 代码的形式显示一个图片标签,其中图片的地址则通过一个函数来获取,在该函数可以获取当前文章的 ID,并通过WordPress API 来请求该文章对应的小程序页面路径的二维码,如果得到的返回状态码是200,说明二维码已经在“wp-rest-api-for-app/qrcode/”目录下了,就可以直接返回或输出对应的二维码地址。

代码

思路有了,怎么做呢?看了关于 php 的 curl 模块后总算是写出来了能用的代码了:

<img src="<?php
$ID = get_the_ID();  // 获取当前文章ID
$data = array("postid"=>$ID,"path"=>"pages/detail/detail?id=".$ID);
$url = "https://blog.sunriseydy.top/wp-json/watch-life-net/v1/weixin/qrcodeimg";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);  // 从证书中检查SSL加密算法是否存在
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_AUTOREFERER,true);
$content = curl_exec($ch);
$code = curl_getinfo($ch,CURLINFO_HTTP_CODE);
curl_close($ch);
$content = json_decode($content);
if ($content->code == "success" && $content->status == "200" && get_post_status ( $ID ) == 'publish')  // 判断状态码是否是200并且当前文章是否已经发布(防止是文章预览)
{
    echo "https://cdn.sunriseydy.top/wp-content/plugins/wp-rest-api-for-app/qrcode/qrcode-".$ID.".png";  // 如果获取成功则输出文章页面的小程序码地址
}
else
{
    echo "https://cdn.sunriseydy.top/miniapp_qr.jpg"; // 否则输出小程序的小程序码地址
}
?>" width="200" height="200" />

这段代码其实是 HTML 嵌套了 php 代码,HTML 用来显示图片,PHP 用来获取小程序码地址。PHP 里还有一个判断,用来输出文章的小程序码和小程序首页的小程序码,注释里也写了。这里再说明一下,该代码只在 Header and Footer 插件中测试成功,如果你要用到自己的文章下面,可能要做一些更改和处理。

自定义小程序码样式

在微信小程序的 API 文档里有关于小程序码的样式自定义参数(点这里打开文档)我就使用了自动配置线条颜色的参数设置,也就是在上面说的“get_weixin_qcrodeimg_json($postid,$path)”函数中做一些更改:

$data = array(
  //$data['scene'] = "scene";//自定义信息,可以填写诸如识别用户身份的字段,注意用中文时的情况
  //$data['page'] = "pages/index/index";//扫码后对应的path,只能是固定页面
  'path' => $path, //前端传过来的页面path
  'width' => intval(100), //设置二维码尺寸
  'auto_color' => true,  // 自动配置线条颜色
  'line_color' => $color,
);

这个自动配置线条颜色是根据小程序图标的颜色来自动配置的,看自己的需要来添加咯。

效果图

最终的效果图如下:

效果图

版权说明:
作品 sunriseydy 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
文章内容如未说明均为原创,欢迎转载,但请注明原作者(sunriseydy)和原文链接(https://blog.sunriseydy.top/technology/server-blog/wordpress/show-miniapp-qrcode-aftet-post/)
部分来自互联网的文章,如有侵权,请联系我,24小时内删除,谢谢

分享到微博 分享到QQ 微信赞赏 点赞 1

评论一下呗亲

电子邮件地址不会被公开。 必填项已用*标注