详细介绍微信小程序使用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 () {
  
  }
})