前言

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

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

 下面演示它的简单使用

效果说明

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

代码及解释

page2的代码如下：

<template><view class="container"><!-- 官网最新登录方法 --><button class="imageButton" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"><image class="image" :src="avatarUrl"></image></button> <input class="nameInput" type="nickname" v-model="username" placeholder="请输入昵称" /><!-- 确认登陆按钮 --><button class="loginButton" @click="getUser">登录</button></view>
</template><script>export default{data(){return{avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',username:''};},methods:{onChooseAvatar(e) {//打印以查看详细数据// console.log(e.detail)this.avatarUrl= e.detail.avatarUrl;},getUser(){//存储上述输入的信息wx.setStorage({key:"userinfo",data:JSON.stringify({userName:this.username,photoUrl:this.avatarUrl})})//页面跳转，回到个人中心，把其它页面关闭wx.reLaunch({url:'/pages/personal/personal'})}}}
</script><style lang="stylus">.containertext-align: center.imageButtonwidth: 100rpxheight: 100rpxpadding: 0.imagemargin: 0width: 100%height: 100%.nameInputwidth: 300rpxheight: 60rpxborder: 1rpx solid #000margin: 20rpx auto;.loginButtonwidth: 150rpxheight: 80rpxfont-size: 30rpx
</style>

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

page1的代码如下

<template><view class="personal"><view class="header"><!-- 登陆状态 --><template v-if="userInfo.userName"><image class="img" :src="userInfo.photoUrl" mode=""></image><text class="login">{{userInfo.userName}}</text><button class="exit" @click="exit">退出登录</button></template><!-- 未登陆状态 --><template v-else><image class="img" src="/static/images/personal/personal.png" mode=""></image><text class="login" @click="toLogin">去登录</text></template></view></view>
</template><script>export default {data(){return {userInfo:{}};},mounted() {//从本地存储中读取数据wx.getStorage({key:'userinfo',//必须用箭头函数success:(res)=>{// console.log(res);if(res.data){this.userInfo=JSON.parse(res.data);console.log(res);}	}})},methods:{toLogin(){//用relaunch：登陆之后不能再返回到未登陆的状态wx.reLaunch({url:'/pages/login/login'})},exit(){//清空用户信息wx.setStorage({key:'userinfo',data:""})//导航登录页wx.reLaunch({url:'/pages/personal/personal' })}}}
</script><style lang="stylus">.personal.headerheight: 300rpxline-height: 200rpxbackground-color: #EED785display: flex.imgwidth:100rpxheight:100rpxvertical-align: middlemargin:50rpx.exitheight: 70rpxwidth:300rpxmargin: 60rpx//让按钮内文字居中 line-height: 70rpx</style>

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

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

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