《微信小程序程序設計與開發(fā)》課件 第三章 歡迎頁面 文章列表頁面升級

第三章

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

postData

=

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

//綁定數(shù)據(jù)

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

})//向外導出模塊中文章列表數(shù)據(jù)和文章輪播數(shù)據(jù)module.exports={postList:postListData,bannerList:bannerListData}步驟:3：通過模塊調(diào)用數(shù)據(jù)微信小程序模板的使用WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。步驟1：創(chuàng)建模板文件步驟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)監(jiān)聽小程序初始化，當小程序初始化完成，會觸發(fā)執(zhí)行。(全局只觸發(fā)一次)onShow(Objectobject)監(jiān)聽小程序顯示，當小程序啟動，或從后臺進入前臺，會觸發(fā)執(zhí)行。onHide()監(jiān)聽小程序隱藏，當小程序從前臺進入后臺，會觸發(fā)執(zhí)行。onError(Stringerror)監(jiān)聽小城發(fā)生腳本錯誤，或者API調(diào)用失敗，會觸發(fā)執(zhí)行，并帶上錯誤信息。App({

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

onLaunch:

function

()

{

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

},

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

onShow:

function

(options)

{

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

},

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

onHide:

function

()

{

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

},

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

onError:

function

(msg)

{

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

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

"Iamglobaldata",

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

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

var

appInstance

=

getApp();

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

onLaunch:

function

()

{

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

var

storageData

=

wx.getStorageSync('postList');

if(!storageData){

var

dataObj

=

require("data/data.js");

//清除緩存

wx.clearStorageSync();

//保存本地數(shù)據(jù)

wx.setStorageSync('postList',

dataObj.postList);

}else{

//保存全局變量中

this.globalData.postList

=

storageData;

}

}本地數(shù)據(jù)存儲，Storage面板顯示信息用戶登錄與授權-APIwx.getUserProfile(Objectobject)獲取用戶信息。頁面產(chǎn)生點擊事件（例如button上bindtap的回調(diào)中）后才可調(diào)用，每次請求都會彈出授權窗口，用戶同意后返回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:

''

});

//清除緩存中用戶信息