第八章

主講人：XX我的頁面功能本章目標完成“我的”頁面功能掌握iconfont字體圖標的使用完成文章閱讀歷史頁面功能完成設置頁面功能掌握設備相關API的使用任務一：完成“我的”頁面功能我的頁面最終實現(xiàn)效果任務描述：本任務主要完成“我的”頁面實現(xiàn)，除了使用原有的實戰(zhàn)技巧的同時，還需要掌握技能包含：iconfont字體圖標的使用基于base64圖片背景設置技巧步驟1：完成“我的”頁面基本的骨架與樣式。完成“我的”頁面功能步驟-1<view

class="profile-header">

<view

class="avatar-url">

<open-data

type="userAvatarUrl"></open-data>

</view>

<open-data

type="userNickName"

class="nickname"></open-data></view><view

class="nav">

<!--閱讀歷史頁面-->

<view

class="nav-item">

<navigator

class="content"

hover-class="none"

url="/pages/profile/pro-history/pro-history">

<text

class="text">閱讀歷史</text>

</navigator>

</view>

<!--設置頁面-->

<view

class="nav-item">

<navigator

class="content"

hover-class="none"

url="/pages/setting/setting">

<text

class="text">設置</text>

</navigator>

</view></view>設置頁面骨架代碼page

{

background-color:

#f1f1f1;}.profile-header

{

background-size:

cover;

height:

480rpx;

display:

flex;

justify-content:

center;

flex-direction:

column;

align-items:

center;

color:

#fff;

font-weight:

300;

text-shadow:

0

0

3px

rgba(0,

0,

0,

0.3);}.avatar-url

{

width:

200rpx;

height:

200rpx;

display:

block;

overflow:

hidden;

border:

6rpx

solid

#fff;

border-radius:

50%;}.nickname

{

font-size:

36rpx;

margin-top:

20rpx;

font-weight:

400;}/*

導航

*/.nav

{

overflow:

hidden;

margin-right:

30rpx;

margin-left:

30rpx;

border-radius:

20rpx;

margin-bottom:

50rpx;

margin-top:

50rpx;

box-sizing:

border-box;

display:

block;}.nav-item

{

padding-right:

90rpx;

position:

relative;

display:

flex;

padding:

0

30rpx;

min-height:

100rpx;

background-color:

#fff;

justify-content:

space-between;

align-items:

center;

box-sizing:

border-box;

border-bottom:

1rpx

solid

rgba(0,

0,

0,

0.1);}.content

{

font-size:

30rpx;

line-height:

1.6em;

flex:

1;}.img

{

display:

inline-block;

margin-right:

10rpx;

width:

1.6em;

height:

1.6em;

vertical-align:

middle;

max-width:

100%;}.text

{

color:

#808080;}.content

.iconfont

{

color:

#d43c33;

font-weight:

600;

margin-right:

30rpx;}.content

.icon-gengduo

{

position:

absolute;

top:

50%;

transform:

translateY(-50%);

right:

30rpx;

bottom:

0;

color:

#808080;

font-size:

28rpx;}設置頁面樣式代碼完成“我的”頁面功能步驟-2步驟2：添加base64圖片的背景在微信小程序開發(fā)中，頁面樣式設置背景圖片不能設置一個在線的圖片，因此我們需要通過base64的方式圖片進行設置，可以通過線上base64的圖片轉換工具進行轉換，其操作方式與下圖方式差不多.profile-header

{

background-image:

url(base64編譯后字符串)}完成“我的”頁面功能步驟-2步驟3：使用iconfont字體圖標設置導圖圖標使用阿里巴巴為我們提供在線iconfont字體圖標庫，通過查找項目對應的圖標字體，集中添加項目中進入對應“微信小程序項目”，選擇【Fontclass】方式，然后把css代碼復制出來完成“我的”頁面功能步驟-3步驟3：使用iconfont字體圖標設置導圖圖標本地項目中創(chuàng)建一個全局樣式文件iconfont.wxss文件，把復制的內(nèi)容粘貼到此文件在項目全局樣式app.wxss文件中導入iconfont的樣式即可，示例代碼如下：@import

"iconfont.wxss";完成了iconfont樣式導入后，接下來我們直接profile.wxss文件中引用，示例代碼如下：

<i

class="iconfont

icon-lishi"></i>任務二：完成“閱讀歷史”功能任務描述：本任務主要完成“閱讀歷史”，其功能包含：進入文章詳情頁面，記錄閱讀歷史。在“我的”頁面中對閱讀歷史記錄進行查看。完成“閱讀歷史”功能步驟-1步驟1：完成進入文章詳情頁面，保存閱讀歷史記錄為了區(qū)分不同用戶的歷史記錄，我們可以使用登錄后的用戶名作為本次緩存的key，因此我們需要在g全局變量中定義一個全局變量g_username,示例：globalData:{g_username:},修改welcome.js中用戶登錄授權相關邏輯，使得完成授權后設置全局用戶變量，并初始化閱讀歷史記錄,示例：

//

設置全局用戶變量

app.globalData.g_username

=

userInfo.nickName

console.log('username',app.globalData.g_username)

//

用于保存最近的閱讀記錄

wx.setStorageSync(app.globalData.g_username

,

[])//保存用戶閱讀文章歷史記錄_savePostHistory(){constnowReadPost=this.data.postconstusername=app.globalData.g_username;console.log('username',username)constreadHistory=wx.getStorageSync(username);console.log('readHistory',readHistory)letisContains=false;//判斷當前閱讀文章是否在歷史中存在for(leti=0,len=readHistory.length;i<len;i++){if(readHistory[i].postId==nowReadPost.postId){isContains=true;break}}if(!isContains){readHistory.unshift(nowReadPost);wx.setStorageSync(username,readHistory)}console.log('_savePostHistory')},完成“閱讀歷史”功能步驟-2步驟2：完成閱讀歷史記錄列表展示創(chuàng)建閱讀歷史頁面<viewclass="container"><!--文章列表--><viewclass="empyMesssage"wx:if="{{postList.length<=0}}">文章閱讀歷史記錄為空！</view><blockwx:for="{{postList}}"wx:for-item="post"wx:for-index="idx"wx:key="postId"><viewclass="post-container"bindtap="gotoDetail"id="{{post.postId}}"><viewclass="post-author-date"><imagesrc="{{post.avatar}}"/><text>{{post.date}}</text></view><textclass="post-title">{{post.title}}</text></view></block></view>構建頁面骨架完成“閱讀歷史”功能步驟-2步驟2：完成閱讀歷史記錄列表展示/***生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad(options){constusername=app.globalData.g_username;constreadHistory=wx.getStorageSync(username)console.log('readHistory',readHistory)this.setData({postList:readHistory})},

//跳轉到詳情頁面gotoDetail(event){constpostId=event.currentTarget.idwx.navigateTo({url:'/pages/post-detail/post-detail?postId='+postId,})}})處理顯示閱讀歷史記錄的邏輯完成“閱讀歷史”功能步驟-2步驟2：完成閱讀歷史記錄列表展示/***生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad(options){constusername=app.globalData.g_username;constreadHistory=wx.getStorageSync(username)console.log('readHistory',readHistory)this.setData({postList:readHistory})},

//跳轉到詳情頁面gotoDetail(event){constpostId=event.currentTarget.idwx.navigateTo({url:'/pages/post-detail/post-detail?postId='+postId,})}})處理顯示閱讀歷史記錄的邏輯任務三：完成用戶設置功能進入用設置頁面用戶設置昵稱信息任務描述：本任務主要完成用戶設置功能，請功能包含：完成“設置”頁面的骨架與頁面樣式。顯示當前用戶信息完成用戶信息設置功能完成用戶設置功能步驟-1步驟1：完成設置頁面骨架與樣式<viewclass="container"><!--顯示用戶信息--><viewclass="category-itempersonal-info"><viewclass="user-avatar"bindtap="getUserInfo"><imagesrc="{{userInfo.avatarUrl}}"></image></view><viewclass="user-name"><viewclass="user-nickname"><text>用戶名：{{userInfo.nickName}}</text></view></view></view>

<!--常用API的使用（緩存API、系統(tǒng)消息、網(wǎng)絡狀態(tài)、當前位置與速度、二維碼）--><viewclass="category-item"><blockwx:for="{{device}}"wx:key="item"><viewclass="detail-item"catchtap="{{item.tap}}"><imagesrc="{{item.iconurl}}"></image><text>{{item.title}}</text><viewclass="detail-item-btn"></view></view></block></view></view>設置頁面setting.wxml代碼Page({/***頁面的初始數(shù)據(jù)*/data:{device:[{iconurl:'/images/icon/wx_app_clear.png',title:'緩存清理',tap:'clearCache'},{iconurl:'/images/icon/wx_app_cellphone.png',title:'系統(tǒng)信息',tap:'showSystemInfo'},{iconurl:'/images/icon/wx_app_network.png',title:'網(wǎng)絡狀態(tài)',tap:'showNetWork'},{iconurl:'/images/icon/wx_app_lonlat.png',title:'當前位置、速度',tap:'showLonLat'},{iconurl:'/images/icon/wx_app_scan_code.png',title:'二維碼',tap:'scanQRCode'}],},})設置頁面數(shù)據(jù)初始化獲取用戶信息-getUserInfo()2021年4月15日，微信官方對于小程序用戶信息相關接口調(diào)整說明中新增getUserProfile代替getUserInfo()方法可以獲取用戶頭像、昵稱、性別等基本信息。獲取用戶信息-wx.getUserInfo(Objectobject)

//獲取用戶信息

wx.getUserInfo({

success:

(res)

=>

{

console.log("res",

res);

console.log(res.userInfo);

this.setData({userInfo:res.userInfo

})

}

})在setting.js的onLoad函數(shù)中獲得用戶信息獲得用戶信息，用戶名為”微信用戶“，頭像為灰色圖像獲取用戶信息-getUserInfo()2021年4月15日，微信官方對于小程序用戶信息相關接口調(diào)整說明中新增getUserProfile代替getUserInfo()方法可以獲取用戶頭像、昵稱、性別等基本信息。獲取用戶信息-wx.getUserProfile（）自2022年10月25日，微信官方對于wx.getUserProfile進行調(diào)整獲取用戶信息-最佳實踐微信小程序官方在最佳實踐中提出希望用戶自行在小程序中完善自己的用戶信息。<view

class="container">

<button

bindtap="getUserInfo">獲取用戶信息</button>

<text>用戶名：{{nickName}}</text>

<button

open-type="chooseAvatar"bind:chooseavatar="onChooseAvatar">

<image

src="{{userinfo.avatarUrl}}"class="userinfo-avatar"></image>

</button>

<input

type="nickname"class="weui-input"placeholder="請輸入昵稱"bindconfirm="showNickName"value="{{inputNickName}}"/></view>緩存管理-清除緩存通過wx.clearStorage實現(xiàn)異步清除緩存操作

//顯示模態(tài)窗口

showModal(title,

content,

callback)

{

wx.showModal({title:

title,content:

content,confirmColor:

'#1F4BA5',cancelColor:

'#7F8389',

success:

(res)

=>

{

if(res.confirm){

callback

&&

callback();

}

}

})

},彈出一個modal模態(tài)對話框，提醒用戶是否清除緩存

//清理緩存

clearCache()

{

this.showModal('緩存清理',

'親，您確定要清除本地緩存嗎?',

function

()

{

wx.clearStorage({

success:

(res)

=>

{

wx.showToast({title:

'緩存清理成功',duration:

1000,mask:

true,icon:

"success"

})

},

fail:

(e)

=>

{

console.log(e);

}

})

});

},調(diào)用wx.clearStorage()方法實現(xiàn)清除緩存獲取系統(tǒng)信息-wx.getSystemInfoAsync通過使用getSystemInfoAsync()方法獲取系統(tǒng)信息，其中包括：手機型號、手機型號、手機語言、微信版本、操作系統(tǒng)、屏幕像素比和屏幕尺寸信息。onLoad:

function

(options)

{

wx.getSystemInfoAsync({

success:

(result)

=>

{

this.setData({phoneInfo:[

{key:'手機型號',val:result.model},

{key:'手機語言',val:result.language}],softInfo:[

{key:'微信版本',val:result.version},

{key:'操作系統(tǒng)版本',val:result.system}],screenInfo:[

{key:'屏幕像素比',val:result.pixelRatio},

{key:'屏幕尺寸',val:result.windowWidth

+

'×'

+

result.windowHeight}]

});

},

})

},獲取網(wǎng)絡狀態(tài)-wx.getNetworkType通過使用wx.getNetworkType()方法獲取當前手機網(wǎng)絡狀態(tài)//獲取網(wǎng)絡狀態(tài)

showNetWork()

{

wx.getNetworkType({

success:

(result)

=>

{

let

netWorkType

=

result.networkType;

this.showModal('網(wǎng)絡狀態(tài)',

'您當前的網(wǎng)絡:'

+

netWorkType);

},

})

}獲取當前位置與當前速度信息-wx.getLocation()通過使用wx.getLocation()獲取當前位置與當前速度信息

//獲取當前為止經(jīng)緯度與當前速度

getLonLat(callback)

{

wx.getLocation({altitude:

'false',type:

'gcj02',

success:

(res)

=>

{

callback(res.longitude,

res.latitude,

res.speed);

}

})

},//顯示當前為位置坐標與當前速度

showLonLat()

{

this.getLonLat((lon,

lat,

speed)

=>

{

let

lonStr

=

lon

>=

0

?

'東經(jīng)'

:

'西經(jīng)',

latStr

=

lat

>=

0

?

'北緯'

:

'南緯';

lon

=

lon.toFixed(2);

lat

=

lat.toFixed(2);

lonStr

+=

lon;

latStr

+=

lat;

speed

=(speed

||

0).toFixed(2);

this.showModal('當前位置和速度',

'當前位置：'

+

lonStr

+

','

+

latStr

+

'。速度:'

+

speed

+

'm/s');

})

},獲取當前為止經(jīng)緯度與當前速度顯示當前為位置坐標與當前速度使用微信內(nèi)置地圖查看位置信息通過使用wx.openLocation(Object)方法查看地圖信息

//在地圖上顯示當前位置

showMap()

{

this.getLonLat((lon,

lat)

=>

{

wx.openLocation({latitude:

lat,longitude:

lon,scale:

15,name:

"武漢大學",address:

"xx街xx號",

fail:

()

=>

{

wx.showToast({title:

"地圖打開失敗",duration:

1000,icon:

"cancel"

});

}

});

})

}掃描二維碼通過使用wx.scanCode(Object)方法，實現(xiàn)掃描二維碼獲取信息/掃描二維碼

scanQRCode()

{

wx.scanCode({onlyFromCamera:

false,

success:

(res)

=>

{

console.log(res);

this.showModal('掃描二維碼/條形碼',

res.result,

false);

},

fail:

(res)

=>

{

this.showModal('掃描二維碼/條形碼',

'掃碼失敗，請重試',

false);

}

})

}實現(xiàn)關鍵代碼示例二維碼二維碼掃描效果文件下載與預覽實現(xiàn)文件下載與預覽的步驟：1.新建下載頁面，編寫頁面骨架和樣式。2.準備對應下載文件上傳到云存儲空間。3.編寫文件下載業(yè)務邏輯，實現(xiàn)多種類型文件下載。文件下載與預覽步驟1：構建下載頁面元素與初始化數(shù)據(jù)<!--文件下載頁面元素--><view

class="container">

<view

class="file-type-head">

<text>文件類型</text>

</view>

<view

class="category-item">

<block

wx:for="{{fileTypeList}}">

<view

class="detail-item"catchtap="downloadFile"data-type="{{item.type}}">

<image

src="{{item.iconurl}}"></image>

<text>{{item.title}}</text>

<view

class="detail-item-btn"></view>

</view>

</block>

</view></view>/***頁面的初始數(shù)據(jù)*/data:

{fileTypeList:[{type:

'pdf',iconurl:

'/images/icon/wx_app_pdf.png',title:

'pdf類型'

},

{type:

'word',iconurl:

'/images/icon/wx_app_word.png',title:

'word類型'

},

{type:

'excel',iconurl:

'/images/icon/wx_app_exl.png',title:

'excel類型'

},

{type:

'ppt',iconurl:

'/images/icon/wx_app_ppt.png',title:

'ppt類型'

}],

},文件下載與預覽步驟2：準備下載文件，上傳到云存儲空間文件下載與預覽步驟3：編寫文件下載業(yè)務邏輯，實現(xiàn)多種類型文件下載//下載文件

downloadFile(event)

{

let

wordType

=

event.currentTarget.dataset.type;

let

url

=

"https