介绍
通过网络请求获取数据，并渲染到页面
网络请求接口
export const getUserInfo= async ()=>{
const axios=axiosInstance
const userInfo:AxiosResponse<ResponseData<LoginInfoResponse>> = await axios.get<null,AxiosResponse<ResponseData<LoginInfoResponse>>,null>('/driver/users')
await setUser(userInfo.data.data)
console.log(`userInfo:${userInfo.data.data}`)
return userInfo.data.data
}
使用首选项持久化用户数据
export const initUser= ()=>{
const userStore =preferences.getPreferencesSync(getContext(),{name:LOGIN_INFO_STORE})
return userStore
}
export const setUser= async (user:LoginInfoResponse)=>{
const userStore=initUser()
await userStore.put(LOGIN_INFO,JSON.stringify(user))
userStore.flush()
}
export const getUser= async ()=>{
const userStore=initUser()
const res= await userStore.get(LOGIN_INFO,"string")
return JSON.parse(res.toString()) as LoginInfoResponse
}
我的页面代码
import { getUser, HmCard, HmCardItem, LoginInfoResponse } from 'common/Index'
@Component
export default struct Mine{
@State user:LoginInfoResponse={} as LoginInfoResponse
async aboutToAppear(): Promise<void> {
this.user=await getUser()
console.log(`user:${JSON.stringify(this.user)}`)
}
build() {
Column(){
Image(this.user.avatar===undefined?$r('app.media.ic_avatar_driver'):this.user.avatar)
.width(60).borderRadius(30)
.height(60)
Text(`${this.user.name}`).width('100%').textAlign(TextAlign.Center)
Text(`司机编号:${this.user.number}`).width('100%').textAlign(TextAlign.Center)
Text(`手机号:${this.user.phone}`).width('100%').textAlign(TextAlign.Center)
HmCard() {
HmCardItem({ leftTitle: '车辆信息', rightText: '' })
HmCardItem({ leftTitle: '任务设置', rightText: '' })
HmCardItem({ leftTitle: '系统设置', rightText: '', showBottomBorder: false })
}
}
}
}
