公众号分享思路及前后端代码

最近需要些公众号自定义分享功能 网上有好多实例，但是刚开始写的时候思路不够清晰，作为公众号分享刚开始开发思路没有的话 大家可以参考一下 如果有不对地方欢迎大家指导

 

 

 

 

vue前端代码

第一步 vue引入微信js
npm install weixin-js-sdk
第二步当前页引入js
import wx from 'weixin-js-sdk';

  export const fenxiangs=(data)=>{
    return request({
        method:"GET",
        url:'/wx/get_signature?url='+data, 
    })
 }

  function fenxiang(){
             fenxiangs(encodeURIComponent(location.href.split('#')[0])).then((res) => {
                wx.config({
                    debug: false, // 开启调试模式
                    appId: res.data.appId, // 必填，公众号的唯一标识
                    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                    signature: res.data.signature,// 必填，签名
                    jsApiList: [
                    "updateAppMessageShareData",//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
                    "updateTimelineShareData",//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
                    ] // 必填，需要使用的JS接口列表
                })
                }).catch((error) => {
                console.log(error)
                });

                //通过ready接口处理成功验证
                wx.ready(function(){
                    wxShareTimeline();
                    wxShareAppMessage();
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                });

                wx.error(function(res){
                //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                });

         }


         function wxShareTimeline() {// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
            wx.updateAppMessageShareData({
            title: '访客邀请函', // 分享标题
            desc: window.sessionStorage.getItem('name')+'邀请您访问'+window.sessionStorage.getItem('orgName'), // 分享描述
            link: 'http://384a19422h.zicp.vip/#/Invites/'+window.sessionStorage.getItem("xiangid"), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://384a19422h.zicp.vip/images/图层 14.png', // 分享图标
            success: () => {
            },
            cancel: () => {
            }
            })
        }
            function wxShareAppMessage() {//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
                wx.updateTimelineShareData({
                title: '访客邀请函', // 分享标题
                desc: window.sessionStorage.getItem('name')+'邀请您访问'+window.sessionStorage.getItem('orgName'), // 分享描述
                link: 'http://384a19422h.zicp.vip/#/Invites/'+window.sessionStorage.getItem("xiangid"), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://384a19422h.zicp.vip/images/图层 14.png', // 分享图标(不能赋相对路径，一定要是绝对路径)
                success: () => {
                }
                })
            }


java 代码 
  //这个方法是获取验证凭据的

  public  static String token="";
    public  static String ticket="";

 @Scheduled(cron = "0 0/59 * * * ?")
    public void getaccess_token(){
        try {
            String s = HttpClientUtils.doGet1("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appID+"&secret="+appsecret, null);
            JSONObject jsonObject = JSONObject.parseObject(s);
            String access_token = jsonObject.get("access_token").toString();
            token=access_token;
            String tokenObj = HttpClientUtils.doGet1("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+access_token+"&type=jsapi",null);
            JSONObject jsonObjects = JSONObject.parseObject(tokenObj);
            ticket = jsonObjects.get("ticket").toString();
            System.out.println(access_token);
        }catch (Exception e){
            e.printStackTrace();
        }
    }

//返回鉴权信息

 @RequestMapping(value = "/get_signature", method = RequestMethod.GET)
    public Map<String, String> getSignature(String url) {
        Map<String, String> ret = new HashMap<String, String>();

        String wxTicket = leaSchedule.ticket;
        String nonce_str = create_nonce_str();
        String timestamp = create_timestamp();
        String str;
        String signature = "";
        //注意这里参数名必须全部小写，且必须有序
        str = "jsapi_ticket=" + wxTicket +
                "&noncestr=" + nonce_str +
                "&timestamp=" + timestamp +
                "&url=" + url;

        try {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(str.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", wxTicket);
        ret.put("nonceStr", nonce_str);
        ret.put("timestamp", timestamp);
        ret.put("signature", signature);
        ret.put("appId", appID);
        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 UUID.randomUUID().toString();
    }

    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }

 

最后别忘了获取access_token需要设置ip白名单 就是对外访问的公网ip