小程序学习第四天（常用界面api,获取用户信息，weui组件库，云开发初识）

本文链接：https://blog.youkuaiyun.com/ILove_bugs/article/details/122243276

本文介绍了微信小程序中获取用户信息、获取用户手机号的流程，包括wx.getUserProfile接口的使用和授权过程。同时，讲解了WeUI组件库的使用，以及如何在小程序中引入和使用组件。此外，还提及了云开发的基本概念，如存储空间、数据库和云函数，以及如何初始化云开发环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用界面api及案例

常用界面API：wx.showToast()、wx.showLoading()、wx.hideLoading()、wx.setNavigationBarTitle()

获取用户信息

授权过程：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html

## 通过API获取用户信息

wx.getUserProfile({ }) 获取用户信息

页面产生点击事件（例如 `button` 上 `bindtap` 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 `userInfo`。该接口用于替换 `wx.getUserInfo`

```html
<button bindtap="getUser">获取用户信息</button>

<view>{ {userInfo.nickName}}</view>
<image src="{ {userInfo.avatarUrl}}"></image>

```

```js
getUser() {
// 限频接口 2pv
wx.getUserProfile({
desc: '完善资料',
success: res => {
console.log(res);
this.setData({
userInfo: res.userInfo
})

// wx.setStorageSync('userInfo', res.userInfo)

wx.setStorage({
key: "userInfo",
data: res.userInfo,
encrypt:true,
//success:res=>{
                   //    wx.getStorage({
                   //        key: "userInfo",
                   //        encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
                   //        success(res) {
                   //        console.log(res.data)
                   //        }
                   //    })
                   // }
})
}
})
},
onShow: function () {
       let userInfo = wx.getStorageSync('userInfo')

       if (userInfo == "") {
           wx.showToast({
               title: "点击按钮获取用户信息",
               icon: "none"
           })
       } else {
           this.setData({
               userInfo
           })
       }