调用微信 Js SDK

$(document).ready(function(){
    var url = location.href.split(‘#‘)[0];  //在后台调微信javaAPI获取签名,见getWechatConfig(String url),返回WechatConfig{private String appId; private String timestamp; private String nonceStr; private String signature;}    $.get(rootPath + "/wechat/member/user/getWechatConfig?url=" + url,"",function(data){
        wx.config({
            debug: false,
            appId: data.appId,//appid
            nonceStr: data.nonceStr,//随机数
            signature: data.signature,//签名
            timestamp: parseInt(data.timestamp),//时间戳
            jsApiList: [//需要用到的微信jsAPI列表,可照此全搞上
                ‘checkJsApi‘,
                ‘onMenuShareTimeline‘,
                ‘onMenuShareAppMessage‘,
                ‘onMenuShareQQ‘,
                ‘onMenuShareWeibo‘,
                ‘hideMenuItems‘,
                ‘showMenuItems‘,
                ‘hideAllNonBaseMenuItem‘,
                ‘showAllNonBaseMenuItem‘,
                ‘translateVoice‘,
                ‘startRecord‘,
                ‘stopRecord‘,
                ‘onRecordEnd‘,
                ‘playVoice‘,
                ‘pauseVoice‘,
                ‘stopVoice‘,
                ‘uploadVoice‘,
                ‘downloadVoice‘,
                ‘chooseImage‘,
                ‘previewImage‘,
                ‘uploadImage‘,
                ‘downloadImage‘,
                ‘getNetworkType‘,
                ‘openLocation‘,
                ‘getLocation‘,
                ‘hideOptionMenu‘,
                ‘showOptionMenu‘,
                ‘closeWindow‘,
                ‘scanQRCode‘,
                ‘chooseWXPay‘,
                ‘openProductSpecificView‘,
                ‘addCard‘,
                ‘chooseCard‘,
                ‘openCard‘
            ]
        });
    });

    var idCardPositive = "";//个人信息所在面
    var idCardOpposite = "";//国徽图案面
    var idCardHand = "";//手持证件照
    wx.ready(function () {
        /**
         * 选择图片
         */
        document.querySelector(‘#idCardPositive‘).onclick = function () {
            selectImage("idCardPositive");
        };

        document.querySelector(‘#idCardOpposite‘).onclick = function () {
            selectImage("idCardOpposite");
        };

        document.querySelector(‘#idCardHand‘).onclick = function () {
            selectImage("idCardHand");
        };

        function selectImage(id){
            wx.chooseImage({
              success: function (res) {
                //alert("选择成功:" + res.localIds);
                $("#" + id +"Img").attr("src",res.localIds);
                $("#" + id +"FileDiv").css("display","none");
                $("#" + id +"ImgDiv").css("display","block");
                wx.uploadImage({
                    localId: res.localIds.toString(),
                    isShowProgressTips:1,
                    success : function(res){
                        //alert("上传成功" + res.serverId);              //用Js-SDK上传成功后,再用res.serverId和token去微信服务器下载它,接着把下载的图片上传到linux服务器,返回图片在linux服务器的地址,预览是按这个地址显示的,最后提交表单时也是按这个地址更新数据库表字段              $.get(rootPath + "/wechat/member/user/uploadImgToService?mediaId=" + res.serverId.toString(),"",function(result){
                            if(result != ""){
                                if(id == "idCardPositive"){
                                    idCardPositive = result;
                                }else if(id == "idCardOpposite"){
                                    idCardOpposite = result;
                                }else if(id == "idCardHand"){
                                    idCardHand = result;
                                }
                            }
                        });
                        /*wx.downloadImage({
                              serverId: res.serverId.toString(),
                              isShowProgressTips: 1,
                              success: function(res){
                                  //alert("下载成功:" + res.localId);
                              }
                          });*/
                    },
                    fail: function(res){
                        alert("上传失败" + res.errMsg);
                    }
                });
              }
            });
        }

        /**
         * 预览图片
         */
        document.querySelector(‘#idCardPositiveImg‘).onclick = function () {
            if(idCardPositive != "")
                previewImage(idCardPositive);
        };

        document.querySelector(‘#idCardOppositeImg‘).onclick = function () {
            if(idCardOpposite != "")
                previewImage(idCardOpposite);
        };

        document.querySelector(‘#idCardHandImg‘).onclick = function () {
            if(idCardHand != "")
                previewImage(idCardHand);
        };
        function previewImage(imgUrl){
            wx.previewImage({
                current: imgUrl, // 当前显示图片的http链接,格式是这样的:http://49.4.173.202:8080/upload/EmnDyzDYhVQjbMB3gjV5jUFu.jpg
                urls: [imgUrl] // 需要预览的图片http链接列表,当只有一张图片时要填current的值,空着手机不能显示
            });
        }

        /**
         * 提交
         */
        document.querySelector(‘#subBtn‘).onclick = function () {
            if(isNull($("#realName").val())){
                alert("请填写真实姓名");
                return false;
            }else if(isNull($("#idCard").val())){
                alert("请填写身份证号");
                return false;
            }else if(isNull(idCardPositive) || isNull(idCardOpposite) || isNull(idCardHand)){
                alert("请上传身份证照片");
                return false;
            }

              $.get(rootPath + "/wechat/member/user/identityAuthentication",
            {
                realName:$("#realName").val(),//姓名
                idCard:$("#idCard").val(),//身份证号码
                idCardPositive:idCardPositive,//身份证正面图片
                idCardOpposite:idCardOpposite,//国徽图案面
                idCardHand:idCardHand,//手持身份证图片
                openId:getOpenidByUrl()
            },function(result){
                if(result.status){
                    alert("提交成功");
                    location.href = "verify.html";
                }else{
                    alert("提交失败");
                }
            });
        };

    });

    wx.error(function (res) {
        alert(res.errMsg);
    });

});

此API很坑爹,文档也不详

1.获取签名:

url必须是引入<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>的页面,最好在前台获取传到后台,后台写死不行,哪怕写的跟前台获取的一模一样

nonceStr、timestamp自己产生,wx.config依然用这个,必须;jsapi_ticket调https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi用Get获取

public static WechatConfig getWechatConfig(String url) throws Exception {
        WechatConfig wechatConfig = new WechatConfig();
        wechatConfig.setAppId(APPID);
        String nonceStr = UUID.randomUUID().toString();
        if (nonceStr.indexOf("-") != -1)
            nonceStr.replaceAll("-", "");
        wechatConfig.setNonceStr(nonceStr);
        String timestamp = Long.toString(System.currentTimeMillis() / 1000);
        wechatConfig.setTimestamp(timestamp);
        String str = "jsapi_ticket=" + getJsapiTicket().getTicket()
                + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url="
                + url;
        logger.info("str:" + str);

        MessageDigest crypt = MessageDigest.getInstance("SHA-1");
        crypt.reset();
        crypt.update(str.getBytes("UTF-8"));
        String signature = byteToHex(crypt.digest());
        wechatConfig.setSignature(signature);
        logger.info("wechatConfig:" + JsonMapper.toJsonString(wechatConfig));
        return wechatConfig;
    }

2.语法

最好少用jquery语法,因为有的支持IOS不支持安卓,例如var array = new Array(); var map = new Map();有的全不支持,例如$("#id").click(function(){alert("全都不支持!")})

时间: 2024-11-07 23:53:59

调用微信 Js SDK的相关文章

实战微信JS SDK开发:贺卡制作与播放(1)

前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细说吧. 最近同事用CanTK开发了一个基于微信的贺卡制作APP,我虽然没有参与开发,但是提供CanTK和GameBuilder的技术支持,觉得有些东西比较有意思,写几篇博客和大家分享吧.这个贺卡APP完全开源,有需要的朋友可以随意修改和发布. CanTK(Canvas ToolKit)是一个开源的游

微信js sdk上传多张图片

微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="11111111111111111111"; $secret="11111111111111111111"; $token = S('access_token'); if (!$token) { $res = file_get_contents("https://api.weixin.qq.c

微信JS SDK配置授权,实现分享接口

微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑,后面看到"config:ok"的时候真的算是石头落地,瞬间感觉世界很美好.. 这篇文章是微信开发的很多前置条件,包括了服务端基于JAVA的获取和缓存全局的access_token,获取和缓存全局的jsapi_ticket,以及前端配置授权组件封装,调用分享组件封装. 配置授权思路:首先根据

微信JS SDK使用权限签名算法

jsapi_ticket 生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据.正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取.由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket . 参考以下文档获取access_token(有效期7200秒,开发者必须在自己的

微信JS SDK开发 共享问题小结

首先,我要吐槽一下这个SDK,看了第一遍,完全不知所云,一会获取这个,一会获取那个,也没确切的告诉怎么获取. 和腾讯客服(拿钱不干事的好工作)讨教,人家不懂技术,不知道怎么解决,也没有相关技术人员对应这一块.总共费时 将近一周的时间才把这块弄懂.期间遇到的部分问题以及如何解决分享给大家,欢迎大家一起讨论并指正. 问题1:JS接口安全域名,你所有想要使用的微信接口,要在这个域名内部进行,不能在本地进行相关调试. 问题2:公众账号要求:必须是已经认证的. 问题3:配置config(PS:开启debu

关于微信JS SDK接口wx.previewImage预览接口的使用

然后后之前的项目,突然往微信上迁移了,一些微信的接口没怎么用过,比较陌生,这次的功能是想调用微信的接口,实现图片放大的功能, 就找到官方文档:http://qydev.weixin.qq.com/wiki/index.php?title=微信JS-SDK接口#.E9.A2.84.E8.A7.88.E5.9B.BE.E7.89.87.E6.8E.A5.E5.8F.A3 引入JS 按照要求配好了config,按照接口调用 因为读图片的时候,有一个src的变量,我就直接把这个src的变量赋给了curr

微信js sdk分享开发摘记java版

绑定域名和引入js的就不说了 废话不说直接上代码 1 public void share(HttpServletRequest request) throws Exception { 2 3 StringBuffer homeUrl = request.getRequestURL(); 4 String queryString =request.getQueryString(); 5 if(StringUtils.isNotBlank(queryString)){ 6 homeUrl.appen

微信JS SDK Demo

微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置原文:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html 一.JS部分 wx.ready(function () { // 1 判断当前版本是否支持指定 JS 接口,支持批量判断 document.querySelector('#checkJsApi').onclick = function () { wx.

微信JS SDK PHP Demo

一.JSSDK类定义 <?php class JSSDK { private $appId; private $appSecret; public function __construct($appId, $appSecret) { $this->appId = $appId; $this->appSecret = $appSecret; } public function getSignPackage() { $jsapiTicket = $this->getJsApiTicke