前言
写小程序写到登录页面的时候，发现官方文档中原来的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">
.container
text-align: center
.imageButton
width: 100rpx
height: 100rpx
padding: 0
.image
margin: 0
width: 100%
height: 100%
.nameInput
width: 300rpx
height: 60rpx
border: 1rpx solid #000
margin: 20rpx auto;
.loginButton
width: 150rpx
height: 80rpx
font-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
.header
height: 300rpx
line-height: 200rpx
background-color: #EED785
display: flex
.img
width:100rpx
height:100rpx
vertical-align: middle
margin:50rpx
.exit
height: 70rpx
width:300rpx
margin: 60rpx
//让按钮内文字居中
line-height: 70rpx
</style>通过v-if判断是否登陆，从而显示不同的header
在mounted中获取storage数据，设置userInfo予以填充
点击退出登录直接清空storage再刷新page1即可
