二、小程序框架分析

2.1小程序框架

2.1.1基本框架

1）逻辑层

用来处理业务逻辑
JavaScript

2）视图层

用来渲染页面
视图层描述语言WXML
视图样式WXSS

2.1.2目录结构

1）框架全局文件

①app.js

定义全局数据和函数的使用
指定微信小程序的生命周期函数

onLaunch：监听小程序初始化
onShow：监听小程序显示
onHide：监听小程序隐藏

②app.json

③app.wxss

对CSS样式进行了拓展
该文件是对所有页面定义的一个全局样式

当页面重新定义的样式与全局样式冲突，全局样式将被覆盖

④project.config.json

小程序项目个性化配置文件：界面颜色、编译配置等
包含一些版本、appid、项目名称等信息
换机器重新安装开发工具需重新配置
每个项目根目录下均会产生此文件

2）框架页面文件

框架页面文件主要由5个文件组成：

文件类型	是否必填	作用
js	是	页面逻辑
json	否	页面配置
wxml	是	页面结构
wxs	否	小程序脚本语言
wxss	否	页面样式表

框架页面文件都放置在pages文件夹下

2.2注册程序应用

2.2.1小程序注册

在App()函数里完成小程序注册，并指定其生命周期函数

属性	类型	描述	触发时机
onLaunch	Function	监听小程序初始化	当小程序初始化完成时，会触发onLaunch(全局只触发一次)
onShow	Function	监听小程序显示	当小程序启动，或从后台进入前台显示，会触发onShow
onHide	Function	监听小程序隐藏	当小程序从前台进入后台，会触发onHide
onError	Function	错误监听函数	当小程序发生脚本错误，或者API调用失败时，会触发onError并附带错误信息
onPageNotFound	Function	页面不存在监听函数	当小程序出现要打开的页面不存在的情况，会附带页面信息回调该函数
其他	Any		开发者可以添加任意的函数或数据到Object参数中，用this可以使用

2.2.2全局调用

在页面js文件，按如下所示方法，就可以调用app.js里的全局数据globalData

var AppInstance=getApp()
console.log(AppInstance.globalData)

不仅可以调用全局数据，还可以调用自定义的全局函数，但是不能调用生命周期函数

2.2.3注意事项

• App()必须在app.js中注册，且不能注册多个
• 不要在定义于app()内的函数中调用getApp()，使用this就可以获取App实例
• 不要在onLoad的时候调用getCurrentPage()，此时page还没有生成
• 通过getApp()获取实例之后，不要私自调用生命周期函数

2.3注册页面的使用

.js文件中的Page()函数用来注册页面
接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等页面的所有业务逻辑处理都放在这个文件里
1）Object参数说明

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	监听页面加载
onReady	Function	监听页面初次渲染完成
onShow	Function	监听页面显示
onHide	Function	监听页面隐藏
onUnload	Function	监听页面卸载
onPullDownRefresh	Function	监听用户下拉动作
onReachBottom	Function	页面上拉触发事件的处理函数
onShareAppMessage	Function	用户单击右上角分享
onPageScroll	Function	页面滚动触发事件的处理函数
onTabItemTap	Function	当前是tab页时，点击tab时触发
其他	Any	开发者可以添加任意的函数或数据到object参数中，在页面的函数中用this可以访问

2）示例代码

Page({
   
	data:{
   
		text:'Hello World!'
	},
	onLoad:function(options){
   
	},
	onReady:function(options){
   
	},
	onShow:function(options){
   
	},
	onShareAppMessage:function(options){
   
	}
})

2.3.1页面初始化数据

• data
• 初始化数据将作为页面的第一次渲染
• data会以json的形式由逻辑层传到渲染层
• 其数据必须是可以转成json的格式（字符串、数字、布尔值、对象或数组）
• 渲染界面可以通过WXML对数据进行绑定

//.js
Page({
   
	data:{
   
		motto:'我的第一个微信小程序',
		userInfo:{
   },
	}})

<!--.wxml-->
<text class="user-motto">{
  {motto}}</text>

2.3.2生命周期函数

• onLoad 页面加载：一个页面只调用一次，接受页面参数可以获取wx.navigateTo和wx.redirectTo及< navigator >中的query
• onShow 页面显示：每次打开页面都会调用一次
• onReady 页面初次渲染完成：一个页面只调用一次，可和视图层进行交互，对界面的设置如wx.setNavigationBarTitle应在onReady之后设置
• onHide 页面隐藏：当调用navigateTo或底部tab切换时调用
• onUnload 页面卸载：当调用redirectTo或navigateBack的时候调用

2.3.3页面相关事件处理函数

• onPullDownRefresh 下拉刷新：监听用户下拉刷新事件，需要在config的windows选项中开启enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
• onShareAppMessage 用户分享：只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮，用户点击“分享”按钮的时候会调用此函数。此事件需要返回一个Object参数，用于自定义分享内容。

分享参数及代码

Page({
   
	onShareAppMessage:function(){
   
		return{
   
			title:'自定义分享标题'
			desc:'自定义分享描述'
			path:'/page/user?id=123'
			//必须是以/开头的完整路径
		}.
	}
})

2.3.4页面路由管理

• 微信小程序的页面路由都是由微信小程序框架来管理的
• 框架以栈的形式维护了所有页面
• 小程序页面交互也是通过栈来完成√小程序初始化时，新页面入栈
  • 打开新页面时，新页面入栈
  • 页面重定向时，当前页面出栈
  • 页面返回时，页面不断出栈，直到新页面入栈
  • tab切换时，页面全部出栈，只留下新的tab页面
  • 重新加载时，页面全部出栈，只留下新的页面

1.路由触发方式及页面生命周期函数

页面路由方式	触发时机	路由后页面	路由前页面
初始化	小程序打开的第一个页面	onLoad,onShow
打开新页面	调用API wx.navigateTo或使用组件< navigator open-type=“navigate”/>	onLoad,onShow	onHide
页面重定向	调用API wx.redirectTo或使用组件< navigator open-type=“redirect”/>	onLoad,onShow	onUnload
页面返回	调用API wx.navigateBack或用户按左上角返回按钮	onShow	onUnload
tab切换	Function	调用API wx.switchTab或使用组件< navigator open-type=“switchTab”/> 或用户切换/tab

API应用程序调用接口

2.注意事项

1. navigateTo,redirectTo只能打开非tabBar页面
2. switchTab只能打开任意页面
3. reLaunch可以打开任意页面
4. 页面底部的tabBar由页面决定，即只要是定义为tabBar的页面，底部都有tabBar
5. 调用页面路由带的参数可以在目标页面的onLoad中获取

2.3.5自定义函数

• 除了初始化数据和生命周期函数，Page中还可以定义一些特殊的函数:事件处理函数
• 在渲染层的组件中可以加入事件绑定
• 当达到触发事件时，就会执行Page中定义的事件处理函数

示例代码

<!--wxml-->
<view bindtap="clickMe">点我</view