为推广宣传使用，需要做一个简单h5页面在微信中分享宣传，实现过程中遇到一些问题在此总计如下：

前端代码

获取分享页面地址，根据地址请求后端接口，获取页面分享所需的必要参数；
关于“jweixin.js”，网上很多博主都是引用的“< script src=‘https://res.wx.qq.com/open/js/jweixin-1.0.0.js’></ script >”，自己在尝试的时候发现不好使，因此将js复制一份至本地，直接引用本地js

<script type="text/javascript" src="layui/jweixin.js"></script>
<script type="text/javascript">// 公众号appidvar appId = "appid";// 获取分享页面地址var url = location.href.split('#')[0];$.ajax({url: baseUrl + "/share/getShareData",type: "post",data: { url: url },dataType: "json",success: function (res) {wx.config({debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。移动端会通过弹窗来提示相关信息。如果分享信息配置不正确的话，可以开了看对应报错信息appId: appId,timestamp: res.timestamp,nonceStr: res.nonceStr,signature: res.signature,jsApiList: [//需要使用的JS接口列表,分享默认这几个，如果有其他的功能比如图片上传之类的，需要添加对应api进来'checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','updateAppMessageShareData','updateTimelineShareData']});window.share_config = {"share": {"imgUrl": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572348318142&di=050973bf43e436a9b9a2477817cde485&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F03%2F20190103103112_wqonk.jpg",//分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。"desc": "测试",//摘要,如果分享到朋友圈的话，不显示摘要。"title": '鲸控科技',//分享卡片标题"link": url,//分享出去后的链接，这里可以将链接设置为另一个页面。"success": function () {//分享成功后的回调函数// alert("123")},'cancel': function () {// 用户取消分享后执行的回调函数// alert("456")}}};wx.ready(function () {wx.onMenuShareAppMessage(share_config.share);//分享给好友wx.onMenuShareTimeline(share_config.share);//分享到朋友圈wx.onMenuShareQQ(share_config.share);//分享给手机QQ});}})</script>

后端代码

import net.sf.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Formatter;
import java.util.HashMap;
import java.util.Map;/*** @program: jk* @description: H5页面分享准备信息* @author: Mr.Jkx* @create: 2019-10-29 16:08*/
@Controller
@RequestMapping(value = "/share")
public class HfiveShare {private static final Logger LOGGER = LoggerFactory.getLogger(HfiveShare.class);// 公众号appidprivate static final String APPID = "APPID";// 公众号开发者秘钥private static final String APPSECRET = "APPSECRET";private static final String GETACCESSTOKEN_URL = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";private static final String GETTICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";/*** @Description: h5微信分享数据准备* @Author: Mr.Jkx* @date: 2019/10/30 11:06* url:前端分享页面服务器路径（一定要前端获取分享页面地址，不要后端写死，写死容易造成签名错误问题出现）*/@RequestMapping(value = "/getShareData")@ResponseBodypublic Map<String, String> getShareData(String url) throws IOException {// 获取“access_token”,建议放于缓存或者数据库中，定时刷新String getAccessTokenPath = GETACCESSTOKEN_URL.replace("APPID", APPID).replace("APPSECRET", APPSECRET);JSONObject jsonObject = WinxinUtil.doGetStr(getAccessTokenPath);String access_token = jsonObject.getString("access_token");LOGGER.info("---HfiveShare---access_token-----:{}", access_token);// 根据“access_token”获取“jsapi_ticket”String getTicketPath = GETTICKET_URL.replace("ACCESS_TOKEN", access_token);JSONObject jsonObject1 = WinxinUtil.doGetStr(getTicketPath);String ticket = jsonObject1.getString("ticket");LOGGER.info("---HfiveShare---ticket-----:{}", ticket);Map<String, String> ret = sign(ticket, url);return ret;}/*** @Description: 获取签名信息* @Author: Mr.Jkx* @date: 2019/10/30 11:06*/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 +"&timestamp=" + timestamp +"&url=" + url;LOGGER.info(string1);try {MessageDigest crypt = MessageDigest.getInstance("SHA-1");crypt.reset();crypt.update(string1.getBytes("UTF-8"));signature = byteToHex(crypt.digest());} 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;}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;}private static String create_nonce_str() {return UUIDUtil.getUUID();}private static String create_timestamp() {return Long.toString(System.currentTimeMillis() / 1000);}
}

使用到的工具类

import java.util.UUID;
/*** 生成唯一码*/
public class UUIDUtil {public static String getUUID() {String uuid = UUID.randomUUID().toString().replace("-","");return uuid;}public static String getUUIDBig() {String uuid = UUID.randomUUID().toString().replace("-","");uuid = uuid.toUpperCase();return uuid;}
}

import net.sf.json.JSONObject;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;import java.io.IOException;public class WinxinUtil {/*** 编写Get请求的方法。但没有参数传递的时候，可以使用Get请求** @param url 需要请求的URL* @return 将请求URL后返回的数据，转为JSON格式，并return*/public static JSONObject doGetStr(String url) throws IOException {DefaultHttpClient client = new DefaultHttpClient();//获取DefaultHttpClient请求HttpGet httpGet = new HttpGet(url);//HttpGet将使用Get方式发送请求URLJSONObject jsonObject = null;HttpResponse response = client.execute(httpGet);//使用HttpResponse接收client执行httpGet的结果HttpEntity entity = response.getEntity();//从response中获取结果，类型为HttpEntityif (entity != null) {String result = EntityUtils.toString(entity, "UTF-8");//HttpEntity转为字符串类型jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型}return jsonObject;}/*** 编写Post请求的方法。当我们需要参数传递的时候，可以使用Post请求** @param url    需要请求的URL* @param outStr 需要传递的参数* @return 将请求URL后返回的数据，转为JSON格式，并return*/public static JSONObject doPostStr(String url, String outStr) throws IOException {DefaultHttpClient client = new DefaultHttpClient();//获取DefaultHttpClient请求HttpPost httpost = new HttpPost(url);//HttpPost将使用Get方式发送请求URLJSONObject jsonObject = null;httpost.setEntity(new StringEntity(outStr, "UTF-8"));//使用setEntity方法，将我们传进来的参数放入请求中HttpResponse response = client.execute(httpost);//使用HttpResponse接收client执行httpost的结果String result = EntityUtils.toString(response.getEntity(), "UTF-8");//HttpEntity转为字符串类型jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型return jsonObject;}
}

参考链接

https://www.cnblogs.com/teamemory/p/9798633.html
http://caibaojian.com/wxshare-config.html
https://blog.csdn.net/lyfrighting/article/details/82490876

h5微信自定义分享（前端+后端java）相关推荐

实现微信自定义分享网页（java）
前言网页实现微信分享功能,这个其实在百度上是有很多例子的,而且写得也都还不错.不过我这个跟他们的不大一样.一般的博客会将分享需要的微信凭证这些写进一个项目中,本项目获取,本项目实现分享功能.而我是获 ...
H5微信自定义分享图文链接（设置标题+简介+图片）——附源码
1. 最近突然发现微信"卡片式"分享链接变成了如下形式: 原来的是这样的: 后来也解决了,原来是部署域名换了,微信公众号的相关配置没有改造成的.微信的其他域名都可以写多个,唯独服务 ...
h5微信js-sdk分享接口php,H5 微信JSSDK自定义分享代码模板
HTML 导入代码模板: var base_url = ""; var shareTitle = "H5 animations with global vision!&q ...
微信 H5页面自定义分享link不起作用
微信 H5页面自定义分享link不起作用最近在做这么一个功能: H5页面在微信内打开并通过设置微信自定义分享来分享出指定的标题.图片.link 但是却遇到了问题,分享指定的link没起作用,正常通过 ...
h5页面生成图片分享到微信js_H5微信自定义分享链接（设置标题+简介+图片）
起源:最近公司在做招募广告的html5页面,然后做出来后,产品提出一个问题,需要分享出去的链接是卡片形式,内容也要自己定义,这下就难到我了,因为是第一次遇到这种需求,果断百度,然而,我就像大家一样,看 ...
微信自定义分享功能二次封装
我原本是纯后端开发,但是最近因为工作原因,做了微信公众号的二次开发,说实话写H5调CSS调得头大,还是得术业有专攻才行.话不多说,因为要做微信自定义分享,网上其实已经有很多轮子了,但是100个人就有1 ...
VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致一.微信公众号后台添加 js安全域名(白名单) 二 ...
微信自定义分享功能实现
微信自定义分享功能实现微信自定义分享功能实现一.实现的关键 1.后端的任务 2.前台的任务二.实现具体步骤 1.js安全域名配置(被分享的网址必须实现) 2.添加服务器配置(成为开发者) 3.生 ...
微信自定义分享卡片链接的解决方案（可自定义标题描述图片）
微信自定义分享卡片链接的解决方案(可自定义标题描述图片) 参考文章: (1)微信自定义分享卡片链接的解决方案(可自定义标题描述图片) (2)https://www.cnblogs.com/rg ...

h5微信自定义分享（前端+后端java）

前端代码

后端代码

使用到的工具类

参考链接

h5微信自定义分享（前端+后端java）相关推荐

最新文章

热门文章