详细介绍微信小程序使用WEB-VIEW控件进行微信支付

1.获取用户的openID，在小程序项目index.js里面写入

Page({
data: {
url: '',
scode:''
},
onLoad: function (options) {
//OpenId
wx.login({
//获取code
success: (res) => {
wx.request({
method: "GET",
url: 'https://xxx.xxx.xxx/GetOpenID.aspx', //仅为示例，并非真实的接口地址
data: {
scode: res.code   // 使用wx.login得到的登陆凭证，用于换取openid
},
header: {
'content-type': 'application/json' // 默认值
},
success: (res) => {
if (res.data!='0')
{
this.setData({
sopenid: res.data,
url: 'https://xxxx.xxx.xxx/?openid=' + res.data
});
}
console.log(this.data.sopenid)
}
})
console.log(res.code) //这里只是为了在微信小程序客户端好查看结果，找寻问题
}
});
}
});

2.getopenid.aspx

protected void Page_Load(object sender, EventArgs e)
{
try
{
var _APP_ID = "";   // 你申请的小程序ID
var _APP_SECRET = "";  // 小程序的SECRET ，当然这个是可微信公共平台去生成的

var url = string.Format("https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code", _APP_ID, _APP_SECRET, Utils.SafeString(Request["scode"]));
HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);
request.Method = "Get";     // 这里是定义请求的方式

HttpWebResponse response = request.GetResponse() as HttpWebResponse;   //对请求返回的结果进行处理
Stream io = response.GetResponseStream();
StreamReader sr = new StreamReader(io, Encoding.UTF8);
var html = sr.ReadToEnd();    //返回的内容被读取为流
sr.Close();
io.Close();
response.Close();

string key = "\"openid\":\"";
int stratindex = html.IndexOf(key);   //截取字符

if (stratindex != -1)   //验证是否存在OpenID ，有时使用过期的登陆凭证，会出现异常
{
int endindex = html.IndexOf("\"}", stratindex);    // 这里在截取字符时，要注意内容是否和截取的部分相同，否则截取会失败
string _openid = html.Substring(stratindex + key.Length, endindex - stratindex - key.Length);
Response.Write(_openid);
}
else
{
Response.Write("0");
}

}
catch (Exception ex)
{
Utils.WriteLog(DateTime.Now+"----error:" + ex);
Response.Write("0");
}
}

3.上面已经让我们获取到了用户的openId,接下来就用微信小程序支付的同意下单接口下单，之后根据下单之后返回的prepay_id拼接一个字符串：str = "?timestamp=" +timestamp+ "&nonceStr=" + wx_nonceStr + "&prepay_id=" +prepay_id+
"&signType=MD5" + "&paySign=" + get_sign + "&orderId=123456789"; 页面加入：<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> 使web-view可以使用wx.miniProgram.navigateTo({ url: path });跳转到小程序的页面：

var params = '<%=str %>';
var path = '/pages/wxpay/wxpay' + params;
//通过JSSDK的api使小程序跳转到指定的小程序页面
wx.miniProgram.navigateTo({ url: path });

4.在小程序里面添加wxpay页面，wxpay.js的代码为

// pages/wxpay/wxpay.js
Page({

/**
* 页面的初始数据
*/
data: {

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
//页面加载调取微信支付（原则上应该对options的携带的参数进行校验）
that.requestPayment(options);
},
//根据 obj 的参数请求wx 支付
requestPayment: function (obj) {
//获取options的订单Id
var orderId = obj.orderId;
console.log('prepay_id=' + obj.prepay_id);
console.log('prepay_id=' + obj.timestamp);
//调起微信支付
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];
//通过page.setData方法使index的webview 重新加载url  有点类似于后台刷新页面
//此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
prevPage.setData({
url: "https://xxx.xxxx.xxxxx/PayOk.aspx?orderId=" + orderId,

}),
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
wx.navigateBack();
},
//小程序支付失败的回调通知
'fail': function (res) {
console.log("支付失败");
console.log(res);
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
console.log("准备修改数据");
prevPage.setData({
url: "https://xxx.xxx.xxx/PayFial.aspx?orderId=" + orderId,
}),
console.log("准备结束页面")
wx.navigateBack();
}
})
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})