第三章

主講人：XX歡迎頁面&文章列表頁面升級本章目標完成文章數據數據從業務分離與模塊化使用微信小程序模板完成文章列表顯示理解微信小程序應用程序的生命周期使用緩存完成本地模擬服務器數據庫用戶登錄授權模塊化程序設計程序設計為什么模塊化？(1)控制了程序設計的復雜性。(2)提高了代碼的重用性。(3)易于維護和功能擴充。(4)有利于團隊開發。模塊化程序設計是指在進行程序設計時將一個大程序按照功能劃分為若干小程序模塊，每個小程序模塊完成一個確定的功能，并在這些模塊之間建立必要的聯系，通過模塊的互相協作完成整個功能的程序設計方法微信小程序中模塊化可以將一些公共的代碼抽離成為一個單獨的js文件，作為一個模塊，期使用步驟：1、通過module.exports或者exports才能對外暴露接口；2、通過在需要使用這些模塊的文件中，使用require將公共代碼引入步驟1：向外導出模塊中文章列表數據和文章輪播數據步驟:2：使用模塊化編程導入postList模塊加載數據//使用模塊化編程導入postList模塊加載數據var

postData

=

require("../../data/data");

//綁定數據

this.setData({postList:postData.postList,bannerList:postData.bannerList

})//向外導出模塊中文章列表數據和文章輪播數據module.exports={postList:postListData,bannerList:bannerListData}步驟:3：通過模塊調用數據微信小程序模板的使用WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用。步驟1：創建模板文件步驟2：定義模板<!--文章模板--><template

name="postItemTpl">

<view

class="post-container">

<view

class="post-author-date">

<image

src="{{avatar}}"/>

<text>{{date}}</text>

</view>

<text

class="post-title">{{title}}</text>

<image

class="post-image"src="{{postImg}}"mode="aspectFill"/>

<text

class="post-content">{{content}}</text>

<view

class="post-like">

<image

src="/images/icon/wx_app_collect.png"/>

<text>{{collectionNum}}</text>

<image

src="/images/icon/wx_app_view.png"></image>

<text>{{readingNum}}</text>

<image

src="/images/icon/wx_app_message.png"></image>

<text>{{commentNum}}</text>

</view>

</view></template>步驟2：使用模板

<template

is="postItemTpl"data="{{...post}}"></template>微信小程序App生命周期-1onLaunch(Objectobject)監聽小程序初始化，當小程序初始化完成，會觸發執行。(全局只觸發一次)onShow(Objectobject)監聽小程序顯示，當小程序啟動，或從后臺進入前臺，會觸發執行。onHide()監聽小程序隱藏，當小程序從前臺進入后臺，會觸發執行。onError(Stringerror)監聽小城發生腳本錯誤，或者API調用失敗，會觸發執行，并帶上錯誤信息。App({

/***當小程序初始化完成時，會觸發onLaunch（全局只觸發一次）*/

onLaunch:

function

()

{

console.log("App:onLaunch:當小程序初始化完成時");

},

/***當小程序啟動，或從后臺進入前臺顯示，會觸發onShow*/

onShow:

function

(options)

{

console.log("App:onShow:當小程序啟動，或從后臺進入前臺顯示，會觸發onShow");

},

/***當小程序從前臺進入后臺，會觸發onHide*/

onHide:

function

()

{

console.log("App:onHide:當小程序從前臺進入后臺，會觸發onHide");

},

/***當小程序發生腳本錯誤，或者api調用失敗時，會觸發onError并帶上錯誤信息*/

onError:

function

(msg)

{

console.log("App:onError:當小程序發生腳本錯誤，或者api調用失敗時，會觸發onError并帶上錯誤信息",msg);

}})微信小程序App生命周期-2應用程序生命周期函數回調控制臺顯示信息點擊”Home”健回調控制臺顯示信息點擊”發現欄小程序主入口”,控制臺顯示信息微信小程序中全局變量App({globalData:{globalMessage:

"Iamglobaldata",

}})通過全局函數getApp可以獲取全局的應用實例，如果需要全局的數據可以在App()中設置

//獲取應用級的全局變量

var

appInstance

=

getApp();

console.log(appInstance.globalData);微信小程序數據緩存wx.setStorageSync(stringkey,anydata)將數據存儲在本地緩存中指定的key中。會覆蓋掉原來該key對應的內容。除非用戶主動刪除或因存儲空間原因被系統清理，否則數據都一直可用。單個key允許存儲的最大數據長度為1MB，所有數據存儲上限為10MB。wx.getStorageSync(stringkey)從本地緩存中同步獲取指定key的內容。wx.removeStorageSync(stringkey)從本地緩存中移除指定key。wx.clearStorage(Objectobject)清理本地數據緩存。數據緩存API截圖微信小程序數據緩存-示例/***當小程序初始化完成時，會觸發onLaunch（全局只觸發一次）*/

onLaunch:

function

()

{

console.log("App:onLaunch:當小程序初始化完成時");

var

storageData

=

wx.getStorageSync('postList');

if(!storageData){

var

dataObj

=

require("data/data.js");

//清除緩存

wx.clearStorageSync();

//保存本地數據

wx.setStorageSync('postList',

dataObj.postList);

}else{

//保存全局變量中

this.globalData.postList

=

storageData;

}

}本地數據存儲，Storage面板顯示信息用戶登錄與授權-APIwx.getUserProfile(Objectobject)獲取用戶信息。頁面產生點擊事件（例如button上bindtap的回調中）后才可調用，每次請求都會彈出授權窗口，用戶同意后返回userInfo用戶登錄與授權-示例-1<view

class="container">

<!--用戶信息-->

<view

class="userinfo">

<block

wx:if="{{!userInfo}}">

<button

bindtap="login">用戶登錄授權</button>

</block>

<block

wx:else>

<image

bindtap="bindViewTap"class="userinfo-avatar"src="{{userInfo.avatarUrl}}"mode="cover"></image>

<text

class="motto">你好！{{userInfo.nickName}}</text>

<button

bindtap="loginOut">退出登錄</button>

<view

catchtap="goToPostPage"class="journey-container">

<text

class="journey">開啟小程序之旅</text>

</view>

</block>

</view></view>用戶登錄授權的顯示邏輯代碼//用戶登錄授權

login()

{

console.log('用戶點擊登錄授權');

wx.getUserProfile({desc:

'用于完善會員資料',

success:

res

=>

{

let

userInfo

=

res.userInfo;

//登錄授權成功，保存用戶信息到緩存

wx.setStorageSync('userInfo',

userInfo)

this.setData({userInfo:

userInfo

});

}

})

},

//用戶退出登錄

loginOut()

{

this.setData({userInfo:

''

});

//清除緩存中用戶信息