微信公众号开发之获取用户信息、微信支付、扫一扫

BooleanChar · 发表于 2018-1-5 14:53:13

本帖最后由 BooleanChar 于 2018-3-13 10:24 编辑

我的公众号类型是服务号，开发环境是3.7
▶ 我的需求：
1.在公众号中设置一个自定义菜单用于跳转到指定页面，在点击这个菜单的同时，要获取当前微信用户的openid、昵称、头像等信息，并存到缓存中，待以后做保存功能使用；见2楼
2.在页面输入框中输入需要缴费的金额，点击缴费按钮，把当前页面需要保存的信息保存到临时表，并调起微信支付，支付刚才输入的金额； 见3楼
3.在支付的回调中取微信返回来的参数(return_code、result_code)，根据返回的参数判断是否支付成功，成功的话根据当前的商户订单号查询微信订单号是否为空，如果为空，就把微信订单号update到这条信息中； 见4、5楼
4.点击扫一扫按钮，调起微信内扫一扫，扫描条码后，取出条码号并set到输入框中 见6楼
5.微信内设置标题见9楼

BooleanChar · 发表于 2018-1-5 15:36:23

本帖最后由 BooleanChar 于 2018-1-5 17:32 编辑

♠ 自定义菜单和获取当前微信用户信息
1.配置config文件:
  1)路径在baas/weixin/weixin.config.xml
  2)把文件中的appid、secret、token、aesKey，改为自己公众号对应的信息
2.配置网页授权回调域名
  1)把已经备案的域名写到微信公众平台-公众号设置-功能设置-网页授权域名
  2)把文件MP_verify_hX9ao9OUktVXgrzX.txt(该文件在设置网页授权域名时能看到)上传至填写域名或路径指向的web服务的目录(路径：apache-tomcat-webapps-ROOT)
3.配置自定义菜单跳转网页的页面地址
  1)url格式为：https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己公众号的appid&redirect_uri=编码后的域名&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
例如：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx33352bad414d416c&redirect_uri=http%3A%2F%2Fpublic-charge.net%2Fx5%2FUI2%2Fpsd%2Fapp%2Findex.w&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
4.在index.w页面的onLoad事件中引用获取用户信息action

Model.prototype.modelLoad = function(event) {

            var weixinCode = this.getContext().getRequestParameter("code");
            var tradeNo = justep.UUID.createUUID();

            if (weixinCode != "") {

                     justep.Baas.sendRequest({
                              "url" : "/weixin/weixin",
                              "action" : "userinfo",
                              "async" : false,
                              "params" : {
                                    code : weixinCode
                              },
                              "success" : function(wxUser) {
                                    localStorage.setItem("nickname", wxUser.nickname);
                                    localStorage.setItem("headimgurl", wxUser.headimgurl);
                                    localStorage.setItem("openid", wxUser.openid);
                                    localStorage.setItem("sex", wxUser.sex);
                              },
                              "error" : function(ss) {
                                    alert("失败");
                              }
                     });
            } else {
                     alert("code为空");
            }
            };

以上完成微信自定义菜单和获取当前微信用户信息

BooleanChar · 发表于 2018-1-5 15:50:31

本帖最后由 BooleanChar 于 2018-1-5 17:26 编辑

♥ 微信支付
1.配置config文件
  1)路径在baas/weixin/weixin.config.xml
  2)把文件中appKey，改为自己公众号对应的信息
2.配置JS接口安全域名
  1)把已经备案的域名写到微信公众平台-公众号设置-功能设置-JS接口安全域名
  2)把文件MP_verify_hX9ao9OUktVXgrzX.txt上传至填写域名或路径指向的web服务的目录(路径：apache-tomcat-webapps-ROOT)
3.在需要调起微信支付的页面写一个微信支付方法
   Model.prototype.payOrderByWeixinJSSDK = function(payDtd, orderID) {

debugger;

var self = this;

if (!navigator.WxApi) {

payDtd.reject(-33);

return;

}

if (justep.Browser.isWeChat) {

this.wxApi = new navigator.WxApi("wx33352bad414d416c");

}

var pay = this.comp("input1").val();

var notifyUrl = location.origin + "/baas/weixin/weixin/notify";

this.wxApi.chooseWXPay({

body : "缴费",

mchId : "1490457902",

notifyUrl : notifyUrl,

outTradeNo : orderID,

totalFee : pay * 100

}).done(function(obj) {

self.PaidPRO();

self.payType.disabled = false;

payDtd.resolve(2);

}).fail(function() {

self.payType.disabled = false;

payDtd.reject(-20);

});

};

4.在按钮点击事件调用上面的微信支付方法

var payDtd = $.Deferred();
var orderID = justep.UUID.createUUID();
this.payOrderByWeixinJSSDK(payDtd, orderID);

复制代码

5.配置微信支付授权目录
  1)在手机端，点击按钮进入自己绑定的跳转页面，然后复制链接，把链接粘贴到商户平台-产品中心-开发配置中，不用具体到页面，到页面的上一级目录即可
例如：http://public-charge.net/x5/UI2/v_6162_1_0l_zh_CNs_d_m/psd/app/    ✔
      http://public-charge.net/x5/UI2/v_6162_1_0l_zh_CNs_d_m/psd/app/index.w ✘

以上步骤即可实现微信支付功能

BooleanChar · 发表于 2018-1-5 16:27:57

本帖最后由 BooleanChar 于 2018-1-5 16:44 编辑

♣ 微信支付回调

用官方的话说：微信公众号支付的回调中，返回的参数并不在url中，而是在请求的body中
1.自己写一个获取报文的方法：

public static String charReader(HttpServletRequest request) {
BufferedReader br;
String str, wholeStr = "";
try {
br = request.getReader();
while ((str = br.readLine()) != null) {
wholeStr += str;
}
} catch (IOException e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
}
return wholeStr;
}

复制代码

2.解析报文

/* 读取tag信息 */
public static String getXMLCDATA(String requestStr, String tagName) {
String beginTagName = "<" + tagName + "><![CDATA[";
String endTagName = "]]></" + tagName + ">";
boolean flagIsLong = false;
String str = null;
if ("total_fee".equals(tagName)) {
flagIsLong = true;
}
if (flagIsLong) {
beginTagName = "<" + tagName + ">";
endTagName = "</" + tagName + ">";
}
int beginIndex = requestStr.indexOf(beginTagName) + beginTagName.length();
int endIndex = requestStr.indexOf(endTagName);
str = requestStr.substring(beginIndex, endIndex);
return str;
}

复制代码

BooleanChar · 发表于 2018-1-5 16:41:25

本帖最后由 BooleanChar 于 2018-1-5 16:43 编辑

3.在doNotify方法中调用以上两个方法

private static void doNotify(HttpServletRequest req, HttpServletResponse resp) throws IOException {
resp.setContentType("text/xml;charset=utf-8");
resp.setCharacterEncoding("utf-8");
//获取报文
String notify = charReader(req);
//解析报文，拿到所需参数的返回值
String resultCode = getXMLCDATA(notify, "return_code");
if ("SUCCESS".equals(resultCode)) {
String result_code = getXMLCDATA(notify, "result_code");
if (result_code.equals("FAIL")) {
String err_code = getXMLCDATA(notify, "err_code");
String err_code_des = getXMLCDATA(notify, "err_code_des");
String out_trade_no = getXMLCDATA(notify, "out_trade_no");
log.info("有一个交易失败[" + err_code + "]:" + err_code_des + "out_trade_no:" + out_trade_no);
} else if (result_code.equals("SUCCESS")) {
String out_trade_no = getXMLCDATA(notify, "out_trade_no");
log.info("订单:" + out_trade_no + ",交易成功");
}
} else if ("FAIL".equals(resultCode)) {
String returnMsg = req.getParameter("return_msg");
log.error("有失败交易需要关注:" + returnMsg);
} else {
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("不要闹！");
return;
}
resp.getWriter().write("<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>");
}
}

复制代码

BooleanChar · 发表于 2018-1-5 16:52:40

本帖最后由 BooleanChar 于 2018-1-5 17:29 编辑

♦ 微信扫一扫

1.在扫一扫按钮点击事件中，写扫一扫方法

1)引用var scan = require('$UI/system/api/native/scan');
2)写点击事件代码：

//扫一扫
Model.prototype.sysBtnClick = function(event){
var input1 = this.comp("input1");
scan.scanQRCode({
needResult : 1,
desc : 'scanQRCode desc',
success : function(res) {//取扫描后的条码，并set到输入框中
var no = res.resultStr.split(',')[1];
input1.set({value: no});
},
fail : function(res) {
alert("fail:" + JSON.stringify(res));
}
});
};

复制代码

2.更改UI2/system/config/config.json文件
1)添加debug:false，更改wxAppId

{
"wxAppId" : "wx33352bad414d416c",
"wxJSApiUrl" : "/baas/weixin/weixin/jsapi",
"wxUserInfoUrl" : "/baas/weixin/weixin/userinfo",
"wxShareHintMsg": "请点击右上角“微信菜单”中的按钮分享",
"uploadActionUrl" : "$UI/system/service/doc/common/simpleFileStore.j",
"mchId" : "1490457902",
"debug" : false
}

复制代码

BooleanChar · 发表于 2018-1-5 17:12:22

本帖最后由 BooleanChar 于 2018-1-5 17:30 编辑

▶开发中遇到的问题
1.微信自定义菜单(同时获取微信用户信息)：
  1)我参照http://www.wex5.com/1-wex5#03第十一讲开发微信公众号视频操作，连接不上我的公众号；
  2)在定义菜单跳转网页的页面地址时，没有把appid设置为自己公众号的appid
2.微信支付：
  1)微信支付一闪而过
  2)微信支付授权目录配置有误
  3)微信支付的回调获取不到微信的返回值
  4)微信返回的参数都是null
3.微信扫一扫：
  1)点扫一扫总有弹出框
  2)扫描后获取条码号时，取值有问题

有遇到以上问题的可以找我交流

dzq · 发表于 2018-2-24 21:23:19

非常感谢楼主的分享，很详细。为您的这种分享的精神点赞

BooleanChar · 发表于 2018-3-13 10:17:52

本帖最后由 BooleanChar 于 2018-3-13 10:20 编辑

☀ 微信中设置标题
1.在onload事件中添加如下代码：

// 设置微信标题
var $body = $('body');
document.title = '自定义标题';
// hack在微信等webview中无法修改document.title的情况
var $iframe = $('<iframe src="/favicon.ico"></iframe>');
$iframe.on('load', function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0);
}).appendTo($body);

复制代码

qiuxinw66 · 发表于 2018-3-13 12:17:36

不错基操

		自动登录	找回密码
密码			注册

[分享] 微信公众号开发之获取用户信息、微信支付、扫一扫

评分