Uniapp登录页面获取头像、昵称的最新方法的简单使用

前言

        写小程序写到登录页面的时候，发现官方文档中原来的wx.getUserInfo和wx.getUserProfile不太能用了，学习了相对比较新的方法，这种方法的文档链接如下：

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html

 下面演示它的简单使用

效果说明

        写两个页面page1和page2，达到的效果是：在pages1中点击“去登录”，跳转到page2中填写头像和昵称（可以获取微信的头像和昵称），点击登录之后，将用户信息保存在storage中，跳转到page1并显示头像和昵称，同时显示退出登录按钮，点击之后退出登录，效果如下：

代码及解释

page2的代码如下：

其中，第一个button的open-type可以提示获取微信用户头像，输入框input的type可以提示获取微信用户的昵称，v-model是将输入框中的内容和自定义变量绑定，最后填充到storage中

page1的代码如下

通过v-if判断是否登陆，从而显示不同的header

在mounted中获取storage数据，设置userInfo予以填充

点击退出登录直接清空storage再刷新page1即可