这篇文章上次修改于 1088 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

今天在研究将微信小程序移植到 QQ 小程序，发现目录结构大体一致，只是文件名的后缀有所变化。部分微信独占的 API 没有（例如 onShareTimeline 分享到朋友圈），以及默认的 CSS 样式有一定区别。

  • WXML -> QML
  • WXSS -> QSS
  • WXS -> QS

而接口也从 wx 变成 qq，例如 wx.request 变成了 qq.request。

移植之后我发现最大的问题是，里面的图片都没有正常显示出来，而是被替换成了 Referer 错误的替代图片，也就是说小程序的访问带上了自己的 Referer

这个效果是我之前设置 Nginx 的时候加上的，具体代码可以参考本文的最后章节

我看了下此前配置的 Nginx 配置文件，发现微信也有这个问题，但我已经解决掉了。只需要将域名 servicewechat.com 添加到排除列表即可。

获得 Referer 地址

那么 QQ 小程序的 Referer 带上的是哪个地址呢？通过小程序开发工具本身并不能捕获图片的相关请求，我想到利用 PHP 程序获取的一种方式，将获取到的 Referer 写入到某个文件，我就能看到它的真实面目了。

<?php

file_put_contents("referer.txt", $_SERVER["HTTP_REFERER"]);

于是我得到了地址 appservice.qq.com，这就是 QQ 小程序请求 image 带上的 Referer 了，将其加入我的 Nginx 配置里面，问题就解决啦！

参考 Nginx 配置

以下是我的 Nginx 配置，加上了我前面说的替换图片的神奇操作，你也可以试试看哦！

location ~ .*\.(jpg|gif|png)$ {
  valid_referers none blocked servicewechat.com appservice.qq.com localhost *.paul.ren paul.ren paugram.com *.paugram.com;
  if ($invalid_referer) {
    return https://dreamer-paul.gitee.io/static_hosting/404.jpg;
  }
}

如有疑问，欢迎留言评论交流～