項(xiàng)目八個(gè)人信息模塊開(kāi)發(fā)Userinformationpage任務(wù)一用戶信息頁(yè)面在小程序開(kāi)發(fā)中，用戶信息模塊一般包括用戶登錄、退出登錄、購(gòu)物信息統(tǒng)計(jì)、購(gòu)物金額統(tǒng)計(jì)等，小程序提供了各類API和組件為實(shí)現(xiàn)用戶信息模塊提供了便利。通過(guò)本項(xiàng)目的講解，讓同學(xué)們了解小程序用戶登錄的API接口、小程序與Echart.js中的柱狀圖、餅圖和折線圖相結(jié)合的使用方式等。項(xiàng)目八個(gè)人信息模塊開(kāi)發(fā)任務(wù)描述登錄退出操作提供用戶登錄以及維護(hù)用戶的登錄狀態(tài)，是一個(gè)擁有用戶系統(tǒng)的小程序應(yīng)用必不可少的功能模塊。小程序可以通過(guò)微信官方提供的登錄能力方便地獲取微信提供的用戶身份標(biāo)識(shí)，快速建立小程序內(nèi)的用戶體系。用戶登錄流程

在微信小程序中，涉及到以下三類登錄方式：自有的賬號(hào)注冊(cè)和登錄。使用其他第三方平臺(tái)賬號(hào)登錄。使用微信賬號(hào)登錄（即直接使用當(dāng)前已登錄的微信賬號(hào)來(lái)作為小程序的用戶進(jìn)行登錄）。用戶登錄流程登錄中的三個(gè)角色小程序：用戶使用的客戶端，由于小程序運(yùn)行在微信之上，因此小程序可以通過(guò)API獲取微信用戶的身份信息。開(kāi)發(fā)者服務(wù)器：小程序的后端服務(wù)器，用于為小程序用戶提供服務(wù)。微信接口服務(wù)：微信為開(kāi)發(fā)者服務(wù)器提供的接口。用戶登錄流程（1）小程序端調(diào)用wx.login函數(shù)獲取code，發(fā)送給開(kāi)發(fā)者服務(wù)器調(diào)用wx.login函數(shù)獲取臨時(shí)登錄憑證code

，并回傳到開(kāi)發(fā)者服務(wù)器。code是臨時(shí)登錄憑證，每次調(diào)用wx.login函數(shù)，都會(huì)返回不同的code。用戶登錄流程（2）小程序?qū)ode發(fā)送給開(kāi)發(fā)者服務(wù)器在獲取code后，使用wx.request()將code發(fā)送給開(kāi)發(fā)者服務(wù)器。wx.request的超時(shí)時(shí)間默認(rèn)為60秒，為了避免用戶因網(wǎng)絡(luò)異常或服務(wù)器問(wèn)題等待回包太久，可以在app.json設(shè)置wx.request的超時(shí)時(shí)間，超時(shí)則觸發(fā)fail回調(diào)。可以在開(kāi)發(fā)者后臺(tái)設(shè)備服務(wù)器域名，如下圖所示。用戶登錄流程（3）開(kāi)發(fā)者服務(wù)器通過(guò)微信接口服務(wù)校驗(yàn)登錄憑證開(kāi)發(fā)者服務(wù)器將appid、appsecret、code發(fā)送給微信接口服務(wù)校驗(yàn)登錄憑證，如果校驗(yàn)成功，返回session_key和openid等。圖appid和appsecret用戶登錄流程（4）

開(kāi)發(fā)者服務(wù)器自定義登錄態(tài)自定義登錄態(tài)與openid和session_key相關(guān)聯(lián)，并把自定義登錄態(tài)返回給小程序端。服務(wù)器端驗(yàn)證通過(guò)之后，會(huì)向客戶端返回一個(gè)token，登錄狀態(tài)。客戶端會(huì)把token保存起來(lái)。用戶登錄流程

wx.login(Objectobject)調(diào)用接口獲取登錄憑證（code）。wx.login({success(res){if(res.code){//發(fā)起網(wǎng)絡(luò)請(qǐng)求wx.request({url:'/onLogin',data:{

code:res.code

}})}else{

console.log('登錄失敗！'+res.errMsg)

}}})實(shí)現(xiàn)用戶授權(quán)登錄圖

未登錄狀態(tài)圖

已登錄狀態(tài)實(shí)現(xiàn)用戶授權(quán)登錄

打開(kāi)pages/profile/profile.js文件的data對(duì)象中定義基礎(chǔ)數(shù)據(jù)userInfo，用于獲得個(gè)人信息。代碼如下所示。Page({

data:

{

userInfo:''}})退出登錄

在日常使用小程序的過(guò)程中，不可避免地需要退出當(dāng)前登錄的帳號(hào)，小程序提供了退出登錄的便利。退出登錄的做法可以是用戶頭像或者使用“退出登錄”按鈕，找到并點(diǎn)擊退出登錄或注銷賬號(hào)的選項(xiàng)。確認(rèn)退出登錄操作，系統(tǒng)將會(huì)清除登錄信息，并返回到登錄前的狀態(tài)。loginOut:function(){

var

that=this

wx.setStorageSync('userInfo','')

that.setData({

userInfo:''

})

}打開(kāi)pages/profile/profile.js文件，實(shí)現(xiàn)loginOut函數(shù)，使用wx.setStorageSync函數(shù)將緩存中的userInfo的值設(shè)置為空。代碼如下所示。感

謝

觀

看THANK項(xiàng)目八個(gè)人信息模塊開(kāi)發(fā)Useoftemplates任務(wù)二模板的使用在實(shí)際開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)有代碼復(fù)用的情況，即在不同的頁(yè)面中會(huì)經(jīng)常使用結(jié)構(gòu)類似的代碼。微信小程序模板是一種快速開(kāi)發(fā)小程序的方式，使用小程序模板，可以減少?gòu)牧汩_(kāi)始開(kāi)發(fā)的代碼量，加快小程序開(kāi)發(fā)的速度。項(xiàng)目八個(gè)人信息模塊開(kāi)發(fā)任務(wù)描述template模板語(yǔ)法-模版創(chuàng)建

WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。可以使用name屬性，作為模板的名字。然后在<template/>內(nèi)定義代碼片段。通過(guò)一個(gè)案例說(shuō)明模板的使用方法。首先在pages文件夾中新建一個(gè)template文件夾，文件夾中新建一個(gè)template.wxml文件，在頁(yè)面實(shí)現(xiàn)如下代碼。<template

name="temp">

<view><text

class="info">這是一個(gè)模板文件！</text>

</view></template>接下來(lái)我們就給模板增加樣式文件，在pages/template文件夾中新建一個(gè)template.wxss文件，然后對(duì)模板文件，添加一個(gè)簡(jiǎn)單樣式。.info{font-size:50rpx;}template模板語(yǔ)法-模版使用

在需要使用的wxml加載模板。例如，在index.wxml頁(yè)面加載模板，需要使用import語(yǔ)句引入文件路徑，通過(guò)<template>標(biāo)簽使用模板，template標(biāo)簽的is屬性與模板的name屬性對(duì)應(yīng)。<import

src

="../template/template.wxml"/><view>This

is

index.wxml</view><template

is="temp"/>

除了引入模板WXML頁(yè)面之外，還需要在index.wxml頁(yè)面使用import引入模板樣式文件。@import

"../template/template.wxss";template模板語(yǔ)法-數(shù)據(jù)傳遞

有時(shí)候模版需要加載的頁(yè)面?zhèn)鬟f參數(shù)，這時(shí)需要在模板中定義參數(shù)。template.wxml文件代碼如下所示。<template

name="temp">

<view><text

class="info">這是一個(gè)模板文件</text></view>

<view>

<text>{{index}}:{{msg}}</text>

<text>Time:{{time}}</text>

</view></template>

接下來(lái)在index.wxml中傳遞模板中所需要的參數(shù)，修改后的代碼如下：<import

src

="../template/template.wxml"/><view>This

is

index.wxml</view><template

is="temp"

data="{{...item}}"/>template模板語(yǔ)法-數(shù)據(jù)傳遞

在index.js中定義item為對(duì)象類型的數(shù)據(jù)。Page({data:{

item:{index:0,msg:'thisisatemplate',time:'2016-09-15'}}})創(chuàng)建template模板

is屬性可以使用Mustache語(yǔ)法，來(lái)動(dòng)態(tài)決定具體需要渲染哪個(gè)模板。<templatename="odd">

<view>odd</view></template><templatename="even">

<view>even</view></template><blockwx:for="{{[1,2,3,4,5]}}"><templateis="{{item%2==0?'even':'odd'}}"/></block>

template模板語(yǔ)法-模板的引用

如上都是在同一個(gè)wxml文件中定義和引用模板，而模板的定義和引用是可以分開(kāi)的。即在一個(gè)文件中定義模板，而在其他一個(gè)或多個(gè)文件wxml文件中都可以使用定義好的模板。從外部文件中引用模板，使用importsrc="templateUrl"標(biāo)簽。同樣使用is屬性來(lái)指向要引用的標(biāo)簽。

要在index.wxml中使用template中定義的模板，則需要先在index中利用import來(lái)導(dǎo)入該模板：template模板語(yǔ)法-模板的引用s|--index|--index.js|--index.json|--index.wxml|--index.wxss|--template|--template.js|--template.json|--template.wxml|--template.wxss<!--index.wxml--><importsrc="../template/template.wxml"<templateis="msgItem"data={{...indexData}}//使用的是js文件中的數(shù)據(jù)

在一個(gè)項(xiàng)目中需要在多處頁(yè)面使用類似的模塊，就需要?jiǎng)?chuàng)建模板，減少代碼量，同時(shí)代碼高度復(fù)用；

在同一個(gè)WXML文件中創(chuàng)建多個(gè)類似的模板用name屬性來(lái)區(qū)別；

模板WXSS在全局引入和在使用頁(yè)面引入的區(qū)別在于模板的使用量；

使用import引入模板WXML和WXSS；

通過(guò)template標(biāo)簽使用模板，template標(biāo)簽的is屬性與模板的name屬性對(duì)應(yīng)，data屬性代表傳入模板的數(shù)據(jù)。template模板使用小結(jié)創(chuàng)建template模板

通過(guò)上面的template模板示例，了解了模板的實(shí)現(xiàn)過(guò)程之后，接下來(lái)在商城項(xiàng)目中使用模板實(shí)現(xiàn)個(gè)人信息資料的顯示。使用template模板

打開(kāi)pages/pages/profile.wxml頁(yè)面，引入模板頁(yè)面list.wxml。<import

src="../../template/list.wxml"/>

打開(kāi)pages/pages/profile.wxss頁(yè)面，引入模板樣式list.wxss。@import

"../../template/list.wxss";使用template模板

打開(kāi)pages/pages/profile.js頁(yè)面，定義個(gè)人信息資料，包括三個(gè)數(shù)據(jù)，url用于跳轉(zhuǎn)地址，title顯示信息標(biāo)題，iconurl用于標(biāo)題顯示的圖標(biāo)。Page({

data:

{

menu:[{

url:'/pages/profile/profile',

title:'個(gè)人資料',

iconurl:'/images/others/contract_icon.png'},

{

url:'/pages/profile/profile',

title:'購(gòu)買記錄',

iconurl:'/images/others/icon-Check.png'}

]})使用template模板

打開(kāi)pages/pages/profile.wxml頁(yè)面，通過(guò)<template>標(biāo)簽使用模板，template標(biāo)簽的is屬性與模板的name屬性對(duì)應(yīng)。<view>

<template

wx:for="{{menu}}"

is="list"

data="{{item}}"></template>

</view>感

謝

觀

看THANK項(xiàng)目八個(gè)人信息模塊開(kāi)發(fā)TheapplicationofEchartinsmallprograms任務(wù)三Echart在小程序中的運(yùn)用ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫(kù)，提供直觀、生動(dòng)、可交互和可個(gè)性化定制的數(shù)據(jù)可視化圖表。Echarts提供了小程序版本echarts-for-weixin，封裝了成了一個(gè)名為ec-canvas的自定義組件供開(kāi)發(fā)者直接引用，開(kāi)發(fā)者通過(guò)熟悉的ECharts配置方式，快速開(kāi)發(fā)圖表，滿足各種可視化需求。項(xiàng)目八個(gè)人信息模塊開(kāi)發(fā)任務(wù)描述配置ECharts

ECharts可下載源碼自行編譯。在創(chuàng)建項(xiàng)目之后，或者僅需拷貝ec-canvas目錄到新建的項(xiàng)目下，然后做相應(yīng)的調(diào)整。ec-canvas文件夾整個(gè)有將近1M，建議在分包中組織可視化頁(yè)面。此外，考慮在線定制需要的圖表，下載的文件替換掉ec-canvas/echarts.js。打開(kāi)pages/profile/profile.json文件，配置如下：{"usingComponents":{

"ec-canvas":"../../ec-canvas/ec-canvas"}}配置ECharts

在profile.wxml設(shè)計(jì)可視圖區(qū)域，包括柱狀圖、餅圖和折線圖區(qū)域。打開(kāi)

pages/profile/profile.wxml文件，編寫可視化圖表區(qū)域布局。<view

class="echarts">

<view

class="data_chart"></view>

<view

class="divide"></view>

<view

class="data_chart"></view>

<view

class="divide"></view>

<view

class="data_chart">

</view></view>配置ECharts

在profile.wxml設(shè)計(jì)可視圖區(qū)域，包括柱狀圖、餅圖和折線圖區(qū)域。打開(kāi)

pages/profile/profile.wxml文件，編寫可視化圖表區(qū)域布局。<view

class="echarts">

<view

class="data_chart">

<view

class="title">購(gòu)買商品統(tǒng)計(jì)</view>

<ec-canvas

id="mychart-dom-bar"

canvas-id="mychart-bar"

ec="{{

ec

}}"></ec-canvas>

</view>

<view

class="divide"></view>

<view

class="data_chart"></view>

<view

class="divide"></view>

<view

class="data_chart">

</view></view>柱狀圖的使用

柱狀圖（或稱條形圖）是一種通過(guò)柱形的長(zhǎng)度來(lái)表現(xiàn)數(shù)據(jù)大小的一種常用圖表類型。設(shè)置柱狀圖的方式，是將series的type設(shè)為bar。在這個(gè)示例中，橫坐標(biāo)是類目型的，因此需要在xAxis中指定對(duì)應(yīng)的值；而縱坐標(biāo)是數(shù)值型的，可以根據(jù)series中的data，自動(dòng)生成對(duì)應(yīng)的坐標(biāo)范圍。柱狀圖的使用

在這個(gè)例子中，橫坐標(biāo)是類目型的，因此需要在xAxis中指定對(duì)應(yīng)的值；而縱坐標(biāo)是數(shù)值型的，可以根據(jù)series中的data，自動(dòng)生成對(duì)應(yīng)的坐標(biāo)范圍。option={xAxis:{data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{},series:[{type:'bar',data:[23,24,18,25,27,28,25]}]};餅圖的使用

餅圖主要用于表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比，每個(gè)的弧度表示數(shù)據(jù)數(shù)量的比例。餅圖的配