微信公众平台js-sdk对接页面和Action

最新推荐文章于 2024-05-16 13:40:26 发布

erix1991

最新推荐文章于 2024-05-16 13:40:26 发布

阅读量1.4k

点赞数

分类专栏：微信开发

本文链接：https://blog.csdn.net/erix1991/article/details/51838464

版权

微信开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. Action 层

@RequestMapping(value = "/test")
	public String test2(HttpServletRequest request,
			HttpServletResponse response) throws IOException {
		
	    String jsapi_ticket = jsapiTicket;

	    Sign sign = new Sign();
	    
        // 注意 URL 一定要动态获取，不能 hardcode
        //String url = request.getRequestURL().toString();
        String url = "http://nqiuwcagpo.proxy.qqbrowser.cc/aia6/wxjs/test";
        System.out.println("url...." + url);
        Map<String, String> ret = sign.sign(jsapi_ticket, url);
        for (Map.Entry entry : ret.entrySet()) {
            System.out.println(entry.getKey() + ", " + entry.getValue());
            request.setAttribute(String.valueOf(entry.getKey()),  entry.getValue());
        }
        
		return "/WxJSTest";
	}

2. Sign类工具

package com.aiait.framework.util;

import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Formatter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

public class Sign {
    public static void main(String[] args) {
        String jsapi_ticket = "jsapi_ticket";

        // 注意 URL 一定要动态获取，不能 hardcode
        String url = "http://example.com";
        Map<String, String> ret = sign(jsapi_ticket, url);
        for (Map.Entry entry : ret.entrySet()) {
            System.out.println(entry.getKey() + ", " + entry.getValue());
        }
    };

    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 +
                  "×tamp=" + timestamp +
                  "&url=" + url;
        System.out.println(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 UUID.randomUUID().toString();
    }

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

3. JSP页面配置 wx config, 使用getLocation, chooseImg 等API

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" isELIgnored="false"%>
<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<%@include file="../common/common.jsp"%>
		<link href="${path}/static/css/login.css" rel="stylesheet">
		
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<style type="text/css">
			
		</style>
	</head>
<body>
	 
	 <p>${ timestamp}</p>
	 <p>${ nonceStr}</p>
	 <p>${ jsapi_ticket}</p>
	 <p>${ signature}</p>
	 <p>${ url}</p>
	
		
	<input type="button" value="upload" οnclick="uploadImg();"/>
	<input type="button" value="获取当前位置" οnclick="getLocation();"/>
	 
</body>	 


<script>
wx.config({
   // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: '${ timestamp}' , // 必填，生成签名的时间戳
    nonceStr: '${ nonceStr}', // 必填，生成签名的随机串
    signature: '${ signature}',// 必填，签名，见附录1
    jsApiList: ['chooseImage','getLocation','openLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

wx.ready(function(){
	alert("ready");
});

wx.error(function(){
	alert("error");
});


function uploadImg() {
	wx.checkJsApi({
	    jsApiList: ['chooseImage','openLocation','getLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
	    success: function(res) {
	        // 以键值对的形式返回，可用的api值true，不可用为false
	        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
	        alert(res);
	        wx.chooseImage({
	        	  count: 1, // 默认9
	        	  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
	        	  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
	        	  success: function (res) {
	        	    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
	        	    alert(localIds);
	        	  }
	        	});
	    }
	});
}



function getLocation() {
	
	var latitude = "";
	var longitude = "";
	
	wx.getLocation({
	    type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
	    success: function (res) {
	    	latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
	    	longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
	        var speed = res.speed; // 速度，以米/每秒计
	        var accuracy = res.accuracy; // 位置精度
	        
	        
	        wx.openLocation({
	    	    latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
	    	    longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
	    	    name: '你当前的位置', // 位置名
	    	    address: 'currentLocation', // 地址详情说明
	    	    scale: 26, // 地图缩放级别,整形值,范围从1~28。默认为最大
	    	    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
	    	});
	        
	    }
	});
	
	
	
}



</script>

</html>

erix1991

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微信公众平台js-sdk对接页面和Action

1. Action 层@RequestMapping(value = "/test") public String test2(HttpServletRequest request, HttpServletResponse response) throws IOException { String jsapi_ticket = jsapiTicket;
复制链接

扫一扫

专栏目录