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

 常用界面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
            })
        }