- h5页面无法打开微信实现分享功能，请求给出有效的h5实现微信分享功能的详细方案或者有效实现的代码？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>websocket-demo</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script> </head> <body> <div style="font-size: 100px; background-color: yellow;" onclick="getShareConfig()"> 点击开始分享 </div> </body> <script type="text/javascript" charset="utf-8"> // 使用 AJAX 发送 GET 请求 function getShareConfig() { $.get("http://www.lifeiyu.icu:9055/video/video/getWxSg", {url: window.location.href}, function (res) { jWeixin.config({ debug: true, // 是否打开调试 appId: res.appId, // 必填，公众号的唯一标识 timestamp: res.timestamp, // 必填，生成签名的时间戳 nonceStr: res.noncestr, // 必填，生成签名的随机串 signature: res.signature, // 必填，签名 jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] }); jWeixin.showMenuItems({ menuList: ['updateAppMessageShareData', 'updateTimelineShareData'] }); jWeixin.error((err) => { console.error('Config error:', err); }); jWeixin.ready(() => { // 分享给朋友 jWeixin.updateAppMessageShareData({ title: "分享标题", // 分享标题 desc: "分享描述", // 分享描述 link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: "http://www.lifeiyu.icu:9000/video/images/2024/08/03/17226921293788661.jpeg", // 分享图标 success() { // 分享成功回调 alert("分享给朋友成功"); }, cancel() { // 取消分享回调 alert("分享给朋友取消"); } }); }); }); } </script> </html>
08-08 - h5页面无法打开微信实现分享功能，怎办？
@Component @ConfigurationProperties(prefix = "weixin") @Data public class WXUnitl { private String weixinAppId; private String weixinSecret; public static WinXinEntity getWinXinEntity(String url) { WinXinEntity wx = new WinXinEntity(); String access_token = getAccessToken(); //同类的 上面的获取token的方法 String ticket = getTicket(access_token); //同类的 上面的获取ticket的方法 Map<String, String> ret = sign(ticket, url); wx.setTicket(ret.get("jsapi_ticket")); wx.setSignature(ret.get("signature")); wx.setNoncestr(ret.get("nonceStr")); wx.setTimestamp(ret.get("timestamp")); return wx; } // 生成签名 private static String byteToHex(final byte[] hash) { Formatter formatter = new Formatter(); for (byte b : hash) { formatter.format("%02x", b); } String result = formatter.toString(); formatter.close(); return result; } // 获取ticket private static String getTicket(String access_token) { String ticket = null; String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + access_token + "&type=jsapi";// 这个url链接和参数不能变 try { URL urlGet = new URL(url); HttpURLConnection http = (HttpURLConnection) urlGet.openConnection(); http.setRequestMethod("GET"); // 必须是get方式请求 http.setRequestProperty("Content-Type", "application/x-www-form-urlencoded"); http.setDoOutput(true); http.setDoInput(true); System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒 System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒 http.connect(); InputStream is = http.getInputStream(); int size = is.available(); byte[] jsonBytes = new byte[size]; is.read(jsonBytes); String message = new String(jsonBytes, "UTF-8"); JSONObject demoJson = JSONObject.parseObject(message); System.out.println("获取ticket:"+demoJson); ticket = demoJson.getString("ticket"); is.close(); } catch (Exception e) { e.printStackTrace(); } System.out.println("ticket:"+ticket); return ticket; } // 获取token private static String getAccessToken() { String access_token = ""; String grant_type = "client_credential";//获取access_token填写client_credential String AppId=weixinAppId;//第三方用户唯一凭证,你自己的公众号appid String secret=weixinSecret;//第三方用户唯一凭证密钥，即appsecret 公众号 秘钥 //这个url链接地址和参数皆不能变 这个token是需要进行缓存的，因为它的调用次数每日是有限的。 String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type="+grant_type+"&appid="+AppId+"&secret="+secret; //访问链接 try { URL urlGet = new URL(url); HttpURLConnection http = (HttpURLConnection) urlGet.openConnection(); http.setRequestMethod("GET"); // 必须是get方式请求 http.setRequestProperty("Content-Type","application/x-www-form-urlencoded"); http.setDoOutput(true); http.setDoInput(true); http.connect(); InputStream is = http.getInputStream(); int size = is.available(); byte[] jsonBytes = new byte[size]; is.read(jsonBytes); String message = new String(jsonBytes); JSONObject demoJson = JSONObject.parseObject(message); System.out.println("获取token:"+demoJson); access_token = demoJson.getString("access_token"); is.close(); } catch (Exception e) { e.printStackTrace(); } return access_token; } public static Map<String, String> sign(String jsapi_ticket, String url) { Map<String, String> ret = new HashMap<String, String>(); String nonce_str = create_nonce_str(); //生成随机串 String timestamp = create_timestamp(); //生成当前时间戳 String string1; String signature = ""; // 注意这里参数名必须全部小写，且必须有序 string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str + "×tamp=" + timestamp + "&url=" + url; System.out.println("string1:"+string1); try { MessageDigest crypt = MessageDigest.getInstance("SHA-1"); crypt.reset(); crypt.update(string1.getBytes("UTF-8")); signature = byteToHex(crypt.digest()); System.out.println("获取signature:"+signature); } catch (NoSuchAlgorithmException e) { e.printStackTrace(); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } ret.put("url", url); ret.put("jsapi_ticket", jsapi_ticket); ret.put("nonceStr", nonce_str); ret.put("timestamp", timestamp); ret.put("signature", signature); return ret; } // 生成nonce_str private static String create_nonce_str() { return UUID.randomUUID().toString(); } // 生成timestamp private static String create_timestamp() { return Long.toString(System.currentTimeMillis() / 1000); } } @ApiOperation("获取微信签名") @RequestMapping(value = "/getWxSg", method = RequestMethod.GET) public Map<String, Object> sgture(HttpServletRequest request) { String strUrl=request.getParameter("url"); logger.info("===前====url========="+strUrl); WinXinEntity wx = WXUnitl.getWinXinEntity(strUrl); // 将wx的信息到给页面 Map<String, Object> map = new HashMap<String, Object>(); map.put("signature", wx.getSignature().trim());//签名sgture.trim() map.put("timestamp", wx.getTimestamp().trim());//时间戳 map.put("noncestr", wx.getNoncestr().trim());//随即串 map.put("appId","wxdb3337d1f8618294");//你的公众号APPID，写你自己的appid return map; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>websocket-demo</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script> </head> <body> <div style="font-size: 100px; background-color: yellow;" onclick="getShareConfig()"> 点击开始分享 </div> </body> <script type="text/javascript" charset="utf-8"> // 使用 AJAX 发送 GET 请求 function getShareConfig() { $.get("http://www.lifeiyu.icu:9055/video/video/getWxSg", {url: window.location.href}, function (res) { jWeixin.config({ debug: true, // 是否打开调试 appId: res.appId, // 必填，公众号的唯一标识 timestamp: res.timestamp, // 必填，生成签名的时间戳 nonceStr: res.noncestr, // 必填，生成签名的随机串 signature: res.signature, // 必填，签名 jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] }); jWeixin.showMenuItems({ menuList: ['updateAppMessageShareData', 'updateTimelineShareData'] }); jWeixin.error((err) => { console.error('Config error:', err); }); jWeixin.ready(() => { // 分享给朋友 jWeixin.updateAppMessageShareData({ title: "分享标题", // 分享标题 desc: "分享描述", // 分享描述 link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: "http://www.lifeiyu.icu:9000/video/images/2024/08/03/17226921293788661.jpeg", // 分享图标 success() { // 分享成功回调 alert("分享给朋友成功"); }, cancel() { // 取消分享回调 alert("分享给朋友取消"); } }); }); }); } </script> </html>
08-08 - h5页面无法打开微信实现分享功能，怎办？
http://www.lifeiyu.icu/index2.html
08-08
获得过 0 次赞
回答过的问题获得 0 次赞
分享过的文章/案例获得 0 次赞
评论与回复获得 0 次赞