uni-starter项目模板
uni-starter是新建项目时官方提供的项目模板 使用官方提供的模板做测试看实现的结构
这个项目中有一个ucenter。就是用户中心
用户中心的结构
头像部分
<!-- hasLogin判断用户是否登录 -->
<!-- userInfo.avatar_file判断有没有头像 -->
<!-- 如果有，就将用户头像路径拿过来，没有就走下面的else分支 -->
<cloud-image width="150rpx" height="150rpx" v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"></cloud-image>
<!-- 没有登陆就用字体图标做头像 -->
<view v-else class="defaultAvatarUrl">
<uni-icons color="#ffffff" size="50" type="person-filled" />
</view>
hasLogin是读取缓存
在下面conputed计算属性里有一个方法hasLogin，就是读取缓存的方法
hasLogin(){
return store.hasLogin
},
store这个方法是从uni-id-pages文件引入的
import {
store,
mutations
} from '@/uni_modules/uni-id-pages/common/store.js'
把鼠标放在@后面的路径上，按住alt，就能点进这个文件里
在这个文件里,hasLogin是一个对象data的属性值，然后在下面通过Vue.observable把他赋给store成了一个响应式的对象，用的时候，store就是这里的data
hasLogin的返回值是一个布尔值，而这个值取决于缓存，就是上面的hostUserInfo方法，uni-id-pages-userInfo就是保存在缓存中的一个字段，他保存的就是用户的ID、昵称和用户名
Object.keys()方法用于判断一个对象是否存在，它的返回值是这个对象的key值
所以这里就是判断这个对象的返回值（一个数组）的值是否为空，有返回值就表示不是一个空对象，在这里就表示用户进行了登陆，已经拿到了用户信息
同时，这里将缓存结果赋给了userInfo，所以store里能拿到userInfo
let hostUserInfo = uni.getStorageSync('uni-id-pages-userInfo')||{}
const data = {
userInfo: hostUserInfo,
hasLogin: Object.keys(hostUserInfo).length != 0
}
...
import Vue from 'vue'
// 通过Vue.observable创建一个可响应的对象
export const store = Vue.observable(data)
登陆：
依据上面的hasLogin和userInfo做的登陆功能
在下面的计算属性中，将这两个结果返回，就能在上面的DOM结构中拿到了
computed: {
userInfo() {
return store.userInfo
},
hasLogin(){
return store.hasLogin
},
...
在DOM结构中，之所以要先判断有没有头像，再判断头像的url目的是如果没有头像，那就没有头像地址，直接判断头像地址会出错，头像地址在头像的下一级，不对上一级结构进行判断就会报错，因为读取不到这个不存在的值
<!-- hasLogin判断用户是否登录 -->
<!-- userInfo.avatar_file判断有没有头像 -->
<!-- 如果有，就将用户头像路径拿过来，没有就走下面的else分支 -->
<cloud-image width="150rpx" height="150rpx" v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"></cloud-image>
回到原来的quanzi_article项目中，做登陆功能
先引入store文件，然后在计算属性中返回这两个属性，最后在DOM结构中做判断
import {
store,
mutations
} from '@/uni_modules/uni-id-pages/common/store.js'
export default {
data() {
return {
};
},
computed:{
hasLogin(){
return store.hasLogin
},
userInfo(){
return store.userInfo
},
}
}
</script>
判断是否登录
<!-- 已登录头像 -->
<image v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url" mode="aspectFill"></image>
<!-- 未登录头像 -->
<image v-else src="../../static/images/user-default.jpg" mode="aspectFill"></image>
</view>
<view class="text" v-if="true">
<view class="nickname">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</view>
