Day7-微笑小程序实战-交友小程序-登陆模块

用于这是一个交友的小程序，所以用户的信息在很多页面中都是会被用到的

===也就是在不同的页面中（首页 推荐 消息 个人）中都是要用到这些消息的

这些就是需要定义全局的数据了，就要在app.js中进行定义了

this.userInfo = {}

这样通过this挂载，就可以在每个不同的页面中使用这个用户的信息了

之后在每一个页面的js文件中，通过  const app = getApp()

通过这个内置的getApp就可以拿到全局的app.js 里面的this对象了，就可以在每个页面中用 app.userInfo的形式访问这个全局的用户信息了

用于在

bindGetUserInfo函数中返回的是

　　也就是把数据写入数据库中之后返回的就是这个数据的id了，所以就要再次访问这个数据库，把这个数据读出来

这个读出来就不是插入的add了，而是用doc，给这个doc传入这个数据的id即可了，就可以读取这个数据内容了

然后这个操作会触发一个 get 方法的，就可以获得这个数据中所有的字段了

db.collection('users').doc(res._id).get().then((res)=>{
              console.log(res.data);
            });

这个打印出来的就是用户的全部信息了（也就是我们放在数据库里面的东西了）

// 注意这里不可以直接给app赋值如：

// app.userInfo = res.data

// 而是用js中的拷贝一份

用到了

  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;}

得到的效果：