上一篇文章介绍了微信小程序的目录结构和基本配置。这里，我们来介绍一下函数定义和页面渲染。

Applet逻辑App.js:定义App函数注册applet，包括全局数据和函数，指定applet的生命周期回调。整个小程序只有一个App实例，所有页面共享。

//app . jsapp({ onlunch : function(){//show local storage capacity var Logs=wx . getstorage ync(' Logs ')| |[]Logs . unshift(date . now())wx . setstorage ync(' Logs '，Logs) //登录wx . log in({ success 3360 RES={//发送res.code到后台获取openId、sessionKey、UnionId} }) //获取用户信息wx。get setting({ success : RES={ if(RES . auth setting['作用域。userinfo ']){//已经授权，可以直接调用getUserInfo获取头像昵称。不会播放wx . getuserinfo({ success : res={//可以发送RES到后台解码union idthis . global data . userinfo=res.userinfo//because getuserinfo是一个网络请求，可能会在Page.onLoad之后返回.//所以在这里添加回调来防止这种如果(这。userinforeadycallback) {this。user inforeadycallback(RES)} } } } } })}，global data : { user info 3360 null } })生命周期函数：

属性类型描述启动时的触发定时功能生命周期回调-监视器小程序初始化(仅全局触发一次)显示功能生命周期回调-监视器小程序显示小程序启动。或者从后台进入前台显示时onHide Function life cycle回调-one error监听小程序从前台进入后台时出现Function错误，在监听函数小程序中出现脚本错误或api调用失败时触发。当小程序要打开的页面不存在时，会触发一条错误消息，并带来页面信息来回调函数。其他任何开发人员都可以向对象参数添加任意函数或数据，并使用它来访问页面js:

共享功能在页面js中定义，定义后可以共享右上角的菜单：

page({ onsharepmessage : function(RES){ if(RES . from==' button ')} {//从页内转发按钮console.log (Res. target)}返回{title : '自定义转发标题'，path: '/page/user？Id=123 '，imageurl : ' https://mslws . top/public/uploads/2018-09-19/5 ba1efaec1b 1f . jpg ' })页面js:

var app instance=getapp(). console . log(app instance . global data)工具栏utils.js存储常用的工具函数，如日期格式和时间格式函数。通过模块导出进行定义和注册后，才能在其他页面上使用.

练习：制作以下页面和样式

weather.js:

页面({data: {temp:' 4'，low:'-1'，high:' 10'，type:' sunny '，city: ' Beijing '，week: '星期四'，weather:' none ')

view class=' content ' view class=' today ' view class=' info ' view class=' temp ' { temp } }/view view class=' low high ' { low } }/view view class=' type ' { type } }/view class=' city ' { city } }/view class=' week ' { weekly } }/view view class=' weather ' { weather } }/view/view/view/view/view weather . wxss:内容{字体系列：微软雅黑，宋体；font-size :14 px背景尺寸：封面；高度： 100%;宽度： 100%;color: # 333333}。今日{填充-top : 70 rpx；高度： 50%;}.temp { font-size : 80px文本对齐：中心；}.城市{ font-size :20 px文本对齐：中心；保证金-top : 20 rpx；右边距： 10 rpx}.低高{ font-size : 12px文本对齐：中心；页边距-顶部： 30 rpx}.键入{ font-size : 16px文本对齐：中心；页边距-顶部： 30 rpx}.周{ font-size : 12px文本对齐：中心；页边距-顶部： 30 rpx}.天气{ font-size : 12px文本对齐：中心；保证金-top : 20 rpx；}数据绑定：

！-wxml-查看{ { message } }/查看页面。js:

页面({ data : { message : ' Hello MINA！'}})列表渲染：

！-wxml-view wx : for=' { { array } } ' { { item } }/view page。射流研究…

页面({ data: { array: [1，2，3，4，5]})

条件渲染：

！-wxml-view wx : if=' { { view==' WEBSVICE ' } } ' WEBSVICE/view wx : elif=' { { view=' APP ' } ' APP/view wx : else=' { { view=' MINA ' } } ' MINA/view//。佩奇。js页面({ data : { view : ' MINA ' })模板：

！- wxml -模板名称='staffName '视图名字： { {名字}}，姓氏： { {姓氏} }/视图/模板模板是='staffName '数据=' { }.staffA}}'/templatetemplate为=' staffName '数据=' { }.staffB}}'/templatetemplate为=' staffName '数据=' { }.staffC } } '/template//page。js页面({ data : { stafa : { first name : ' huk '，lastName: 'Hu'}，stafb : { first name 3: ' Shang '，lastName: 'You'}，stafc : { first name : ' Gideon '，last name 3: ' Lin ' })(9506 . 163.com)

事件：

视图绑定tap=' add ' { count } }/viewPage({ data : { count : 1 }，add : function(e){ this。setdata({ count : this。数据。count 1 })})})

希望本文所述对大家微信小程序设计有所帮助。