微信小程式開發2

nxy777發表於2020-09-29

改進：使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={}
  }
})

上傳部署雲函式，實現自動登陸

右鍵雲函式資料夾，上傳並部署，在雲開發環境檢視雲函式是否上傳

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

        });
      });
  },
}
})

登陸後實現個人資訊頁面的跳轉，需要使用路由元件navigator

在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>

修改個人資訊

修改簽名

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

修改位置

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)=>{

    });
  }
})

改進：在修改資訊時，讓外部頁面，我的，也發生變化

使用js中onshow使每次進入頁面都更新資料

user.js

/**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
    this.setData({
      userInfo:app.userInfo.userPhoto,
      nickName:app.userInfo.nickName
    });
  },

修改暱稱可以直接使用微信暱稱

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

    }

修改頭像，使用者可以自己上傳頭像修改，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;  
        });
      });
    }
  }
})

怎麼認證微信小程式-微信小程式開發-視訊教程2
2017-08-30
微信小程式
微信小程式開發教程-從零開始（2）
2016-10-18
微信小程式
微信小程式開發
2018-05-03
微信小程式
微信小程式開發學習筆記[2]
2019-01-04
微信小程式筆記
微信小程式開發小記
2018-04-21
微信小程式
【小程式】微信小程式開發實踐
2016-11-07
微信小程式
【小程式】微信小程式開發準備
2018-04-19
微信小程式
微信小程式開發教程
2021-04-21
微信小程式
微信開發與小程式
2017-12-19
快速開發微信小程式
2017-12-30
微信小程式
微信小程式開發總結
2020-12-10
微信小程式
開發微信小程式的作用
2023-05-13
微信小程式
微信小程式藍芽開發
2022-03-01
微信小程式藍芽
微信小程式雲開發6
2020-10-07
微信小程式
微信小程式開發神器-Grace
2018-03-06
微信小程式
微信小程式開發--『狗蛋TV』
2018-05-15
微信小程式
使用mpvue開發微信小程式
2018-05-15
Vue微信小程式
使用TypeScript開發微信小程式
2017-01-20
TypeScript微信小程式
微信小程式Taro開發(2)：生命週期及開發中注意點
2019-02-16
微信小程式
微信小程式開發之大神之路最全微信小程式開發教程（視訊+精品文章）
2018-07-16
微信小程式
微信小程式--聊天室小程式(雲開發)
2021-09-03
微信小程式
微信小程式之-NBA線上直播小程式開發
2018-04-17
微信小程式
微信小程式開發風口下，微信小程式該如何運營？
2020-06-16
微信小程式
微信小程式開發系列二：微信小程式的檢視設計
2018-09-04
微信小程式
微信小程式開發系列教程三：微信小程式的除錯方法
2018-09-06
微信小程式除錯
微信小程式開發系列七：微信小程式的頁面跳轉
2018-09-09
微信小程式
微信小程式開發（持續更新）
2019-03-21
微信小程式
原生微信小程式開發記錄
2019-06-08
微信小程式
微信小程式開發注意事項
2019-02-16
微信小程式
微信小程式---快速上手雲開發
2022-01-18
微信小程式
開發微信小程式的個人感想
2021-03-02
微信小程式
微信小程式開發初體驗
2018-08-27
微信小程式
微信小程式學習：雲開發
2018-11-19
微信小程式
快速學會開發微信小程式
2018-07-20
微信小程式
微信小程式雲開發如何上手
2020-12-12
微信小程式
java-微信小程式開發工具
2020-11-29
Java微信小程式
微信小程式開發常用功能
2022-02-11
微信小程式
微信小程式開發環境搭建
2016-09-23
微信小程式開發環境

微信小程式開發2

相關文章