小程序海报功能实现：如何生成小程序访问特定页面二维码

顶格博客小程序的文章详情页下屏蔽了评论功能，通过引导用户访问小程序来评论。这样做能利用微信自带的内容安全的同时，避免需要在web页面让用户输入身份信息。
本文首发地址：https://www.dgjava.com/archives/createqccode 转载请注明出处

首先需要明确一点，小程序页面有特定的目录结构。一般而言，所有静态页面都在pages目录下，实现页面切换也是通过不同静态页面的切换，然后在对应的js文件中，动态拉取数据。本文以顶格博客的文章详情页做举例说明；

如上图所示，顶格博客的详情路径为 pages/detail/detail ，而在列表页面中，点击进入文章详情绑定的函数为：

  /**
   * 点击文章明细
   */
  bindPostDetail: function (e) {
    let blogId = e.currentTarget.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + blogId
    })
  },

根据 小程序API文档 中的说明，我们需要关注两个参数，scene和page。

属性	说明
scene	最大32个可见字符，只支持数字，大小写英文以及部分特殊字符：!#$&’()*+,/:;=?@-._~，其它字符请自行编码为合法字符（因不支持%，中文无法使用 urlencode 处理，请使用其他编码方式）
page	必须是已经发布的小程序存在的页面（否则报错），例如 pages/index/index, 根路径前不要填加 /,不能携带参数（参数请放在scene字段里），如果不填写这个字段，默认跳主页面

注意：调用接口生成小程序码的前提是你的小程序已发布

根据上述说明我们确定了两个参数：

{
	"scene":"?",
	"page":"pages/detail/detail"
}

那么 "?"里面是什么呢？以上述参数为例，实际生成的URL为pages/detail/detail?scene=?但无论如何，?里面一定要包含你的文章标识，你才能拉取到数据。page指定了页面，scene里面就是你的参数，顶格博客就是直接传id来生成二维码的。

附上Java客户生成小程序码的代码，分两步：

获取access_token

    private String getAccessToken() {
        Map<String, Object> map = new HashMap<>();
        map.put("grant_type", "client_credential");//固定写法
        map.put("appid", "");//你的小程序AppID
        map.put("secret", "");//你的小程序密钥
        String result = HttpUtil.get("https://api.weixin.qq.com/cgi-bin/token", map);
        JSONObject json = JSONUtil.parseObj(result);
        if (json.containsKey("access_token")) {
            return json.getStr("access_token");
        }
        return null;
    }

生成二维码

    public String getQrCode(Integer id) {
        Map<String, Object> map = new HashMap<>();
        map.put("scene", id);//文章ID
        map.put("page", "pages/detail/detail");
        map.put("width", 200);
        map.put("auto_color", true);
        map.put("is_hyaline", false);
        
        HttpResponse response = HttpRequest.post("https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" + getAccessToken())
                .body(JSONUtil.toJsonStr(map)).execute();
        
        if (response.getStatus() == 200) {
//            return util.upload(null, response.bodyStream());
            FileUtil.writeFromStream(response.bodyStream(), "D:/qrcode.png");
        } else {
            System.out.println(response.body());
        }
        return null;
    }

说明：HttpResponse 和 FileUtil 引用自 hutool工具类

至此你已经生成了访问详情页面的小程序二维码，但是要能正常加载详情页数据，还差一步：解析scene值。你需要在detail.js的onLoad方法中，加上如下代码：

    let blogId = options.id;
    if (options.scene) {
      blogId = decodeURIComponent(options.scene);
    }

正常页面通过ID传参，但存在scene值时，需要解析scene值拿到真正的ID；