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

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

微信一键登录

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

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

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

获取微信用户头像使用微信小程序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("微信授权失败")
		}
	})
},

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

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

微信支付

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

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,
			})
		},
	})
}