java+jsp微信开发入门教程 jssdk,通过config接口注入权限验证配置,微信开发教程

1:绑定域名,先登录微信公众平台进入 设置-公众号设置-功能设置,填写“JS接口安全域名”,可在 开发-接口权限 查看对应的接口权限。




2:引入js,在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.2.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK。最好下载JS到本地。

3:微信公众平台,开发-基本配置中设置白名单,通过开发者ID及密码调用获取access_token接口时,需要设置访问来源IP为白名单。



4:通过config接口注入权限验证配置,可以通过java获取,然后在jsp页面中赋值给js用于验证,就可以调用微信的接口了。功能:扫描二维码,拍照、本地选图,图片预览,上传图片,下载图片,获取当前网络状态,查看地理位置,获取当前地理位置打开地图,关键是使用JsSignUtil获取了signature,JSP页面才可以通过JS调用微信的功能。包含json相关依赖jar包,json-lib-2.3-jdk15.jar,ezmorph-1.0.6.jar,以及httpclient-4.5.3.jar,httpcore-4.4.6.jar等。


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
%><%@ page import="java.util.*"
%><%@ page import="com.weixin.util.JsSignUtil"
%>
<%
String url = request.getRequestURL().toString();
Map<String, String> ret = new HashMap<String, String>();//从后台获取信息,用于js验证
ret = JsSignUtil.sign(url);

String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="<%=basePath%>">
<title>微信功能演示</title>
<meta name="viewport" http-equiv="Content-Type" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"> </script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
    wx.config({
        debug: false,  
        appId: '<%=ret.get("appId")%>',  
        timestamp:'<%=ret.get("timestamp")%>',  
        nonceStr:'<%=ret.get("nonceStr")%>',  
        signature:'<%=ret.get("signature")%>',  
        jsApiList : [ 'checkJsApi',
                      'scanQRCode',
                      'chooseImage',
                      'previewImage',
                      'uploadImage',
                      'downloadImage',
                      'getNetworkType',
                      'openLocation',
                      'getLocation' ]  // 必填,需要使用的JS接口列表
    });//end_config
    
    wx.error(function(res) {
        alert("出错了:" + res.errMsg);
    });
    
    wx.ready(function() {
        
        wx.checkJsApi({  
            jsApiList : ['scanQRCode'],  
            success : function(res) {
                // 以键值对的形式返回,可用的api值true,不可用为false
                // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            }
        });

        //扫描二维码
        document.querySelector('#scanQRCode').onclick = function() {
            wx.scanQRCode({
                needResult : 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码,默认二者都有
                success : function(res) {
                    var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果  
                    document.getElementById("wm_id").value = result;//将扫描的结果赋予到jsp对应值上  
                    alert("扫描成功::扫描码=" + result);
                }
            });
        };

        // 5 图片接口
        // 5.1 拍照、本地选图
        var images = {
            localId: [],
            serverId: []
          };
        document.querySelector('#chooseImage').onclick = function () {
            wx.chooseImage({
                //count: 1, // 默认9
                //sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                    images.localId = res.localIds;
                    alert('已选择 ' + res.localIds.length + ' 张图片');
                    $("#faceImg").attr("src", res.localIds[0]);//显示图片到页面上
              }
            });
          };
        
        // 5.2 图片预览
        document.querySelector('#previewImage').onclick = function () {
            wx.previewImage({
            current: 'http://www.test.com/upload/images/indexad.png',//自己更改下路径
            urls: [
                'http://www.test.com/upload/images/flash.png',
                'http://www.test.com/upload/images/indexad.png',
                'http://www.test.com/upload/images/flash.png'
            ]
            });
        };
        
        // 5.3 上传图片
        document.querySelector('#uploadImage').onclick = function () {
            if (images.localId.length == 0) {
              alert('请先使用 chooseImage 接口选择图片');
              return;
            }
            var i = 0, length = images.localId.length;
            images.serverId = [];
            function upload() {
              wx.uploadImage({
                localId: images.localId[i],
                isShowProgressTips: 1,// 默认为1,显示进度提示
                success: function (res) {
                    var serverId = res.serverId; // 返回图片的服务器端ID
                    alert("服务器图片id:"+serverId);
                    i++;
                    //alert('已上传:' + i + '/' + length);
                    images.serverId.push(res.serverId);
                    if (i < length) {
                        upload();
                    }
                },
                fail: function (res) {
                  alert(JSON.stringify(res));
                }
              });
            }
            upload();
        };
        
        // 5.4 下载图片
        document.querySelector('#downloadImage').onclick = function () {
            if (images.serverId.length === 0) {
              alert('请先使用 uploadImage 上传图片');
              return;
            }
            var i = 0, length = images.serverId.length;
            images.localId = [];
            function download() {
                wx.downloadImage({
                    serverId: images.serverId[i],
                    isShowProgressTips: 1,// 默认为1,显示进度提示
                    success: function (res) {
                        var mlocalId = res.localId; // 返回图片下载后的本地ID
                        alert("本地图片id:"+mlocalId);
                        i++;
                        alert('已下载:' + i + '/' + length);
                        images.localId.push(res.localId);
                        if (i < length) {
                            download();
                        }
                    }
                });
            }
            download();
        };
           
        // 6 设备信息接口
        // 6.1 获取当前网络状态
        document.querySelector('#getNetworkType').onclick = function () {
            wx.getNetworkType({
              success: function (res) {
                alert(res.networkType);
              },
              fail: function (res) {
                alert(JSON.stringify(res));
              }
            });
        };
        //网络接口结束

        // 7 地理位置接口 开始
        // 7.1 查看地理位置
        document.querySelector('#openLocation').onclick = function () {
            wx.openLocation({
              latitude: 23.199994,
              longitude: 116.324520,
              name: '名称',
              address: '广州市',
              scale: 14,
              infoUrl: 'http://weixin.qq.com'
            });
          };
        
        // 7.2 获取当前地理位置
        document.querySelector('#getLocation').onclick = function () {
            wx.getLocation({
              success: function (res) {
                  var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                    var longitude = res.longitude ; // 经度,浮点数,范围为180 ~ -180。
                    var speed = res.speed; // 速度,以米/每秒计
                    var accuracy = res.accuracy; // 位置精度
                alert(JSON.stringify(res));
              },
              cancel: function (res) {
                alert('用户拒绝授权获取地理位置');
              }
            });
        };

        // 7.3 获取当前地理位置打开地图
        document.querySelector('#getLocationMap').onclick = function () {
            wx.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                success: function (res) {
                    //使用微信内置地图查看位置接口  
                    wx.openLocation({  
                        latitude : res.latitude, // 纬度,浮点数,范围为90 ~ -90  
                        longitude : res.longitude, // 经度,浮点数,范围为180 ~ -180。  
                        name : '当前位置', // 位置名  
                        address : '', // 地址详情说明  
                        scale : 28, // 地图缩放级别,整形值,范围从1~28。默认为最大  
                        infoUrl : 'http://weixin.qq.com' // 在查看位置界面底部显示的超链接,可点击跳转(测试好像不可用)  
                    });

              },
              cancel: function (res) {
                alert('用户拒绝授权获取地理位置');
              }
            });
        };
        // 7 地理位置接口 结束
          
    });//end_ready  
</script>
</head>

<body>
<input type="text" id="wm_id" name="wm_id" value="">
<button id="scanQRCode" >扫描二维码</button><br>

<p>基础接口之判断当前客户端是否支持指定的js接口</p>   
<input type="button" value="checkJSAPI" id="checkJsApi"><br>
<span class="desc" style="color: red">地理位置接口-使用微信内置地图查看位置接口</span><br>
<button class="btn btn_primary" id="getLocationMap">getLocationMap</button><br>
<button class="btn btn_primary" id="openLocation">openLocation</button><br>
<span class="desc" style="color: red">地理位置接口-获取地理位置接口</span><br>
<button class="btn btn_primary" id="getLocation">getLocation</button><br>

<div>
<span class="desc" style="color: red">获取网络状态接口</span><br>
<button class="btn btn_primary" id="getNetworkType">getNetworkType</button><br>
<h3 id="menu-image">图像接口</h3>
<span class="desc">拍照或从手机相册中选图接口</span><br>
<button class="btn btn_primary" id="chooseImage">chooseImage</button><br>
<span class="desc">预览图片接口</span><br>
<button class="btn btn_primary" id="previewImage">previewImage</button><br>
<span class="desc">上传图片接口</span><br>
<button class="btn btn_primary" id="uploadImage">uploadImage</button><br>
<span class="desc">下载图片接口</span><br>
<button class="btn btn_primary" id="downloadImage">downloadImage</button><br>

<br>
显示图片<img alt="" src="" id="faceImg">
</div>

</body>
</html>


JsSignUtil和WeixinUtil里面
private static final String APPID = "wx5273e9f0edd7****";//改为你自己公众号的APPID
private static final String APPSECRET = "1496052a0937834fd7593a6d1e74****";//改为你自己公众号的APPSECRET


源码下载地址,http://download.csdn.net/download/greenfly/10106096,设置一下公众号的APPID和APPSECRET就可以使用了



展开阅读全文

没有更多推荐了,返回首页