Day8-微信小程序實戰-交友小程序-創建編輯子頁和修改個人信息頁面


一、因為要進行修改 昵稱、微信號、手機號等等頁面,都是可以在editUserInfo這個頁面下進行的

也就是說如果要跳轉到修改頁面的話,就是要創立這些新的頁面了,所以就可以在page下面進行創立,但是最好還是在editUserInfo這個文件中進行

添加的,如下所示

 

二、對修改簽名功能進行設計

直接在editUserInfo頁面一下的signature.wxml中設置結構

<button>設置個性簽名</button>
<input type="text"/>

然后設置樣式即可了

input{border: 1px #cdcdcd solid;}

即可得到一個簡易的輸入框了 效果圖:

 

 

 之后就搞邏輯的部分了

因為這個個性簽名是要為用戶保存的,也就是會保存到數據庫里面的,所以就可以在signature.js設置一個變量是signature來存儲

然后在開始的時候看到的個性簽名就是保存在數據庫中的,直接用value來渲染即可了

<button>設置個性簽名</button>
<input type="text" value="{{signature}}"/>

這個從數據庫中獲取到用戶保存在數據庫中的個性簽名的話,就可以直接用全局的app中拿到的,但是在用之前一定要在這個頁面的js文件中引入這個

全局app的this才行的

 然后就是要先把我們寫入的讀入到數據庫中,這是第一步,這其實是通過一個觸發事件來完成的

通過bindtext這個點擊事件,然后創建一個handletext 可以發現,我們輸入的文本其實是保存在了ev.detail.value中的

 

 

  

注意:有一個易錯的點,如果為了可以方便開發的話,一般都是把初始頁設置為是這個正在設計的頁的,但是這樣就會導致

全局的app設置不成功,因為app要設置成功的話hi要從首頁進來才可以的,所以可能就會保存這個app全局變量是找不到的

然后還會有一個bug就是在設置完了個性簽名之后,出去這個頁面再進入的時候是沒有進行更新的,而是只有在重新編譯之后才可以看到的

這是因為我們把從數據庫中讀取個性簽名的功能是放在了onready函數中,頁就是只有在每次的重新編譯的時候才可以進行從數據庫中取數據的

所以才導致了修改了之后跳出這個頁面再進來的時候是看不到的

==這個的解決方法就可以是:

在updateSignature()函數之后就立馬進行更新,通過:

app.userInfo.signature = this.data.signature;   
並且要注意了上面這個語句后面的 “ ; ”這個符號一定要記得寫才行的,
所以就有兩個報銷:一個就是在更新完了之后就更新全局的app里面的數據了,然后在重新編譯 也就是再次進入這個小程序的時候也會通過
Onready然后進行重新的更新即可
 
三、設置手機號
===注意點:如果雲開發頁面 出了網絡問題的話,一般都是很久沒有訪問了,導致的離線了,這個時候一般都是直接重啟開發者工具即可了
這個修改其實和前面的對個性簽名的修改的代碼都是差不多的,所以一般都是可以直接復制前面的代碼即可了
四、設置微信號,也是同理的,
注意在
handleText(ev){
    let value = ev.detail.value;
    this.setData({
      weixinNumber : value
    });
  },

在這個函數中,一定要寫參數ev才行的

四、共享位置的設計(主要是可以打開當前位置的共享,和關閉當前位置的共享)

這里的做法和上面的就不太一樣的了,而是一個開關的樣式

打開微信開放文檔-》組件-》表單-》switch(開關選擇器)

在數據庫里面添加一個 isLocation的 boolean字段

示例代碼:

 <switch checked="{{switch1Checked}}" bindchange="switch1Change"/>

還要考慮到,用戶在上一次登陸的時候設置的是 關閉的,所以就要在onReady里面 獲取用戶上一次的狀態是開啟的還是關閉的

通過 switch1Change 這個觸發函數就可以得到islocation 這個布爾值了,表示現在這個按鈕是開啟還是關閉的狀態了

 

五、修改自定義昵稱和微信昵稱

(是可以使用微信的昵稱也可以進行自定義的昵稱的,就可以有兩個部分,一個部分是可以自動的上傳微信的昵稱,一個就是可以在下面寫上自定義的昵稱之后

點擊“自定義昵稱”也可以對用戶的昵稱進行修改的

1、其中獲取用戶的微信昵稱的話其實在前面的user頁面中有用過的,所以直接COPY過來即可:

<button wx:else open-type="getUserInfo" disabled="{{disabled}}"
 bindgetuserinfo="bindGetUserInfo">微信登錄</button>

但是這上面的判斷,還有disabled就不用留了 opentype和點擊事件是一定要留的

就變成了

<button open-type="getUserInfo" 
 bindgetuserinfo="bindGetUserInfo">使用微信昵稱</button>

 

把用戶的昵稱改變了之后,還要改變用戶在首頁中的昵稱

 

要在user。js里面的監聽函數 onshow,onshow就是每一次進來這個頁面都是會觸發的,不過有沒有重新登陸這個小程序,就是如下代碼放在user.js中即可

  onShow: function () {
    this.setData({
      userPhoto : app.userInfo.userPhoto,
      nickName : app.userInfo.nickName
    })
  },

2、下面就是完善使用微信昵稱這個功能

這里使用的是實例代碼中,給出的 bindGetUserInfo ,一般這種觸發函數的話都是可以把ev打印出來,看看想要得到的數據的位置是在哪里的

(也可以參考之前寫在user.js里面寫的獲取用戶信息的函數

之后不僅要更新前端看到的東西,也要更新數據庫中用戶的昵稱才行

因為在自定義昵稱的時候就有了修改數據庫的代碼,然后在這個使用微信昵稱的時候也想要這樣操作,

可以發現如果在同一個js文件里面,要調用同一個函數的話,因為js是異步的,所以不能直接調用上面的函數

要用setdata的第二個參數來搞即可了

bindGetUserInfo(ev){
    let userInfo = ev.detail.userInfo;
    if(userInfo){
      this.setData({
        nickName : userInfo.nickName
      },()=>{
         this.updateNickName();
      });
      // 用於是異步的,不能直接用 this.updateNickName()的,
      // 這里就可以使用setData的的二個參數來進行回調了
    }
  }

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM