微信公众号之微信JS

时间:2022-12-22 23:29:39

微信JS-SDK说明文档:

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

根据微信说明文档步骤:(1)绑定域名[略](2)引入js文件[略]

(3)通过config接口注入权限验证配置:

          页面代码:

<script type="text/javascript">
    function jssdk() {
        $.ajax({
            url : '<%=basePath%>wx/jssdk.do',//调用java后台获取config配置信息:appid、timestamp 、nonceStr signature
            type : 'post',
            dataType : 'json',
            //contentType : "application/x-www-form-urlencoded; charset=utf-8",
            data : {
                'url' : location.href.split('#')[0]
            },
            success:function(data) {
                wx.config({
                    debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId : data.appId,
                    timestamp : data.timestamp,
                    nonceStr : data.nonceStr,
                    signature : data.signature,
                    jsApiList : ['chooseImage','previewImage', 'uploadImage', 'downloadImage']
                });
            }
        });
    }
 
 
    window.onload = function() {
        jssdk();
    };
</script>

后台获取jssdk配置信息:

    @RequestMapping(value = "/jssdk" , method = {RequestMethod.POST })
    @ResponseBody
    public String JSSDK_config(
            @RequestParam(value = "url", required = true) String url) {
        try {
            System.out.println(url);
            Map<String, String> configMap = WeixinUtil.jsSdk(url);
            String data = JSON.toJSONString(configMap);
            return data;
        } catch (Exception e) {
            LOGGER.error("get jsconfig is error.");
        }
        return null;
 
    }

/**
     * weixinUtil中前端页面需要的配置信息
     * @param url
     * @return
     * @throws Exception
     */
    public static HashMap<String, String> jsSdk(String url) throws Exception{
        long times = System.currentTimeMillis();
        String timestamp = String.valueOf(times);
        String nonce_str = create_nonce_str();
        String  string1 = "jsapi_ticket=" + TokenThread.jsapi_ticket + "&noncestr=" + nonce_str
                    + "&timestamp=" + timestamp  + "&url=" + url;
        MessageDigest digest = MessageDigest.getInstance("SHA-1");
        digest.reset();
        digest.update(string1.getBytes("UTF-8"));
        String signature = byteToHex(digest.digest());
        HashMap<String, String> jssdk=new HashMap<String, String>();
        jssdk.put("appId", PropertiesUtil.getProperty("APPID"));
        jssdk.put("timestamp", timestamp);
        jssdk.put("nonceStr", nonce_str);
        jssdk.put("signature", signature);
        return jssdk;
    }

配置成功后,调用上传图片接口:

                    HTML代码:

 <form class="signup" role="form">

<div class="tit-set">
                    上传图片
            </div>
            <div class="tit-set">
                    提交
            </div>

</form>

 

<script type="text/javascript">
        var images = {
                   localId: [],
                serverId: []
            };
        $(".tit-set").eq(0).click(function(){
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                success: function (res) {
                    images.localId = res.localIds;
                    var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                    wx.uploadImage({
                         localId: images.localId.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
                         isShowProgressTips: 1, // 默认为1,显示进度提示
                         success: function (res) {
                             var serverId = res.serverId; // 返回图片的服务器端ID
                             //alert("serverId: "+serverId);
                            images.serverId = serverId;
                           wx.getLocalImgData({

                                 localId: images.localId.toString(), // 图片的localID
                                
                                 success: function (res) {
                                     var imgs = $("<img />");
                                     var idp = $("#idp").width();
                                     var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
                                     imgs.attr("src",localData);
                                     imgs.css({"width":idp,"margin":0});
                                       $("#idp").append(imgs);
                                 }

                             });
                          // imgs.src = serverId;
                          //alert("dddd"+JSON.stringify(res));
                         }
                      });

                }

            });
        });

 

调用上传图片接口后,需要将此图片存到自己的图片服务器时,需要将mediaId即images.serverId提交给java后台接口,后台接口接收到mediId后,调用微信获取临时素材接口:

微信公众号之微信JS

 

public static void main(String[] args) throws Exception {
//         String token = TokenThread.accessToken.getToken();
        String requrl = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";
        String url = requrl.replace("ACCESS_TOKEN", "HkAKN1zhEhIJvJ2iFHSxKBxD2i86IGe2lVVirE7iDFsSX3PeN-0mJ1wF4mTDP8Dibkv2ievaDLXUlzz6pE2hJHJ4uc6OD-jnTbsmDL1PyrFycpCMgQZ-yMW5eMepYkK1HFObACALJS").replace("MEDIA_ID", "iLXQnxsZYqjij_F3uwYMKXGM7ugE76yYkGZSxTIDCmY5ARujVBxe_9dEZUH80bRa");
        
        InputStream inputStream = null;  
        HttpURLConnection httpURLConnection = null; 
            URL u = new URL(url);//创建的URL 
            httpURLConnection = (HttpURLConnection) u.openConnection();//打开链接  
            httpURLConnection.setConnectTimeout(3000);//设置网络链接超时时间,3秒,链接失败后重新链接  
            httpURLConnection.setDoInput(true);//打开输入流  
            httpURLConnection.setRequestMethod("GET");//表示本次Http请求是GET方式  
            int responseCode = httpURLConnection.getResponseCode();//获取返回码  
            if (responseCode == 200) {//成功为200  
                //从服务器获得一个输入流  
                inputStream = httpURLConnection.getInputStream();  
            }
            
            byte[] data = new byte[1024];
            int len = 0;
            FileOutputStream fio = null;
            
            try {
                fio = new FileOutputStream("D:\\demo.jpg");
                while ((len = inputStream.read(data)) != -1) {
                    fio.write(data, 0, len);
                    }
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }finally{
                if (inputStream != null) {
                    try {
                    inputStream.close();
                    } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                    }
                    }
                    if (fio != null) {
                    try {
                    fio.close();
                    } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                    }
                    }
            }
    }