<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

//微信登录
$("#wx")[0].onclick = function () {
var WxURL = 'https://open.weixin.qq.com/connect/oauth2/authorize?' +
    'appid={见第一步}' +
    '&redirect_uri=' + {授权之后跳转的网页，路径需在第一步中设置的授权回调页面域名下} +
    '?type=wx' +
    '&response_type=code' +
    '&scope=snsapi_userinfo' +
    '&state=STATE' +
    '#wechat_redirect';
    window.location.href = WxURL
};

首先调用后端接口，获取以下微信订单信息

 然后用这些参数，直接调取微信支付接口

    function onBridgeReady() {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": "{见第一步}",
                "timeStamp": {后端返回},
                "nonceStr": {后端返回},
                "package": {后端返回},
                "signType": "MD5",
                "paySign": {后端返回},
            },
            function (res) {
                console.log(res.err_code + "  " + res.err_desc + "  " + res.err_msg);
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    alertFn("充值成功");
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    alertFn("用户取消支付");

                } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                    alertFn("支付失败");
                }
            }
        );
    }

此时就需要用到微信web开发者工具的移动调试功能，Android手机按照下图所示方法连接上手机后，在手机中打开微信页面，电脑上就可以实时模拟出效果，并且可以查看network和console，打断点调试，不过这功能似乎不太稳定，有时候network和console里面会显示一片空白。相比Android，IOS调试的功能就弱化很多，能看到页面html，看不到展示的效果，能看到network，打不了断点，所以微信开发，还是建议用Android进行调试。

function withdraw() {
        $.ajax({
            type: "POST",
            url: "{后台接口}",
            data: {
                "userId": {用户id},
                "account": {用户uuid},
                "openid": {用户unionid},
                "drawFee": {订单金额},
                "actName": "{活动名称}",
                "wishing": "{祝福语}"
            },
            dataType: "json",
            success: function (res) {
                alert("请求成功");
            },
            error: function () {
                alert("请求失败");
            }
        });
    }

// 微信-修改头像
var images = {
    localId: [],
    serverId: []
};
vm.chooseImage = function () {
    wx.chooseImage({
        success: function (res) {
            images.localId = res.localIds;
            wx.uploadImage({
                localId: images.localId[0],
                success: function (res) {
                    vm.media(res.serverId);  //将微信服务器id传给后台
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        }
    });
};

//将微信服务器id传给后台
vm.media = function (mediaId) {
    otherService.media({
        mediaId: mediaId
    }).then(function (res) {
        if (res.data.code == 0) {
            console.log(res);
            vm.changeAvatar(res.data.data.url);
        } else {
            alert(res.data.message);
        }
    });
};

//上传头像
vm.changeAvatar = function (img) {
    userService.put({
        img: img
    }).then(function (res) {
        if (res.data.code == 0) {
            vm.user.img = img;
            vm.errorMsg = "修改成功";
            commonUtil.clearErrorMsg(vm);
        } else {
            vm.errorMsg = "修改失败";
            commonUtil.clearErrorMsg(vm);
        }
    });
};

http://203.195.235.76/jssdk/

PS:上面的代码分别来自两个不同的项目，所以风格不一致，不要在意细节~