开发笔记-微信h5设置分享utils

前端框架:uniapp,后端:java

1.后端代码(获取前端配置微信需要的数据,主要是签名必须在后端生成)

    a.获取accesstoken

    private static String accessToken="";
    private static long lastAccessTokenTime=0;

    //获取全局的accessToken
    public static synchronized String getPublicAccessToken(){
    long now= Calendar.getInstance().getTimeInMillis();
        if((now-lastAccessTokenTime)>(3000000)){//当大于3000秒的时候再去获取新的
            String url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+wx_public_appId+"&secret="+wx_public_secret;
            String response=HttpUtil.sendPost(url);//执行http请求
            JSONObject jsonObject=JSON.parseObject(response);

            if(jsonObject!=null&&!jsonObject.containsKey("errcode")){//请求成功,返回access_token
                accessToken=jsonObject.getString("access_token");
                lastAccessTokenTime=now;
                return accessToken;
            }
            return null;
        }else{
            return accessToken;
        }
    }

    b.获取

    private static String jsapi_ticket="";
    private static long lastJsApiTicketTime=0;

    //获取全局的jsapi_ticket
    public static String getPublicJsApiTicket(){
        long now= Calendar.getInstance().getTimeInMillis();
        String tempAccessToken=getPublicAccessToken();
        if(tempAccessToken==null){
            return null;
        }
        if((now-lastJsApiTicketTime)>(3000000)){//当大于3000秒的时候再去获取
            String url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+tempAccessToken+"&type=jsapi";
            String response=HttpUtil.sendPost(url);//请求http
            JSONObject jsonObject=JSON.parseObject(response);

            if(jsonObject!=null&&jsonObject.containsKey("ticket")){//请求成功
                jsapi_ticket=jsonObject.getString("ticket");
                lastJsApiTicketTime=now;
                return jsapi_ticket;
            }

            return null;
        }else{
            return jsapi_ticket;
        }
    }

    c.获取签名的配置参数，返回给前端

        long timestamp=Calendar.getInstance().getTimeInMillis()/1000;
        String appId=Configs.wx_public_appId;//微信公众号的appId
        String nonceStr="nonceStr"+((int)(Math.random()*100000));
        String ticket=getPublicJsApiTicket();//获取ticket
        System.out.println("jsapiTicket:"+ticket);

        String tempSign="jsapi_ticket="+ticket+"&noncestr="+nonceStr+"&timestamp="+timestamp+"&url="+url;
        System.out.println("tempSign:"+tempSign);

        String signature= MD5Utils.getSha1(tempSign);//执行md5加密,进行签名

        Map<String,Object> map=new HashMap<>();
        map.put("appId",appId);
        map.put("timestamp",timestamp);
        map.put("nonceStr",nonceStr);
        map.put("signature",signature);
        return map;

2.前端代码

前端直接调用如下代码，便可以完成配置

nowUrl为当前前端页面的url，微信需要用此来验证是否有权限配置获取方式:

var nowUrl=window.location.href.split("#")[0];//本网页的链接，配置分享页需要使用!

var wx = require('@/tools/wechat.js')

export function setShareInfo(nowUrl,shareInfo){
	queryJsApiConfig({//执行http请求，去后台获取配置信息
		url:nowUrl
	},function(data){
		wx.config({
			debug:false,
			appId:data.appId,
			timestamp:data.timestamp,
			nonceStr:data.nonceStr,
			signature:data.signature,
			jsApiList:['updateAppMessageShareData','updateTimelineShareData']
		});
		wx.ready(function(){
			wx.updateAppMessageShareData({
			  title: shareInfo.title, // 分享标题
			  desc: shareInfo.desc, // 分享描述
			  link: shareInfo.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			  imgUrl: shareInfo.imgUrl, // 分享图标
			  success: function () {}
			});
			wx.updateTimelineShareData({