《微信小程序程序設(shè)計(jì)與開(kāi)發(fā)》課件 第八章 我的功能

第八章

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

<!--閱讀歷史頁(yè)面-->

<view

class="nav-item">

<navigator

class="content"

hover-class="none"

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

<text

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

</navigator>

</view>

<!--設(shè)置頁(yè)面-->

<view

class="nav-item">

<navigator

class="content"

hover-class="none"

url="/pages/setting/setting">

<text

class="text">設(shè)置</text>

</navigator>

</view></view>設(shè)置頁(yè)面骨架代碼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;}/*

導(dǎo)航

*/.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;}設(shè)置頁(yè)面樣式代碼完成“我的”頁(yè)面功能步驟-2步驟2：添加base64圖片的背景在微信小程序開(kāi)發(fā)中，頁(yè)面樣式設(shè)置背景圖片不能設(shè)置一個(gè)在線的圖片，因此我們需要通過(guò)base64的方式圖片進(jìn)行設(shè)置，可以通過(guò)線上base64的圖片轉(zhuǎn)換工具進(jìn)行轉(zhuǎn)換，其操作方式與下圖方式差不多.profile-header

{

background-image:

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

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

<i

class="iconfont

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

//

設(shè)置全局用戶變量

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;//判斷當(dāng)前閱讀文章是否在歷史中存在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)建閱讀歷史頁(yè)面<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>構(gòu)建頁(yè)面骨架完成“閱讀歷史”功能步驟-2步驟2：完成閱讀歷史記錄列表展示/***生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/onLoad(options){constusername=app.globalData.g_username;constreadHistory=wx.getStorageSync(username)console.log('readHistory',readHistory)this.setData({postList:readHistory})},

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

//跳轉(zhuǎn)到詳情頁(yè)面gotoDetail(event){constpostId=event.currentTarget.idwx.navigateTo({url:'/pages/post-detail/post-detail?postId='+postId,})}})處理顯示閱讀歷史記錄的邏輯任務(wù)三：完成用戶設(shè)置功能進(jìn)入用設(shè)置頁(yè)面用戶設(shè)置昵稱信息任務(wù)描述：本任務(wù)主要完成用戶設(shè)置功能，請(qǐng)功能包含：完成“設(shè)置”頁(yè)面的骨架與頁(yè)面樣式。顯示當(dāng)前用戶信息完成用戶信息設(shè)置功能完成用戶設(shè)置功能步驟-1步驟1：完成設(shè)置頁(yè)面骨架與樣式<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)絡(luò)狀態(tài)、當(dāng)前位置與速度、二維碼）--><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>設(shè)置頁(yè)面setting.wxml代碼Page({/***頁(yè)面的初始數(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)絡(luò)狀態(tài)',tap:'showNetWork'},{iconurl:'/images/icon/wx_app_lonlat.png',title:'當(dāng)前位置、速度',tap:'showLonLat'},{iconurl:'/images/icon/wx_app_scan_code.png',title:'二維碼',tap:'scanQRCode'}],},})設(shè)置頁(yè)面數(shù)據(jù)初始化獲取用戶信息-getUserInfo()2021年4月15日，微信官方對(duì)于小程序用戶信息相關(guān)接口調(diào)整說(shuō)明中新增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日，微信官方對(duì)于小程序用戶信息相關(guān)接口調(diào)整說(shuō)明中新增getUserProfile代替getUserInfo()方法可以獲取用戶頭像、昵稱、性別等基本信息。獲取用戶信息-wx.getUserProfile（）自2022年10月25日，微信官方對(duì)于wx.getUserProfile進(jìn)行調(diào)整獲取用戶信息-最佳實(shí)踐微信小程序官方在最佳實(shí)踐中提出希望用戶自行在小程序中完善自己的用戶信息。<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="請(qǐng)輸入昵稱"bindconfirm="showNickName"value="{{inputNickName}}"/></view>緩存管理-清除緩存通過(guò)wx.clearStorage實(shí)現(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();

}

}

})

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

//清理緩存

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()方法實(shí)現(xiàn)清除緩存獲取系統(tǒng)信息-wx.getSystemInfoAsync通過(guò)使用getSystemInfoAsync()方法獲取系統(tǒng)信息，其中包括：手機(jī)型號(hào)、手機(jī)型號(hào)、手機(jī)語(yǔ)言、微信版本、操作系統(tǒng)、屏幕像素比和屏幕尺寸信息。onLoad:

function

(options)

{

wx.getSystemInfoAsync({

success:

(result)

=>

{

this.setData({phoneInfo:[

{key:'手機(jī)型號(hào)',val:result.model},

{key:'手機(jī)語(yǔ)言',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)絡(luò)狀態(tài)-wx.getNetworkType通過(guò)使用wx.getNetworkType()方法獲取當(dāng)前手機(jī)網(wǎng)絡(luò)狀態(tài)//獲取網(wǎng)絡(luò)狀態(tài)

showNetWork()

{

wx.getNetworkType({

success:

(result)

=>

{

let

netWorkType

=

result.networkType;

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

'您當(dāng)前的網(wǎng)絡(luò):'

+

netWorkType);

},

})

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

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

getLonLat(callback)

{

wx.getLocation({altitude:

'false',type:

'gcj02',

success:

(res)

=>

{

callback(res.longitude,

res.latitude,

res.speed);

}

})

},//顯示當(dāng)前為位置坐標(biāo)與當(dāng)前速度

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('當(dāng)前位置和速度',

'當(dāng)前位置：'

+

lonStr

+

','

+

latStr

+

'。速度:'

+

speed

+

'm/s');

})

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

//在地圖上顯示當(dāng)前位置

showMap()

{

this.getLonLat((lon,

lat)

=>

{

wx.openLocation({latitude:

lat,longitude:

lon,scale:

15,name:

"武漢大學(xué)",address:

"xx街xx號(hào)",

fail:

()

=>

{

wx.showToast({title:

"地圖打開(kāi)失敗",duration:

1000,icon:

"cancel"

});

}

});

})

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

scanQRCode()

{

wx.scanCode({onlyFromCamera:

false,

success:

(res)

=>

{

console.log(res);

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

res.result,

false);

},

fail:

(res)

=>

{

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

'掃碼失敗，請(qǐng)重試',

false);

}

})

}實(shí)現(xiàn)關(guān)鍵代碼示例二維碼二維碼掃描效果文件下載與預(yù)覽實(shí)現(xiàn)文件下載與預(yù)覽的步驟：1.新建下載頁(yè)面，編寫頁(yè)面骨架和樣式。2.準(zhǔn)備對(duì)應(yīng)下載文件上傳到云存儲(chǔ)空間。3.編寫文件下載業(yè)務(wù)邏輯，實(shí)現(xiàn)多種類型文件下載。文件下載與預(yù)覽步驟1：構(gòu)建下載頁(yè)面元素與初始化數(shù)據(jù)<!--文件下載頁(yè)面元素--><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>/***頁(yè)面的初始數(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類型'

}],

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

downloadFile(event)

{

let

wordType

=

event.currentTarget.dataset.type;

let

url

=

"https