前端微信一键登录和微信小程序支付总结

微信一键登录和微信小程序支付总结

---

微信一键登录

现在小程序都是微信一键登录，下面是我的使用方法和总结，仅供参考

需要调用微信小程序的api wx.login()

1. 使用wx.login() 调用获取凭证的接口，通过凭证来换取微信的登录信息

 wx.login({
    success(res) {
      if (res.code) {
        //发起网络请求
      } else {
        console.log('登录失败！' + res.errMsg)
      }
    },
    fail(err){
      console.log(err)
    }
  })

获取微信用户头像调用 getUserProfile() 授权成功后 会返回 eDate 和 iv 需要把eData和iv 传递给接口就可以了。
还有一种方法就是 授权成功后 会返回用户的昵称还有头像，直接可以使用

2. 获取微信用户头像 使用微信小程序wx.getUserProfile()

<button @click="getUserInfo" class="wx">微信授权登录</button>
getUserInfo() {
	let _self = this
	wx.showLoading()
	wx.getUserProfile({
		desc: "获取用户头像，昵称",
		success: (info) => { //这里请求接口
			console.log(info)
		},
		fail: (err) => {
			console.log("微信授权失败")
		}
	})
},

4. 获取手机号 调用button 组件 把open-type=“getPhoneNumber” 绑定事件就可以了
   注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。引用微信小程序官网

回调函数接收参数，参数会返回 eData 和 iv 只需要获得eData和 iv 传递给后台就可以

<button open-type="getPhoneNumber" @getphonenumber="LoginWx" class="wx">微信一键登录</button>
LoginWx(e) {
	consloe.log(e)
},

微信支付

微信支付不支持个人的微信小程序，需要在微信小程序进行申请商家号，还有密钥等

微信支付是在微信登录的前提下才可以进行的
详细点击微信小程序详细介绍
timeStamp、nonceStr、package、signType、paySign 是调用接口后台进行返回的数据

wx.requestPayment({
		provider: 'wxpay',
		timeStamp: res.data.info.returnInfo.timeStamp + '',
		nonceStr: res.data.info.returnInfo.nonceStr,
		package: res.data.info.returnInfo.package,
		signType: res.data.info.returnInfo.signType,
		paySign: res.data.info.returnInfo.paySign,
		success: function(res) {
			uni.showToast({
				title: '支付成功',
				duration: 3000,
				icon: 'none',
			})
		},
		fail: function(err) {
			wx.showModal({
				content: '支付失败',
				showCancel: false,
			})
		},
	})
}

总结

以上就是今天要说的内容，本文仅仅简单介绍了wx.login()、wx.getUserProfile()、getPhoneNumber、wx.requestPayment()的使用。 感谢大家观看。谢谢