實訓 Day04 實習日志

今天是實訓的第四天，今天主要學習了背景圖檔實作不同手機型号自适應高度；給地圖頁面加光标；自動擷取使用者權限得到使用者頭像和名稱；其中背景圖檔隻能使用網絡圖檔或者base64格式的圖檔，故還學習了base64格式圖檔的轉換方式；

今天學習的内容和昨天有部分是重複的，是以今天的内容基本上都掌握了。

自動擷取使用者權限得到使用者頭像和名稱：

<view class='radius'>
      <open-data type="userAvatarUrl"></open-data>
    </view>
    <open-data type="userNickName" ></open-data>
           

讓頭像圓框顯示：

.radius{
  overflow:hidden;
  display: block;  
  width: 200rpx;  
  height: 200rpx;     
  border-radius: 50%;  
  border: 3px solid #faa;  
}
           

base64轉換方法：

wx.chooseImage({
      success: res => {
        wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0], 
          encoding: 'base64', //編碼格式
          success: res => { //成功的回調
            console.log('data:image/png;base64,' + res.data)
          }
        })
      }
});
           

作業：

實作mine頁面不點選button實作自動擷取使用者權限得到使用者頭像和名稱，

頭像與名稱的背景圖實作不同手機型号自适應高度，

地圖頁面給它加個光标。