vue spa 微信jssdk二次分享不显示自定义分享内容问题解决

时间 2020-01-09

标签 vue spa 微信 jssdk 二次分享显示自定义内容问题解决繁體版

原文原文链接

本问题仅限于vue单页应用开发时的讨论。vue

一、不带参数的网页，如：http://xxx.com/#/CS350001/pray/buddha，分享后打开的网址,ios

会变成这样：http://xxx.com/?from=singlemessage&isappinstalled=0#/CS350001/pray/buddha，多了一串字符axios

?from=singlemessage&isappinstalled=0，这不影响，再打开这个连接并分享，仍是正常的。api

二、带参数的网页，如：http://xxx.com/#/pray/videoDetail?orderId=64，分享后没法显示自定义的分享内容，这是由于url在传递给后台时带有?等特殊字符，直接传会致使验签失败，因此须要url encode下，总结以下代码：微信

let url = window.location.href;
this.$axios({
  method:"get",
  url:'/wx/jssdk/config?url='+(url.indexOf('/?') == '-1'?url:encodeURIComponent(url)),
}).then(function (response) {})

其中/wx/jssdk/config是我后台接口地址，代码以下：微信开发

@GetMapping("config")
public @ResponseBody
JsonResult config() throws Exception {
    ApiConfigKit.putApiConfig(getApiConfig());
    JsTicket jsApiTicket = JsTicketApi.getTicket(JsTicketApi.JsApiType.jsapi);
    String jsapi_ticket = jsApiTicket.getTicket();
    String nonce_str = createNonceStr();
    String url = getPara("url");
    String timestamp = createTimestamp();
    // 这里参数的顺序要按照 key 值 ASCII 码升序排序
    //注意这里参数名必须所有小写，且必须有序
    String str = "jsapi_ticket=" + jsapi_ticket +
            "&noncestr=" + nonce_str +
            "&timestamp=" + timestamp +
            "&url=" + url;
    String signature = HashKit.sha1(str);
    Map<String,Object> map = new HashMap();
    map.put("appId", ApiConfigKit.getApiConfig().getAppId());
    map.put("nonceStr", nonce_str);
    map.put("timestamp", timestamp);
    map.put("url", url);
    map.put("signature", signature);
    map.put("jsapi_ticket", jsapi_ticket);
    return JsonResult.success(map);
}

(ps：微信开发引入了jfinal-weixin)app

如此一来，不管分享多少次，都会正常显示自定义的分享内容。ide