微信小程序云开发2

  1. 改进:使bindGetUserInfo返回所有用户信息,创建app对象是得用户用户信息可以随时读取

    user.js

    /// miniprogram/pages/user/user.js
    
    //创建一个app对象,可以用app对象获取app.js中的userInfo
    const app = getApp()
    
    //创建数据库,初始化数据库
    const db = wx.cloud.database()
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        userPhoto:"../../images/photo/01.jpg",
        nickName:"小喵喵",
        logged:false,
      },
    
    
      // 返回 登陆信息,userinfo,插入数据库
      bindGetUserInfo(ev){
        // console.log(ev);
        let userInfo = ev.detail.userInfo;
        if (!this.data.logged && userInfo){
            db.collection('users').add({
              data:{
                userPhoto:userInfo.avatarUrl,
                nickName:userInfo.nickName,
                signature:'',
                phoneNumber:'',
                weixinNumber:'',
                links:0,
                time:new Date()
              }
            }).then((res)=>{
              // console.log(res)
              //doc可以根据id获取所有数据
              db.collection('users').doc(res._id).get().then((res)=>{
                // console.log(res.data);
                //拷贝对象
                app.userInfo = Object.assign(app.userInfo, res.data);
                //更新用户头像
                this.setData({
                    userPhoto:app.userInfo.userPhoto,
                    nickName:app.userInfo.nickName,
                    logged:true
                });
              });
            });
          }
        }
    })
    

    app.js

    //app.js
    App({
      //初始化生命周期
      onLaunch: function () {
        
        if (!wx.cloud) {
          console.error('请使用 2.2.3 或以上的基础库以使用云能力')
        } else {
          wx.cloud.init({
            // env 参数说明:
            //   env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
            //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
            //   如不填则使用默认环境(第一个创建的环境)
            // env: 'my-env-id',
            //配置云开发环境id
            env:'dev-2gzx8hmu754cbff6',
            //追踪用户调用(在运营分析,用户访问中可以看到)
            traceUser: true,
            
          })
        }
    
        this.globalData = {}
        //定义一个全局信息,使各个用户都可以使用用户信息
        this.userInfo={}
      }
    })
    
    
  2. 上传部署云函数,实现自动登陆

    右键云函数文件夹,上传并部署,在云开发环境查看云函数是否上传

    user.js

    // miniprogram/pages/user/user.js
    
    //创建一个app对象,可以用app对象获取app.js中的userInfo
    const app = getApp()
    
    //创建数据库,初始化数据库
    const db = wx.cloud.database()
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        userPhoto:"../../images/photo/01.jpg",
        nickName:"小喵喵",
        logged:false,
        // 一开始用户无法点击登陆
        disabled:true,
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        //如果用户已经登陆过,利用login函数实现自动登陆
        //如果用户没有登陆过,则可以点击登陆
          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
                });
              }
    
            });
          });
      },
    }
    })
    
  3. 登陆后实现个人信息页面的跳转,需要使用路由组件navigator

    1. 在pages下创建好其他页面

    user.wxml

    <!--miniprogram/pages/user/user.wxml-->
    <view class="user">
      <view class="user-info">
        <image src="{{userPhoto}}" />
        <!-- 需要使用 button 来授权登录 -->
        <text wx:if="{{logged}}"> 欢迎你:{{nickName}}</text>
        <!-- bindgetuserinfo函数需要卸载js中 -->
        <button wx:else disabled="{{disabled}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
          微信登录
        </button>
      </view>
    
      <!-- //登陆状态下才可以让用户看见列表 -->
      <view wx:if="{{logged}}" class="userlist">
        <navigator url="../editUserInfo/editUserInfo" open-type="navigate">
          <view class="user-list-item">
            <text>编辑个人信息</text>
            <text class="iconfont iconarrowRight"></text>
          </view>
        </navigator>
        <navigator url="../friendList/friendList" open-type="navigate">
          <view class="user-list-item">
            <text>查看好友列表</text>
            <text class="iconfont iconarrowRight"></text>
          </view>
        </navigator>
        <navigator url="../detail/detail" open-type="navigate">
          <view class="user-list-item">
            <text>个人主页</text>
            <text class="iconfont iconarrowRight"></text>
          </view>
        </navigator>
      </view>
    </view>
    
    

    editUserInfo

    <!--miniprogram/pages/editUserInfo/editUserInfo.wxml-->
    <view class="editUserInfo">
      <navigator url="../head/head" open-type="navigate">
          <view class="editUserInfo-list-item">
            <text>修改头像</text>
            <text class="iconfont iconarrowRight"></text>
          </view>
        </navigator>
        <navigator url="../head/head" open-type="navigate">
          <view class="editUserInfo-list-item">
            <text>修改昵称</text>
            <text class="iconfont iconarrowRight"></text>
          </view>
        </navigator>
        <navigator url="../head/head" open-type="navigate">
          <view class="editUserInfo-list-item">
            <text>修改个性签名</text>
            <text class="iconfont iconarrowRight"></text>
          </view>
        </navigator>
        <navigator url="../head/head" open-type="navigate">
          <view class="editUserInfo-list-item">
            <text>共享位置</text>
            <text class="iconfont iconarrowRight"></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 iconarrowRight"></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 iconarrowRight"></text>
          </view>
        </navigator>
    </view>
    
  4. 修改个人信息

    1. 修改签名

      signature.wxml

      <!--miniprogram/pages/editUserInfo/signature/signature.wxml-->
      <button>设置个性签名</button>
      <input type="text" value="{{signature}}" />
      

      signature.js

      // miniprogram/pages/editUserInfo/signature/signature.js
      
      const app = getApp()
      
      const db = wx.cloud.database()
      
      Page({
      
        /**
         * 页面的初始数据
         */
        data: {
          signature:''
      
        },
      
       
        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {
          //拿到用户信息的值
          this.setData({
            signature:app.userInfo.signature
          });
        },
      
        
        handleText(ev){
          // value就是表单中输入的值
          let value = ev.detail.value;
          this.setData({
            signature:value
          });
        },
        handleBtn(){
          this.upDateSignature();
        },
        upDateSignature(){
          wx.showLoading({
            title:'更新中'
          })
          db.collection('users').doc(app.userInfo._id).update({
            data:{
              signature:this.data.signature
            }
          }).then((res)=>{
            wx.hideLoading();
            wx.showToast({
              tiltle:'更新成功'
            })
          });
          //  显示原来的签名
          app.userInfo.signature = this.data.signature
        }
      })
      
    2. 修改位置

      location.wxml

      <!--miniprogram/pages/editUserInfo/location/location.wxml-->
      <view>
        <text>开始共享位置</text>
        <!-- bindchange改变了按钮触发事件方法 -->
        <switch checked="{{islocation}}" bindchange="switchChange"></switch>
      </view>
      
      

      location.js

      // miniprogram/pages/editUserInfo/location/location.js
      const app = getApp()
      
      const db = wx.cloud.database()
      
      Page({
      
        /**
         * 页面的初始数据
         */
        data: {
          islocation:true
      
        },
      
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
      
        },
      
        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {
          this.setData({
            islocation:app.userInfo.islocation
          });
        },
      
       
        switchChange(ev){
          // console.log(ev.detail.value);
          let value = ev.detail.value
          db.collection('users').doc(app.userInfo._id).update({
            data:{
              islocation:value
            }
          }).then((res)=>{
      
          });
        }
      })
      
    3. 改进:在修改信息时,让外部页面,我的,也发生变化

      使用js中onshow使每次进入页面都更新数据

      user.js

      /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {
          this.setData({
            userInfo:app.userInfo.userPhoto,
            nickName:app.userInfo.nickName
          });
        },
      
      
    4. 修改昵称可以直接使用微信昵称

    name.wxml

    <!--miniprogram/pages/editUserInfo/name/name.wxml-->
    <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
          使用微信昵称
    </button>
    <button bindtap="handleBtn">自定义昵称</button>
    <input type="text" value="{{nickName}}" bindinput="handleText"/>
    
    

    name.js

     //使用微信昵称的函数
      bindGetUserInfo(ev){
        let userInfo = ev.detail.userInfo;
        if (userInfo) {
          this.setData({
            nickName:userInfo.nickName
            // 回调UpadteNickName函数,之前已经写好
          },()=>{
            this.UpdateNickName();
          });
    
        }
    
    1. 修改头像,用户可以自己上传头像修改,wx.chooseImage,

    上传图片到云数据库uploadFile

    head.wxml

    <!--miniprogram/pages/editUserInfo/location/location.wxml-->
    <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
          使用微信头像
    </button>
    <button bindtap="handleBtn">自定义头像</button>
    
    <image src="{{userPhoto}}" bindtap="handleUploadImage" />
    

    head.js

    // miniprogram/pages/editUserInfo/head/head.js
    const app = getApp()
    
    const db = wx.cloud.database()
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        userPhoto:''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        this.setData({
          userPhoto:app.userInfo.userPhoto
        });
      },
    
      handleUploadImage(){
        wx.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success :(res)=>{
            // console.log(res);
            // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFilePaths[0];
            //上传完图片后显示出修改后的图片
            this.setData({
              userPhoto:tempFilePaths
            });
          }
        })
      },
      handleBtn(){
        wx.showLoading({
          title: '上传中',
        })
        //每次上传都是一个新路径
        let cloudPath = "userPhoto/"+app.userInfo._openid + Date.now()+ ".jpg";
        wx.cloud.uploadFile({
          cloudPath,
          filePath: this.data.userPhoto,      
        }).then((res)=>{
          // console.log(res);
          let fileID = res.fileID;
          if (fileID){
            db.collection('users').doc(app.userInfo._id).update({
              data:{
                userPhoto:fileID
              }
            }).then((res)=>{
              wx.hideLoading();
              wx.showToast({
                title: '上传并更新成功',
              });
              //返回我的时更新我的头像
              app.userInfo.userPhoto = fileID;  
            });
          }
        });
      },
      //使用微信昵称的函数
      bindGetUserInfo(ev){
        let userInfo = ev.detail.userInfo;
        if (userInfo) {
          this.setData({
            nickName:userInfo.avatarUrl
            // 回调UpadteNickName函数,之前已经写好
          },()=>{
            wx.showLoading({
              title: '上传中',
            })
            db.collection('users').doc(app.userInfo._id).update({
              data:{
                userPhoto:userInfo.avatarUrl
              }
            }).then((res)=>{
              wx.hideLoading();
              wx.showToast({
                title: '上传并更新成功',
              });
              //返回我的时更新我的头像
              app.userInfo.userPhoto = userInfo.avatarUrl;  
            });
          });
        }
      }
    })
    
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页