如上图所示,顶格博客的详情路径为 pages/detail/detail ,而在列表页面中,点击进入文章详情绑定的函数为:
/**
* 点击文章明细
*/
bindPostDetail: function (e) {
let blogId = e.currentTarget.id;
wx.navigateTo({
url: '../detail/detail?id=' + blogId
})
},
根据 中的说明,我们需要关注两个参数,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;