微信小程序登陆与支付

微信登录

参数名	参数说明	备注
code	用户登录凭证	必要, 可通过 wx.login() 获取 uni-app中 使用uni.login()
encryptedData	完整用户信息密文	必要, 可通过 getUserInfo 获取
iv	加密算法的初始向量	必要, 可通过 getUserInfo 获取
rawData	用户信息原始数据字符串	必要, 可通过 getUserInfo 获取 , JSON.stringify()转字符串
signature	使用 sha1 得到字符串	必要, 可通过 getUserInfo 获取

• 为登录的 button 按钮绑定 open-type="getuserInfo" 属性 , 表示点击按钮时 , 希望获取用户的基本信息:

    <!-- 可以从 @getuserinfo 事件处理函数的形参中 , 获取到用户的基本信息 -->
    <button open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>

 只有后面这个方法名getUserInfo可以自定义 其余的不能改变

• 在 methods 节点中声明 getUserInfo 事件处理函数如下: 此处可能有差异需要自己调整

 methods: {
    getUserInfo (e) {
      // 判断是否获取用户信息成功
      if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('你取消了登录授权')

      // 获取用户信息成功 , e.detail.userInfo 就是用户的基本信息
      console.log(e.detail.userInfo)

      this.getToken(e.detail)
    },
    async getToken (info) {
      // 调用微信登录接口
      const [err, res] = await uni.login().catch(err => err)
      // 判断是否 wx.login() 调用失败
      if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败!')
      console.log(res.code)
      console.log(info)

      // 准备参数对象
      const query = {
        code: res.code,
        encryptedData: info.encryptedData,
        iv: info.iv,
        rawData: info.rawData,
        signature: info.signature
      }

      // 换取 token
      const { data: loginResult } = await uni.$http.post('xxxxx', query)
      if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败!')
      uni.$showMsg('登录成功')
    }

实现退出登录

  <view @click="logout">
    <text>退出登录</text>
  </view>

  methods: {
    // 退出登录
    async logout () {
      // 询问用户是否退出登录
      const [err, succ] = await uni.showModal({
        title: '提示',
        content: '确认退出登录?'
      }).catch(err => err)

      // 用户确认了退出登录的操作
      // 需要清空 vuex 中的 unserinfo  token 和 address
      if (succ && succ.confirm) {

      }
    }
  }

微信支付

在请求头中添加 Token 身份认证的字段

因为只有在登录之后才允许调用支付相关的接口

打开项目中的main.js 改造 $http.beforeRequest 请求拦截器中的代码如下:

$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...'
  })
  // 判断请求的是否为有权限的API接口
  if (options.url.indexOf('/my/') !== -1) {
    // 为请求头添加身份认证字段
    options.header = {
      // 字段的值可以从 vuex 中进行获取
      Authorization: store.state.m_user.token
    }
  }
}

流程:

• 创建订单
  • 请求创建订单的 API 接口: 把(订单金额 , 收货地址 , 订单中包含的商品信息) 发送到服务器
  • 服务器详情的结果: 订单编号
• 订单预支付
  • 请求订单预支付的 API 接口: 把 (订单编号) 发送到服务器
  • 服务器响应的结果: 订单预支付的参数对象 , 里面包含了订单支付相关的必要参数
• 发起微信支付
  • 调用 uni.requestPayment() 这个API , 发起微信支付; 把步骤2得到的'订单预支付对象'作为参数传递给 uni.requestPayment() 方法
  • 监听 uni.requestPayment() 这个API的success , fail , complete 回调函数

参数名	参数说明	备注
order_price	订单价格	必要
consignee_addr	订单地址	必要
order_detail	订单详情	可选,字符串格式
goods	商品列表内部存放商品(goods_id , goods_number和goods_price) 列表	必要

 

  methods: {
    // 微信支付
    async payOrder () {
      // 1. 创建订单
      // 1.1 组织订单的信息对象
      const orderInfo = {
        // 开发期间 , 注释掉真实价格
        order_price: 0.01,
        consignee_addr: this.addstr,
        goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
      }

      // 1.2 发起请求创建订单
      const { data: res } = await uni.$http.post('xxx')
      if (res.meta.status !== 200) return uni.$showMsg('创建订单失败')

      // 1.3 得到服务器响应的 订单编号
      const orderNumber = res.message.order_number

      // 2 订单预支付
      // 2.1 发起请求获取订单的支付信息
      const { data: res2 } = await uni.$http.post('xxxx', { order_number: orderNumber })

      // 2.2 预付订单生成失败
      if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败!')

      // 2.3 得到订单支付相关的必要参数
      const payInfo = res2.message.pay

      // 3 发起微信支付
      // 3.1 调用 uni.requestPayment() 发起微信支付
      const [err, succ] = await uni.requestPaument(payInfo)

      // 3.2 未完成支付
      if (err) return uni.$showMsg('订单未完成支付!')

      // 3.3 完成了支付 进一步查询支付的结果
      const { data: res3 } = await uni.$http.post('xxx', { order_number: orderNumber })

      // 3.4 检测到订单未支付
      if (res3.meta.status !== 200) return uni.$showMsg('订单未支付!')

      // 3.5 检测到订单支付完成
      uni.showToast({
        title: '支付完成!',
        icon: 'success'
      })
    }
  }