[微信] 开发微信小程序代码实战
开发微信小程序流程 接入微信小程序 > 代码开发 > 提交审核和发布
接入
接入是指在微信平台注册和相关身份信息认证
1:微信公众平台(https://mp.weixin.qq.com/) 注册小程序,获取唯一标识AppId ,和相关身份信息认证
2:微信商户平台(https://pay.weixin.qq.com/) 注册,获取商户信息,支付场景用到
开发准备
- IDE:官方提供的 微信开发者工具，方便可以直接使用微信提供的各种API,解决自己电脑开发环境需要指定ip,提供平台认证繁琐流程
- 后台API: 安全起见,相关的登录和统一下单支付交由后台后台接口实现, 小程序发送后台请求需要再头部传入token,进行省份信息确认
代码开发
小程序代码结构图
------img 图片资源相关
------pages
.------- 模块代码实现
------utils
http.js 微信请求包装类
wx.js 登录包装类
------app.js 主入口,
------app.json 主入口配置
------app.wxss 样式
app.js,里面存放全局常量参数,其他模块可以直接通过getApp() 来获取下面信息
//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now());
wx.setStorageSync('logs', logs);
},
config: {
baseUrl: "********",
key: "**********",
appid: "**********"
}
})
app.json 置顶小程序路由跳转(pages) ,基本信息(window), 底部导航菜单(tabBar)
{
"pages":[
"pages/index/index",
"pages/romance/romance",
"pages/release/release",
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#fea213",
"navigationBarTitleText":"第一个小程序",
"navigationBarTextStyle":"#fff"
},
"tabBar":{
"color":"#dddddd",
"selectedColor":"#3cc51f",
"borderStyle":"white",
"backgroundColor":"#ffffff",
"list":[{
"pagePath":"pages/index/index",
"iconPath":"img/home.png",
"selectedIconPath":"img/home1.png",
"text":"首页"
},
{
"pagePath":"pages/romance/romance",
"iconPath":"img/manager.png",
"selectedIconPath":"img/manager1.png",
"text":"个人中心"
}
]
}
}
http.js 封装rest服务包装类,其他模块方便直接调用,不用写繁琐代码
classHttp {
app;
constructor() {
this.app =getApp();
}
get(url,callback) {
var instance =this;
wx.request({
url: instance.app.config.baseUrl +url,
data: {},
method: 'GET',
header: {
'token':encodeURI(wx.getStorageSync("token")),
'content-type':'application/json'
},
success: function (res) {
if (res.data.errorCode =='user_not_login') {
wx.clearStorageSync();
}
if (callback)callback(res);
},
fail: function (res) {
console.log(res);
}
})
}
post(url,data,callback) {
var instance =this;
wx.request({
url: instance.app.config.baseUrl +url,
data: data,
method: 'POST',
header: {
'token':encodeURI(wx.getStorageSync("token")),
'content-type':'application/json'
},
success: function (res) {
if (res.data.errorCode =='user_not_login') {
wx.clearStorageSync();
}
if (callback)callback(res);
},
fail: function (res) {
console.log(res);
}
});
}
}
module.exports =Http;
wx.js 用来实现微信登录,获取用户基本信息 ,调用后台接口 url: app.config.baseUrl + "user/wxlogin",,取得关键的openId,
class WxService {
app;
constructor() {
this.app =getApp();
}
login(app,callback) {
var page =this;
wx.login({
success: function (re) {
if (re.code) {
wx.getUserInfo({
success: function (res) {
wx.setStorageSync('userInfo',res.userInfo);
var data = {
'username':re.code,
'userSaveBean': {'username':'','password':'','name':res.userInfo.nickName,'birth':newDate().getTime,'address':res.userInfo.city,'mobile':13111111111,'headimg':res.userInfo.avatarUrl }
}
wx.request({
url: app.config.baseUrl +"user/wxlogin",
data: data,
method: 'POST',
header: {
'content-type':'application/json'
},
success: function (res) {
var yxNum =res.data.responseBody.username;
wx.setStorageSync('yxNum',yxNum);
wx.setStorageSync('openId',res.data.responseBody.openid);
var token =page.pwd(res.data.responseBody.openid,app.config.code,app.config.key);
wx.setStorageSync('token',token);
if (callback)
callback();
},
fail: function (res) {
console.log(res);
}
});
}
});
} else {
console.log('获取用户登录态失败！' +res.errMsg)
}
}
})
}
}
module.exports =WxService;
代码模块实现官网文档有大量详细说明,比如html的编写,组件,样式,和各种api的使用
就不做过多描述,这里说下支付
支付分两步 : 统一下单 > 发起字符
通过统一下单接口,获取微信返回的prepay_id ,再把prepay_id和其他相关信息提供支付接口,支付
var preOrderUrl ="order/prepay?amount=1&articleId=" +aid +"&totalFee=" +total_fee +"&openid=" +openid;
http.get(preOrderUrl,function (res) {//调用后台统一下单接口,获取prepay_id
if (res.data.errorCode) {
wx.hideLoading();
wx.showModal({
title: '失败!',
content: res.data.errorMsg.substring(0,res.data.errorMsg),
showCancel: false
})
return;
}
var paymentTS ="" +newDate().getTime();
var paymentNS ="" +newDate().getTime();
var prepayId =res.data.responseBody.prepay_id;
var paymentPack ='prepay_id=' +res.data.responseBody.prepay_id;
var orderId =res.data.responseBody.orderId;
var strPaymentSign ="appId=" +appid +"&nonceStr=" +paymentNS +"&package=" +paymentPack +"&signType=MD5&timeStamp=" +paymentTS +"&key=" +key;
var paySign =ma5Helper.toMd5(strPaymentSign).toUpperCase();
wx.requestPayment(//调用微信支付接口,付款
{
timeStamp: paymentTS,
nonceStr: paymentNS,
package: paymentPack,
signType: 'MD5',
paySign: paySign,
success: function (res) {
//提交订单到服务器,保存数据
var orderUrl =app.config.baseUrl +"order";
var orderData = {flag:true,orderId:orderId,prepayId:prepayId,msg:"" };
http.post("order",orderData,function (res) {
wx.hideLoading();
if (res.data.errorCode) {
wx.showModal({
title: '订单提交失败!',
content: res.data.errorMsg.substring(0,res.data.errorMsg.indexOf('[')),
showCancel: false
})
} else {
//支付成功
wx.showToast({
title: '支付成功',
icon: 'success',
duration: 3000,
success: function () {
wx.switchTab({
url: '../romance/romance',
})
}
})
}
});
},
fail: function (res) { },
complete: function (res) { }
})
}
统一下单
@GetMapping("/prepay") public ResponseBean createOrderTemp(HttpServletRequest request, @ModelAttribute OrderTempSaveBean saveBean){ saveBean.setSpbill_create_ip(okhttpService.getIpAddress(request)); return success(orderTempService.createOrderTemp(userFromToken(request),saveBean)); }
/** * 统一下单 * @param user * @param saveBean * @return */ @Transactional public Map createOrderTemp(User user,OrderTempSaveBean saveBean) { String orderNumber= (new Random().nextInt(100))+""+DateTime.now().toString(DateUtils.pattern.defualt_2.getContent())+user.getId(); if(saveBean.getTransType() == null) throw new BusinessException(ErrorCode.invalid_request,"编码未设置"); OrderTempWithBLOBs orderTemp=new OrderTempWithBLOBs(); orderTemp.setFlag(true); orderTemp.setStatus(OrderStatus.onCreate.name()); saveBean.setOpenid(user.getOpenid()); saveBean.setNonceStr(orderNumber); saveBean.setOutTradeNo(orderNumber); saveBean.setSpbill_create_ip(saveBean.getSpbill_create_ip() == null ? "1.1.1.1": saveBean.getSpbill_create_ip()); if(saveBean.getTotalFee() == null && saveBean.getTotalFee() <=0) throw new BusinessException(ErrorCode.invalid_request,"交易金额不对"); if(saveBean.getTransType().equals(TransType.C004)){ if(saveBean.getAmount() == null && saveBean.getAmount() <=0) throw new BusinessException(ErrorCode.invalid_request,"数量不对"); Article article = articleMapper.selectByPrimaryKey(saveBean.getArticleId()); if(article ==null) throw new BusinessException(ErrorCode.article_not_found,"未找到"); if(new DateTime(article.getEndTime()).compareTo(new DateTime()) <0) throw new BusinessException(ErrorCode.invalid_request,"已经结束") ; saveBean.setBody("标题-"+article.getThemeTitle()); }else if (saveBean.getTransType().equals(TransType.C001)){ saveBean.setAmount(1); saveBean.setArticleId(-9999); saveBean.setBody("浪漫之旅-充值"); }else{ throw new BusinessException(ErrorCode.invalid_request,"无效请求") ; } Map unifiedorderMap=null; try { unifiedorderMap= mWxPayService.createOrderTemp(saveBean); logger.info("=============> createOrderTemp success : "+JSON.toJSONString(unifiedorderMap)); if(!"SUCCESS".equals(unifiedorderMap.get("return_code"))){ throw new BusinessException(ErrorCode.invalid_request,unifiedorderMap.get("return_msg").toString()); } orderTemp.setPrepayId(String.valueOf(unifiedorderMap.get("prepay_id"))); }catch (BusinessException e){ orderTemp.setFlag(false); throw new BusinessException(e.getErrorCode(),e.getMessage()); }catch (Exception e){ orderTemp.setFlag(false); orderTemp.setMsg(e.getMessage()); e.printStackTrace(); logger.info("=============> createOrderTemp Exception : "+e.getMessage()); throw new BusinessException(ErrorCode.sys_error,"下单失败了!"); }finally { orderTemp.setCreateTime(new Timestamp(System.currentTimeMillis())); orderTemp.setParam(JSONObject.toJSONString(saveBean)); orderTemp.setCreateBy(user.getNickname() ==null ? "":user.getNickname()); orderTemp.setUserId(user.getId()); orderTemp.setOutTradeNo(orderNumber); orderTemp.setAmount(saveBean.getAmount()); orderTemp.setArticleId(saveBean.getArticleId()); orderTemp.setBody(saveBean.getBody()); orderTemp.setPrice(saveBean.getTotalFee()); orderTemp.setSpbillCreateIp(saveBean.getSpbill_create_ip()); orderTemp.setMsg(JSONObject.toJSONString(unifiedorderMap)); orderTempMapper.insert(orderTemp); unifiedorderMap.put("orderId",orderTemp.getId()); } return unifiedorderMap; }
mWxPayService.createOrderTemp(saveBean) 实现
public Map createOrderTemp(OrderTempSaveBean saveBean) throws Exception { Map reqData = WxPayConfig.genUnifiedorder(); reqData.put("body", saveBean.getBody()); reqData.put("nonce_str", saveBean.getNonceStr()); reqData.put("out_trade_no", saveBean.getOutTradeNo()); reqData.put("total_fee",saveBean.getTotalFee().toString()); reqData.put("spbill_create_ip", saveBean.getSpbill_create_ip()); reqData.put("openid",saveBean.getOpenid()); reqData.put("sign", WXPayUtil.generateSignature(reqData, Const.key, SignType.MD5)); String reqXml = WXPayUtil.mapToXml(reqData); String response = okhttpService.post(Const.UNIFIEDORDER_URL_SUFFIX, reqXml); return WXPayUtil.xmlToMap(response); }
WXPayUtil.generateSignature(reqData, Const.key, SignType.MD5))实现
public static String generateSignature(final Map<String, String> data, String key, SignType signType) throws Exception { Set<String> keySet = data.keySet(); String[] keyArray = keySet.toArray(new String[keySet.size()]); Arrays.sort(keyArray); StringBuilder sb = new StringBuilder(); for (String k : keyArray) { if (k.equals(Const.FIELD_SIGN)) { continue; } if (data.get(k).trim().length() > 0) // 参数值为空，则不参与签名 sb.append(k).append("=").append(data.get(k).trim()).append("&"); } sb.append("key=").append(key); if (SignType.MD5.equals(signType)) { return MD5(sb.toString()).toUpperCase(); } else if (SignType.HMACSHA256.equals(signType)) { return HMACSHA256(sb.toString(), key); } else { throw new Exception(String.format("Invalid sign_type: %s", signType)); } }
WXPayUtil.mapToXml(reqData) 实现
/** * 将Map转换为XML格式的字符串 * * @param data Map类型数据 * @return XML格式的字符串 * @throws Exception */ public static String mapToXml(Map<String, String> data) throws Exception { DocumentBuilderFactory documentBuilderFactory = DocumentBuilderFactory.newInstance(); DocumentBuilder documentBuilder= documentBuilderFactory.newDocumentBuilder(); org.w3c.dom.Document document = documentBuilder.newDocument(); org.w3c.dom.Element root = document.createElement("xml"); document.appendChild(root); for (String key: data.keySet()) { String value = data.get(key); if (value == null) { value = ""; } value = value.trim(); org.w3c.dom.Element filed = document.createElement(key); filed.appendChild(document.createTextNode(value)); root.appendChild(filed); } TransformerFactory tf = TransformerFactory.newInstance(); Transformer transformer = tf.newTransformer(); DOMSource source = new DOMSource(document); transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8"); transformer.setOutputProperty(OutputKeys.INDENT, "yes"); StringWriter writer = new StringWriter(); StreamResult result = new StreamResult(writer); transformer.transform(source, result); String output = writer.getBuffer().toString(); //.replaceAll("\n|\r", ""); try { writer.close(); } catch (Exception ex) { } return output; }
okhttpService.post(Const.UNIFIEDORDER_URL_SUFFIX, reqXml) 实现
/** * post * @param url * @param json * @return * @throws IOException */ public String post(String url, String json) throws IOException { RequestBody body = RequestBody.create(JSON, json); Request request = new Request.Builder() .url(url) .post(body) .build(); try (Response response = client.newCall(request).execute()) { return response.body().string(); } }
WXPayUtil.xmlToMap(response) 实现
/** * XML格式字符串转换为Map * * @param strXML XML字符串 * @return XML数据转换后的Map * @throws Exception */ public static Map<String, String> xmlToMap(String strXML) throws Exception { try { Map<String, String> data = new HashMap<String, String>(); DocumentBuilderFactory documentBuilderFactory = DocumentBuilderFactory.newInstance(); DocumentBuilder documentBuilder = documentBuilderFactory.newDocumentBuilder(); InputStream stream = new ByteArrayInputStream(strXML.getBytes("UTF-8")); org.w3c.dom.Document doc = documentBuilder.parse(stream); doc.getDocumentElement().normalize(); NodeList nodeList = doc.getDocumentElement().getChildNodes(); for (int idx = 0; idx < nodeList.getLength(); ++idx) { Node node = nodeList.item(idx); if (node.getNodeType() == Node.ELEMENT_NODE) { org.w3c.dom.Element element = (org.w3c.dom.Element) node; data.put(element.getNodeName(), element.getTextContent()); } } try { stream.close(); } catch (Exception ex) { // do nothing } return data; } catch (Exception ex) { WXPayUtil.getLogger().warn("Invalid XML, can not convert to map. Error message: {}. XML content: {}", ex.getMessage(), strXML); throw ex; } }
数据签名这里有很多坑,要多读几遍文档,咬文嚼字的看,
最终效果就是一个支付的页面了,
![[微信] 开发微信小程序代码实战_第1张图片](http://img.e-com-net.com/image/info8/46b9d38b172c40589d9edda5264a3df0.jpg)