微信分享链接自定义文案，微信jssdk配置

最新推荐文章于 2024-04-22 11:23:20 发布

隔壁灬萌萌哒

最新推荐文章于 2024-04-22 11:23:20 发布

阅读量1.3k

点赞数 1

文章标签：微信 vue.js java spring boot

本文链接：https://blog.csdn.net/weixin_44264876/article/details/120018316

版权

需要公众号appid，APPSECRET，与公众号绑定的js安全域名

三样就可以完成微信jssdk的配置，这里以微信分享自定义文案链接为例

一、前端vue页面编写

1、设置data参数

2、设置js参数配置方法，以及分享自定义

二、后端代码可以

1、新建实体类AccessToken与JsApiToken用于保存参数

2、编写获取token的工具类 TokenUtil 用于http获取

3、生成微信配置参数WxFenServiceImpl实现类

4、配置分享的服务 WxFenService

5、配置微信分享的WxFenController控制层

注意：前端设置地址的动态提交，后端url没有动态获取

vue 前端页面编写
设置参数

export default {
	
	data(){
	      return {
	

wxfx_info:{
                title:'文件标题',
                desc: '摘要',
                link: '',
                imgUrl: 'https://cdn.via.cool/web/zy/sport0808/img/share.jpg'// 图片地址
            },
}}}

微信配置方法实现

wxJsSdk(){
      var url = window.location.href.split('#')[0];
      url = encodeURIComponent(url)
// url 与后端加密的url保持一致 可由前台传入
      wxToolApi.getJsToken(url).then(response =>{
      var that = this
        var configmap = response.data.data.configmap
        wx.config({
            debug: false,               // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: configmap.appId,          // 必填，公众号的唯一标识
            timestamp: configmap.timestamp,  // 必填，生成签名的时间戳
            nonceStr: configmap.noncestr,    // 必填，生成签名的随机串
            signature: configmap.signature,  // 必填，签名
            jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','hideOptionMenu'] // 必填，需要使用的JS接口列表，需要用什么必须放在列表里声明
        });
        wx.ready(function(){
          // alert("config配置成功，执行success方法")
        });
        wx.error(function(res){
            // alert("config配置失败，执行error方法")
        });
        wx.onMenuShareTimeline({
          title: this.wxfx_info.title,         //  朋友圈 即将废弃
          link: this.wxfx_info.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: this.wxfx_info.imgUrl, // 分享图标
          success: function () {
            // 分享成功以后的回调函数
          }
        });
        wx.onMenuShareAppMessage({
          title: this.wxfx_info.title,        //  朋友即将废弃
          desc: this.wxfx_info.desc, // 分享描述
          link: this.wxfx_info.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          type: '',
          dataUrl: '',
          imgUrl: this.wxfx_info.imgUrl, // 分享图标
          success: function () {
              // 分享成功以后的回调函数
          }
        });
      }) 
    },

java后端代码实现

思路：

1.获取access——token

2、获取jsapi_ticket

3、用时间戳、随机数、jsapi_ticket和要访问的url按照签名算法拼接字符串

4、获取url 该url与浏览者的当前页一致

5、将参数排序并拼接字符串 str

6、对第三步的字符串进行SHA1加密，得到签名,并返回结果

第一步：新建实体类AccessToken`与`JsApiToken用于保存参数

实体类 AccessToken
	
	public class AccessToken {
	    private String access_token;
	    private long expires_in;
	// 生成过期的时间
	    public AccessToken(String accesstoken, String expires){
	        super();
	        this.access_token = accesstoken;
	        expires_in = System.currentTimeMillis()+Integer.parseInt(expires)*1000;
	    }
	//判断当前是否过期
	    public  boolean isExpired(){
	        return System.currentTimeMillis()>expires_in;
	    }
	    public String getAccess_token() {
	        return access_token;
	    }
	    public void setAccess_token(String access_token) {
	        this.access_token = access_token;
	    }
	    public long getExpires_in() {
	        return expires_in;
	    }
	    public void setExpires_in(long expires_in) {
	        this.expires_in = expires_in;
	    }
}

JsApiToken
	
	public class JsApiToken {
	    private String jsapi_ticket;
	    private long expires_in;
	// 生成过期的时间
	    public JsApiToken(String jsapi_ticket, String expires){
	        super();
	        this.jsapi_ticket = jsapi_ticket;
	        expires_in = System.currentTimeMillis()+Integer.parseInt(expires)*1000;
	    }
	//判断当前是否过期
	    public  boolean isExpired(){
	        return System.currentTimeMillis()>expires_in;
	    }
	    public String getAccess_token() {
	        return jsapi_ticket;
	    }
	    public void setAccess_token(String access_token) {
	        this.jsapi_ticket = access_token;
	    }
	    public long getExpires_in() {
	        return expires_in;
	    }
	    public void setExpires_in(long expires_in) {
	        this.expires_in = expires_in;
	    }
}

第二步：编写获取token的工具类 TokenUtil 用于http获取AccessToken、JsApiToken

创建保存AccessToken和JsApiToken类 TokenUtil
	
	public class TokenUtil {
	    private static final String GET_TOKEN_URL="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";
	    private static final String GET_JSAPI_TICKET_URL="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
	    private static AccessToken at;
	    private static JsApiToken jt;
	
	//  对外开放获取Access_token方法
	    public static String getAppsecret(String APPID,String APPSECRET){
	        if(at == null || at.isExpired()){
	            getToken(APPID,APPSECRET);
	        }
	        return at.getAccess_token();
	    }
	
	//  对外开放获取JsToken方法
	    public static String getJsapi_ticket(String ACCESS_TOKEN){
	        if(jt == null || jt.isExpired()){
	            getJsToken(ACCESS_TOKEN);
	        }
	        return jt.getAccess_token();
	    }
	
	
	
	    //  获取  token   使用get提交方法获取
	
	    private static void getToken(String APPID,String APPSECRET){
	        String url = GET_TOKEN_URL.replace("APPID",APPID).replace("APPSECRET",APPSECRET);
	        String tokenStr = get(url);
	        JSONObject jsonObject = JSONObject.parseObject(tokenStr);
	        String access_token = jsonObject.getString("access_token");
	        String expires_in = jsonObject.getString("expires_in");
	        at = new AccessToken(access_token,expires_in);
	    }
	
	    private static void getJsToken(String ACCESS_TOKEN){
	        String url = GET_JSAPI_TICKET_URL.replace("ACCESS_TOKEN",ACCESS_TOKEN);
	        String tokenStr = get(url);
	        JSONObject jsonObject = JSONObject.parseObject(tokenStr);
	        if (jsonObject.getString("errmsg").equals("ok")){
	            String jsapi_ticket = jsonObject.getString("ticket");
	            String expires_in = jsonObject.getString("expires_in");
	            jt = new JsApiToken(jsapi_ticket,expires_in);
	        }
	    }
	
	
	
	    //  请求地址获取 通过url请求返回数据 的方法
	    private static String get(String url){
	        try {
	            URL urlObj = new URL(url);
	            //  发送请求
	            URLConnection connection = urlObj.openConnection();
	            InputStream is = connection.getInputStream();
	            byte[] b = new byte[1024];
	            int len;
	            StringBuilder sb = new StringBuilder();
	            while((len=is.read(b)) != -1){
	                sb.append(new String(b,0,len));
	            }
	            return (String) sb.toString();
	        } catch (Exception e) {
	            e.printStackTrace();
	        }
	        return null ;
	    }
}

第三步：生成微信配置参数WxFenServiceImpl实现类

	@Service
	public class WxFenServiceImpl implements WxFenService {
	    /*
	        1.获取access——token
	        2、获取jsapi_ticket
	        3、用时间戳、随机数、jsapi_ticket和要访问的url按照签名算法拼接字符串
	        4、获取url 该url与浏览者的当前页一致
	        5、将参数排序并拼接字符串  str
	        6、对第三步的字符串进行SHA1加密，得到签名,并返回结果
	
	        分享接口需求
	        输入参数   url
	
	        返回参数
	        timestamp    必填，生成签名的时间戳
	        appId
	        noncestr     必填，生成签名的随机串 随机字符串
	        signature    必填，签名
	        url
	
	        可输出参数（未添加）
	        浏览者的当前页面 url
	     */
	         //生成微信签名等，config必要参数
	    @Override
	    public Map<String, Object> getJsTokenMap() {
	        String access_token = TokenUtil.getAppsecret(WxInfoUtil.getAppId(),WxInfoUtil.getAPPSECRET());
// appid 与  APPSECRET 在公众号里面可以查询到
	        String jsapi_ticket = TokenUtil.getJsapi_ticket(access_token);
	        String noncestr = RandomStringUtils.randomAlphanumeric(10);
	        String timestamp = String.valueOf(System.currentTimeMillis() / 1000);
	        String url = WxInfoUtil.getUrl();// 该url可以通过前端传入，需保证与前端保持一致
	        String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;
//字符串进行拼接方便加密
	        String signature = DigestUtils.sha1Hex(str);
	        Map<String,Object> map=new HashMap();
	        map.put("timestamp",timestamp);
	        map.put("appId",WxInfoUtil.getAppId());
	        map.put("noncestr",noncestr);
	        map.put("signature",signature);
	        map.put("url",url);
	        return map;
	    }
}

第四步：配置分享的服务 WxFenService

	配置分享的服务  WxFenService
	public interface WxFenService {
	    Map<String, Object> getJsTokenMap();
}

第五步：配置微信分享的WxFenController控制层

	@RestController
	@RequestMapping("wxfx")
	@CrossOrigin
	public class WxFenController {
	    @Autowired
	    private WxFenService wxFenService;
	
	    @GetMapping("getjstoken")
	    public R getJsToken(){
	        Map<String,Object> map = wxFenService.getJsTokenMap();
	        return R.ok().data("configmap",map);
	    }
}

地址可以从前台动态获取传入到后台

隔壁灬萌萌哒

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信分享链接自定义文案，微信jssdk配置

需要公众号appid，APPSECRET，与公众号绑定的js安全域名三样就可以完成微信jssdk的配置，这里以微信分享自定义文案链接为例一、前端vue页面编写 1、设置data参数 2、设置js参数配置方法，以及分享自定义二、后端代码可以 1、新建实体类AccessToken与JsApiToken用于保存参数 2、编写获取token的工具类 TokenUtil 用于http获取 3、生成微信配置参数Wx...
复制链接

扫一扫