微信小程序支付实现

最新推荐文章于 2024-05-21 16:54:15 发布

BMG-Princess

最新推荐文章于 2024-05-21 16:54:15 发布

阅读量99

点赞数 2

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/Hei_lovely_cat/article/details/138340417

版权

前端、公司后端、微信后端调用关系图：

代码实现：

app.js:

//app.js
App({
  http: require('/api/request.js'),
  IMG_BASE: "https://hydrogen-applet.derunht.cn/applet",
  // IMG_BASE: "http://192.168.100.11:15970/applet",
  onLaunch: function () {
    this.calcNavBarInfo(); //计算导航栏信息
    this.getLogin(); //获取微信登录信息openid
  },
  globalData: {
    //全局数据管理
    navBarHeight: 0, // 导航栏高度
    menuBottom: 0, // 胶囊距底部间距（顶部间距也是这个）
    menuHeight: 0, // 菜单按钮栏(标题栏)的高度
    statusBarHeight: 0, //  状态栏高度
  },
  //计算导航栏信息
  calcNavBarInfo() {
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 状态栏高度
    this.globalData.statusBarHeight = systemInfo.statusBarHeight
    // 导航栏高度 = 状态栏到胶囊的间距（胶囊上坐标位置-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
    this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
    // 状态栏和菜单按钮(标题栏)之间的间距
    // 等同于菜单按钮(标题栏)到正文之间的间距（胶囊上坐标位置-状态栏高度）
    this.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;
    // 菜单按钮栏(标题栏)的高度
    this.globalData.menuHeight = menuButtonInfo.height;
  },
  //获取微信登录信息openid
  getLogin() {
    let thisT = this;
    wx.login({
      success(res) {
        if (res.code) {
          let params = {
            code: res.code
          }
          thisT.http.getOpenid(params).then(res => {

            if (res.code == 200) {
              wx.setStorageSync('openid', res.data.openid)
            } else {
              wx.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2000
              });
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  }
})

页面代码：


  // 支付
  payMethod() {
      let params = {
        openId: wx.getStorageSync('openid'),
        deviceId: this.data.mn,
        productId: this.data.nowPriceId,
      }
      app.http.payParams(params).then(res => {
        if (res.code == 200) {
          this.payWeiXin(res.data);  //调取微信支付
          this.setData({
            orderId: res.data.orderId, //订单号
          })
        } else {
          wx.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          });
        }
      })
  },
  //调取微信支付
  payWeiXin(obj) {
    let thisT = this;
    //调用微信官方支付接口弹出付款界面,输入密码扣款
    wx.requestPayment({
      timeStamp: obj.timeStamp, //后端返回的时间戳
      nonceStr: obj.nonceStr, //后端返回的随机字符串
      package: obj.prepayId, //后端返回的prepay_id
      signType: 'MD5', //后端签名算法,根据后端来,后端MD5这里即为MD5
      paySign: obj.paySign, //后端返回的签名
      success(res) {
        //支付成功后
      },
      fail(res) {}
    })
  },