《微信小程序程序设计与开发》课件 第三章 欢迎页面 文章列表页面升级

第三章

主讲人：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:

''

});

//清除缓存中用户信息