uniapp配合官方最新文档和接口怎么写出获取oppenid、授权登录,麻烦加上注释谢谢
时间: 2024-06-09 20:12:38 浏览: 84
感谢您的提问!针对您的问题,您可以按照以下步骤进行操作:
1.首先,在uniapp项目根目录下创建一个文件夹,命名为`/common`,用于存放公共方法和配置信息。
2.在`/common`文件夹下创建一个名为`config.js`的文件,用于存放API接口地址和相关配置信息,例如:
```
const BASE_URL = 'https://example.com/api/' // 网站的api接口地址
const CONFIG = {
appid: 'your_appid', // 小程序应用的appid
appsecret: 'your_appsecret' // 小程序应用的appsecret
}
export default {
BASE_URL,
CONFIG
}
```
3.在`/common`文件夹下创建一个名为`utils.js`的文件,用于存放各种工具方法,例如:封装请求方法,处理登录授权信息等。
```
import config from './config.js'
// 发送http请求,利用uni.request方法封装
function request(url, data, method = 'GET', header = { 'content-type': 'application/json' }) {
return new Promise((resolve, reject) => {
uni.request({
url: config.BASE_URL + url,
method: method,
data: data,
header: header,
success: res => {
if (res.statusCode == 200) {
resolve(res.data)
} else {
reject(res.errMsg)
}
},
fail: err => {
reject(err)
}
})
})
}
// 获取用户授权信息和openid
function login() {
return new Promise((resolve, reject) => {
uni.login({
success: res => {
let code = res.code
// 调用微信提供的API,获取用户授权信息
uni.getUserInfo({
withCredentials: true,
success: userRes => {
let userData = userRes.userInfo // 用户信息
let encryptedData = userRes.encryptedData // 加密数据
let iv = userRes.iv // iv值
// 将数据发送到服务器端进行解密,获取用户的openid和其他信息
request('user/login', {
code: code,
encrypted_data: encryptedData,
iv: iv,
appid: config.CONFIG.appid,
appsecret: config.CONFIG.appsecret
}, 'POST').then(loginRes => {
// 将获取到的用户信息存储到本地存储中
uni.setStorageSync('openid', loginRes.data.openid)
uni.setStorageSync('user_info', userData)
resolve(loginRes.data)
}).catch(err => {
reject(err)
})
},
fail: err => {
reject(err)
}
})
},
fail: err => {
reject(err)
}
})
})
}
export default {
request,
login
}
```
4.在需要获取用户openid或进行登录授权的页面或组件中,引入`/common`文件夹下的`utils.js`文件,并调用其中的`login`方法,例如:
```
import utils from '../../common/utils.js'
export default {
data() {
return {
userInfo: {}
}
},
methods: {
getUserInfo() {
utils.login().then(res => {
this.userInfo = uni.getStorageSync('user_info')
}).catch(err => {
console.log(err)
})
}
},
onLoad() {
this.getUserInfo()
}
}
```
以上就是uniapp配合官方最新文档和接口,实现获取用户openid和进行登录授权的方法,希望可以解决您的问题,如果您还有其他疑问,请随时提出。
阅读全文