微信小程序填坑---小程序支付

因为公司刚刚重新做了网站，所以也吧公众号和小程序提上了日程，在公众号里面没有什么问题，直接按照官方文档进行代码编写、调试，然后就解决了公众号内支付的问题。

因为小程序提供了<webview>组件，所以把网站直接扔进去就方便多了，但是坑爹的是在网页内进行的下单怎么调起微信支付呢，它并不像公众号能在网页内直接调起，小程序需要在前端进行API的调用。

明白了这个道理下面就有努力的方向了，我们看官方文档，依靠着官方提供的文档才能写出相应功能（小声BB：腾讯的文档真的是坑爹，看了几种开发文档，非就把你绕的难受）

 

获得用户的openid在这里就不说了，直接调用wx.login就可以，网上也一堆教程。前端页面我写的是

 

 

新建wxpay的目录，只是单纯的为了接收后台传过来的参数，以方Page({

onLoad: function (options) {
console.log(options)
var that = this;
//页面加载调取微信支付（原则上应该对options的携带的参数进行校验）
that.requestPayment(options);
},
//根据 obj 的参数请求wx 支付
requestPayment:function (obj) {
//获取options的订单Id
var orderId = obj.orderId;
//调起微信支付
wx.requestPayment({
//相关支付参数
\'timeStamp\': obj.timestamp,
\'nonceStr\': obj.nonceStr,
\'package\': \'prepay_id=\'+obj.prepay_id,
\'signType\': obj.signType,
\'paySign\': obj.paySign,
//小程序微信支付成功的回调通知
\'success\': function (res) {
//定义小程序页面集合
var pages = getCurrentPages();
//当前页面 (wxpay page)
var currPage = pages[pages.length - 1];
//上一个页面 （index page）
var prevPage = pages[pages.length - 2];
console.log(\'支付成功\')
 
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
wx.navigateBack();
wx.showModal({
title: \'支付结果\',
content: \'支付成功，请到我的->我的订单查看\',
cancelText: "我已了解",//默认是“取消”
cancelColor: \'skyblue\',//取消文字的颜色
confirmText: "确定",//默认是“确定”
confirmColor: \'skyblue\',//确定文字的颜色
})
},
//小程序支付失败的回调通知
\'fail\': function (res) {
console.log(res)
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
console.log("准备修改数据")
console.log("准备结束页面")
wx.navigateBack();
wx.showToast({
title: \'支付失败\',
})
}
})
},
})