用于这是一个交友的小程序，所以用户的信息在很多页面中都是会被用到的
===也就是在不同的页面中（首页 推荐 消息 个人）中都是要用到这些消息的
这些就是需要定义全局的数据了，就要在app.js中进行定义了
this.userInfo = {}
这样通过this挂载，就可以在每个不同的页面中使用这个用户的信息了
之后在每一个页面的js文件中，通过 const app = getApp()
通过这个内置的getApp就可以拿到全局的app.js 里面的this对象了，就可以在每个页面中用 app.userInfo的形式访问这个全局的用户信息了
用于在
也就是把数据写入数据库中之后返回的就是这个数据的id了，所以就要再次访问这个数据库，把这个数据读出来
这个读出来就不是插入的add了，而是用doc，给这个doc传入这个数据的id即可了，就可以读取这个数据内容了
然后这个操作会触发一个 get 方法的，就可以获得这个数据中所有的字段了
db.collection(\'users\').doc(res._id).get().then((res)=>{
console.log(res.data);
});
这个打印出来的就是用户的全部信息了（也就是我们放在数据库里面的东西了）
app.userInfo = Object.assign(app.userInfo , res.data);
Object.assign(target, ...sources)==如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。
之后就可以更新数据了
this.setData({ userPhoto : app.userInfo.userPhoto, nickName : app.userInfo.nickName, logged : true })
改头像和昵称，还有改为【已认证】
点击微信登陆后，效果图:
之后要优化的就是，用户肯定是第一次进来的时候需要授权，但是后面就不能进来又要授权那种了
也就是已经登陆过的，就自动登陆就好了，这个时候就要使用云开发进行授权登陆了（就要对每个微信用户的openid进行检测了）
下面是用默认的云函数中的login函数
那怎么部署到我们的项目中呢？
（小知识点==如果云开发的环境换不了的话，就右键cloudfunctons 然后选择”更多设置“就可以进行更改了
把默认的login云函数 右键上传到云端，然后再云开发-》云函数中看看是否上传成功了
就可以在user.js的onReady 也就是生命周期函数--监听页面初次渲染完成
onReady: function () { wx.cloud.callFunction({ name : "login", // 这个就是云函数的名字即可 data : {} }).then((res)=>{ console.log(res); }) }
这里也是把返回的结果打印出来
可以看到结果中返回了openid（也就是用户的唯一标识）
然后再利用这个openid和数据库的查询功能（一个小细节就是又要记得这个时候更新一下全局的app对用户的信息了
要在数据可以查询的话，就用互了数据库的get方法了，因为get的话主要是对于数据的惟一标识 id，而openid是用户的唯一标识了
如果通过where查到这个数据的话，就可以再次的使用get来获取这个数据流的
然后把通过云函数调用的 微信用户openid 在users数据中找看看有没有匹配的
然后通过if else 判断 如果找不到说明就要点击【微信登陆】 如果找得到就把微信登陆隐藏了
onReady: function () { wx.cloud.callFunction({ name : "login", // 这个就是云函数的名字即可 data : {} }).then((res)=>{ // console.log(res); db.collection(\'users\').where({ _openid : res.result.openid }).get().then((res)=>{ // 就要判断一下这个用户有没有登陆过 if(res.data.length){ app.userInfo = Object.assign(app.userInfo, res.data[0]); this.setData({ userPhoto: app.userInfo.userPhoto, nickName: app.userInfo.nickName, logged: true }); } else{ this.setData({ disabled : false }) } }); }); }
通过设置 disabled 来设置 【微信登陆】这个按钮的隐藏和显示的
二、就是【我的页面】中下面其他内容的列表设置（并且这个列表是只有在登陆状态下，用户才可以看到的，所有就要通过使用wx：if来判断了）
在【我的页面】中大部分都是进行页面的跳转，所以就引出了这样进行页面的跳转了
在wx开放文档 中 好到 navigator找示例代码
<navigator url="" open-type="navigate">跳转到新页面</navigator>
然后在里面定义 view块 来包含文字和图标
基本元素就是
<navigator url="" open-type="navigate">
<view class="user-list-item">
<text>查看好友列表</text>
<text class="iconfont iconyoujiantou"></text>
</view>
</navigator>
得到的效果：
然后通过简单的设置样式：
效果图
之后就可以新建页面了，为了跳转过去的
创建完了之后就可以写地址了
比如是../editUserInfo/editUserInfo 写入到navigator中的url即可了
然后点击这三个东西，即可进行跳转了
三、是对个人编辑页面的设计
通过在editUserInfo.wxml中设置结构
<view class="editUserInfo"> <navigator url="./head/head" open-type="navigate"> <view class="editUserInfo-list-item"> <text>修改头像</text> <text class="iconfont iconyoujiantou"></text> </view> </navigator> <navigator url="./head/head" open-type="navigate"> <view class="editUserInfo-list-item"> <text>修改昵称</text> <text class="iconfont iconyoujiantou"></text> </view> </navigator> <navigator url="./head/head" open-type="navigate"> <view class="editUserInfo-list-item"> <text>修改个性签名</text> <text class="iconfont iconyoujiantou"></text> </view> </navigator> <navigator url="./head/head" open-type="navigate"> <view class="editUserInfo-list-item"> <text>修改共享位置</text> <text class="iconfont iconyoujiantou"></text> </view> </navigator> <navigator url="./head/head" open-type="navigate"> <view class="editUserInfo-list-item"> <text>设置手机号 <text class="editUserInfo-list-tips">仅好友可见</text></text> <text class="iconfont iconyoujiantou"></text> </view> </navigator> <navigator url="./head/head" open-type="navigate"> <view class="editUserInfo-list-item"> <text>设置微信号 <text class="editUserInfo-list-tips">仅好友可见</text></text> <text class="iconfont iconyoujiantou"></text> </view> </navigator> </view>
和在.wxss中设置样式
/* miniprogram/pages/editUserInfo/editUserInfo.wxss */ .editUserInfo{margin-top: 40rpx;} .editUserInfo-list-item{ /* 这里可以直接把user.wxss中的样式复印过来了 */ height: 50rpx;border-bottom:1px #b4b5b6 dashed; padding: 10rpx; display: flex;align-items: center;justify-content: space-between; } 一般的字体默认都是16px的，所以就设置为12px的 .editUserInfo-list-tips{font-size: 12px;color: red;}
得到的效果：
请发表评论