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

第三章

主讲人：XX

欢迎页面文章列表页面升级

本章目标

完成文章数据数据从业务分离与模块化

使用微信小程序模板完成文章列表显示

理解微信小程序应用程序的生命周期

使用缓存完成本地模拟服务器数据库

用户登录授权

模块化程序设计

程序设计为什么模块化？

(1)控制了程序设计的复杂性。

(2)提高了代码的重用性。

(3)易于维护和功能扩充。

(4)有利于团队开发。

模块化程序设计是指在进行程序设计时将一个大程序按照功能划分为若干小程序模块，每个小程序模块完成一个确定的功能，并在这些模块之间建立必要的联系，通过模块的互相协作完成整个功能的程序设计方法

微信小程序中模块化

可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块，期使用步骤：

1、通过module.exports或者exports才能对外暴露接口；

2、通过在需要使用这些模块的文件中，使用require将公共代码引入

步骤1：向外导出模块中文章列表数据和文章轮播数据

步骤:2：使用模块化编程导入postList模块加载数据

//使用模块化编程导入postList模块加载数据

varpostData=require(../../data/data);

//绑定数据

this.setData({

postList:postData.postList,

bannerList:postData.bannerList

})

//向外导出模块中文章列表数据和文章轮播数据

module.exports={

postList:postListData,

bannerList:bannerListData

}

步骤:3：通过模块调用数据

微信小程序模板的使用

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

步骤1：创建模板文件

步骤2：定义模板

!--文章模板--

templatename=postItemTpl

viewclass=post-container

viewclass=post-author-date

imagesrc={{avatar}}/

text{{date}}/text

/view

textclass=post-title{{title}}/text

imageclass=post-imagesrc={{postImg}}mode=aspectFill/

textclass=post-content{{content}}/text

viewclass=post-like

imagesrc=/images/icon/wx_app_collect.png/

text{{collectionNum}}/text

imagesrc=/images/icon/wx_app_view.png/image

text{{readingNum}}/text

imagesrc=/images/icon/wx_app_message.png/image

text{{commentNum}}/text

/view

/view

/template

步骤2：使用模板

templateis=postItemTpldata={{...post}}/template

微信小程序App生命周期-1

onLaunch(Objectobject)监听小程序初始化，当小程序初始化完成，会触发执行。(全局只触发一次)

onShow(Objectobject)监听小程序显示，当小程序启动，或从后台进入前台，会触发执行。

onHide()监听小程序隐藏，当小程序从前台进入后台，会触发执行。

onError(Stringerror)监听小城发生脚本错误，或者API调用失败，会触发执行，并带上错误信息。

App({

/**

*当小程序初始化完成时，会触发onLaunch（全局只触发一次）

*/

onLaunch:function(){

console.log(App:onLaunch:当小程序初始化完成时);

},

/**

*当小程序启动，或从后台进入前台显示，会触发onShow

*/

onShow:function(options){

console.log(App:onShow:当小程序启动，或从后台进入前台显示，会触发onShow);

},

/**

*