微信分享与支付开发详解

最新推荐文章于 2024-08-21 18:36:42 发布
chuanxune0555
最新推荐文章于 2024-08-21 18:36:42 发布
阅读量246
点赞数
文章标签：移动开发后端 javascript ViewUI
原文链接：https://my.oschina.net/u/2405524/blog/614510
版权
//第一部分 微信分享
//参考：https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
//步骤一：绑定域名
    //先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
//步骤二：引入JS文件
    //在需要调用JS接口的页面引入如下JS文件，（支持https）：
//http://res.wx.qq.com/open/js/jweixin-1.0.0.js
    //请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，
//否则将无法在iOS9.0以上系统中成功使用JSSDK
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src=" 
//步骤三：通过config接口注入权限验证配置
    wx.config({
        debug: true, 
        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，
        //若要查看传入的参数，可以在pc端打开，
        //参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: , // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名，见附录1
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline']，
        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        success:function(res){
            alert(res.errMsg);
        },
        fail:function(res){
            alert(res.errMsg);
        }
    });
    //参数说明：
    //1.appid:开发--->基本配置 可以看到有AppID和AppSecret 得APPID
    //2.timestamp:此处的timestamp与大家说的大写的timeStamp没有关系 
    //  此刻是2016/02/11 21:27 即为2016021121 本人开发只到的'时'这个单位 更后面分秒毫秒未测试
    //3.nonceStr:随机字符串 自己生成 不长于32位
    //4.signature:签名 
    //  生成签名的算法：签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 
    //  有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。
    //  对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，(即按字母序排好参与签名字段)
    //  使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。
    //  这里需要注意的是所有参数名均为小写字符，获得string1。
    //  对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
    //  (SHA1加密后对结果取小写即sha1)
    //  此处生成签名的时候需要获取jsapi_ticket与access_token是有时效性的，
    //  需要开发者自己去写维护程序,而获取两者的方法可以参考开发文档，按照开发文档没有任何模糊的地方。
    //  签名验证工具：  
    //5.jsApiList:['','','',''] 此参必填，需将要调用的JS接口写入，未写入不可成功调用，先认证后调用
    //6.success,fail:两个分别在验证成功、失败后调用，res接受返回的参数。
    //  调用成功时："xxx:ok" ，其中xxx为调用的接口名 调用失败时：其值为具体错误信息
    //  用户取消时："xxx:cancel"，其中xxx为调用的接口名
//步骤四：通过ready接口处理成功验证
    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
        // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
        // 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
        // 则可以直接调用，不需要放在ready函数中。
        // 调用JS分享接口
        // 分享到朋友圈
        wx.onMenuShareTimeline({
            title: '', // 分享标题
            link: '', // 分享链接
            imgUrl: '', // 分享图标//IOS开发的时候可能会有格式要求与大小要求 注意
            success: function (res) { 
                // 用户确认分享后执行的回调函数
                alert(res.errMsg);
            },
            cancel: function (res) { 
                // 用户取消分享后执行的回调函数
                alert(res.errMsg);
            }
        });
        // 分享给朋友
        wx.onMenuShareAppMessage({
            title: '', // 分享标题
            desc: '', // 分享描述
            link: '', // 分享链接
            imgUrl: '', // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function (res) { 
                // 用户确认分享后执行的回调函数
                alert(res.errMsg);
            },
            cancel: function (res) { 
                // 用户取消分享后执行的回调函数
                alert(res.errMsg);
            }
        });
    });
//注意
    //1.在微信内打开的网页如果需要分享，只能在当前网页进行分享，且分享的URL只能是当前网页的URL，
    //  不能指向第三网页，否则会无效，获取当前网页的URL可以使用JS弹出window.location.href.
    //2.如果是APP中内嵌的H5页面，可以通过调用APP原生接口来实现分享，将所要分享的页面参数传递，
    //  当在微信中打开APP分享的页面，如果当前页面的URL与JS.con
    //3.微信分享的JS接口调用存在的问题，当用户分享的URL与微信浏览器抓取的当前网页的URL不同时，
    //  分享效果失效，微信会以抓取结果为准，分享当前网页，描述信息变为网页链接地址，图片可能为空
    //4.URL相同是指?前面的部分相同，问好后面的部分可以不同

    
//第二部分：微信支付开发，调用JS支付
//参考：https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=9_1
//整体流程：商户生成自己的订单-->访问微信服务器获取预支付订单-->调用JS支付接口发起支付 
    //  (这中间还有相关的一些微信内部的校验)
//第一部分：当用户点击生成订单的时候，在商户数据库生成订单，订单包含支付的一些必须参数。
//第二部分：调用统一下单API发起HTTPS请求 请求数据为xml形式的字符串
    //<xml>
    //   <appid>wx2421b1c4370ec43b</appid>
    //   <attach>支付测试</attach>
    //   <body>JSAPI支付测试</body>
    //   <mch_id>10000100</mch_id>
    //   <nonce_str>1add1a30ac87aa2db72f57a2375d8fec</nonce_str>
    //   <notify_url>http://wxpay.weixin.qq.com/pub_v2/pay/notify.v2.php</notify_url>
    //   <openid>oUpF8uMuAJO_M2pxb1Q9zNjWeS6o</openid>
    //   <out_trade_no>1415659990</out_trade_no>
    //   <spbill_create_ip>14.23.150.211</spbill_create_ip>
    //   <total_fee>1</total_fee>
    //   <trade_type>JSAPI</trade_type>
    //   <sign>0CB01533B8C1EF103065174F50BCA001</sign>
    //</xml>
    //注意：
    //1.请求方式为post，编码方式为UTF-8
    //2.支付金额total_fee单位为分
    //3.mch_id商户号：微信支付-->商户信息-->基本信息中的商户号
    //4.device_info：PC网页或公众号内支付请传"WEB"
    //5.sign：参考  
    //  生成签名需要注意的地方：签名正确返回值错误时极有可能是把AppSerceat与key值弄混了
    //  key值-->微信商户平台(pay.weixin.qq.com)-->账户设置-->API安全-->密钥设置 
    //  加密方式：MD5 所有字符大写 
    //  验证签名正确性的地址工具： 可添加删除属性
    //6.out_trade_no:商户订单号 重要 即订单号
    //7.spbill_create_ip:支付端IP地址 此处可能存在多个地址 提供个人JAVA获取IP地址实现代码
    public static String getClientIp(HttpServletRequest request) {
        String ip = request.getHeader("x-forwarded-for");
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getHeader("Proxy-Client-IP");
        }
        if (ip == null || ip.length() == 0 || "unknow".equalsIgnoreCase(ip)) {
            ip = request.getHeader("WL-Proxy-Client-IP");
        }
        if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
            ip = request.getRemoteAddr();
        }
        //目前使用第一个获取的值是没有问题的
        return ip.split(",")[0];
    }
    //8.time_start：交易起始时间，yyMMddHHmmss
    //9.notify_url：微信支付成功的回调地址 重要 必须为可以直接访问到的地址
    //10.trade_type：JSAPI，APP 微信内支付-->JSAPI APP调用的微信支付-->APP
    //11.openid：重要 当在微信内支付的时候必须传用户的openid
    //  开发文档+如上说明 完成支付下单的预操作 参数交互为xml形式的字符串 
    //  返回结果可先判断结果请求状态码是否是200 再从结果的content中获取字符串解析获取预支付单号
//第三部分：调用JS接口发起支付
    //1.发起支付调用的JS接口必须先做认证 即先调用wx.config接口
    //2.认证成功之后发起支付请求，调用的支付JS接口需在wx.config的jsApiList中写入，接口如下
    wx.ready(function(){
        wx.chooseWXPay({
            timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。
                          //但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: '', // 支付签名随机串，不长于 32 位
            package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
            signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: '', // 支付签名
            success: function (res) {
                // 支付成功后的回调函数
                alert(res.errMsg);
            }
        });
    });
    //注意：
    //1.prepay_id 通过微信支付统一下单接口拿到，
    //2.paySign 采用统一的微信支付 Sign 签名生成方法，注意这里 appId 也要参与签名，
    //  appId 与 config 中传入的 appId 一致，
    //  即最后参与签名的参数有appId, timeStamp, nonceStr, package, signType。
    //  此处注意：签名时候的timeStamp s大写 调用JS接口的时候的timestamp s小写
    //3.*****请注意该接口只能在你配置的支付目录下调用，同时需确保支付目录在JS接口安全域名下。
    //  注意："${pageContext.request.contextPath }/weixin/js/pay/?order_id="+data;
    //  以上为我发起微信支付的URL，注意URL?之前的最后一个为'/'，这个'/'如果缺少会出错
    //  支付目录设置地址：微信支付-->开发配置-->支付授权目录 开发使用测试授权目录即可
    //4.此处使用的paySign的生成方式为  
    //  参与签名的字段除了上述appId, timeStamp, nonceStr, package, signType，还包含key值
    //5.wx.config的认证签名按照分享的来，使用sha1加密，与key无关
    //6.使用APP调用微信支付的SDK的时候需要在后端访问微信服务器发起预支付请求，个别字段会与现在不一样，
    //  请参考统一下单API
    
    
    //以上
    //如有不妥 请指出 本人已完成相关开发 后端开发工程师
    //相关问题可以发往邮箱：free.dream.fate@gmail.com
转载于:https://my.oschina.net/u/2405524/blog/614510
chuanxune0555
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信分享与支付开发详解

//第一部分微信分享//参考：https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html//步骤一：绑定域名//先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。//步...
复制链接

扫一扫