uniapp微信小程序授权登录

微信小程序后面改版后不能通过js的方式拉起授权弹窗,需要通过button组件触发调用:

<!-- open-type为开放接口的类型,这里为获取用户信息 @getuserinfo即为获取用户信息的事件回调 -->
<button open-type="getUserInfo" @getuserinfo="login" class="btn2"><text>直接登录＞</text></button>

<script>
    // 后端的登录接口api
	import {
		customerLogin
	} from '@/api/user'
	export default {
		name: 'start',
		data() {
			return {
                // 这三个值是要传给后端的登录接口的,他会根据这些解密获取到用户信息
				encrypted_data: '',
				iv: '',
				code: ''
			}
		},
		methods: {
			// 登录
			login(e) {
				const that = this
				// 授权之前判断一下是否已经授权
				wx.getSetting({
					success(res) {
						// 如果已授权,则获取用户凭据 直接登录
						if (res.authSetting['scope.userInfo']) {
							// 获取用户账号信息
							const p1 = () => {
								return new Promise(resolve => {
                                    wx.login({
										success(res) {
											resolve({
												js_code: res.code
											})
										}
									})
								})
							}
							const p2 = () => {
								return new Promise(resolve => {
									wx.getUserInfo({
										success(res) {
											resolve({
												encrypted_data: res.encryptedData,
												iv: res.iv
											})
										}
									})
								})
							}
                            // 一定要记住先调login再调getUserInfo,否则后端那边可能会解析错误,至少我是遇到了这种情况
							p1().then(res => {
								that.encrypted_data = res.encrypted_data
								that.iv = res.iv
								return p2()
							}).then(async res => {
								that.code = res.js_code
                                // 三个参数都拿到后 就可以调用后端接口登录了
								const res1 = await customerLogin({
									encrypted_data: that.encrypted_data,
									iv: that.iv,
									js_code: that.code
								})
							})
						} else {
							// 如果未授权用户信息,则先请求授权
							wx.authorize({
								scope: 'scope.userInfo',
								success() {
									// 用户同意授权后再执行前面的登录逻辑,大家可以自行封装
								},
								fail() {
									wx.showModal({
										title: '提示',
										content: '请授权允许获取您的用户信息!',
										showCancel: false
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>