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.注意事项
- navigateTo,redirectTo只能打开非tabBar页面
- switchTab只能打开任意页面
- reLaunch可以打开任意页面
- 页面底部的tabBar由页面决定,即只要是定义为tabBar的页面,底部都有tabBar
- 调用页面路由带的参数可以在目标页面的onLoad中获取
2.3.5自定义函数
- 除了初始化数据和生命周期函数,Page中还可以定义一些特殊的函数:事件处理函数
- 在渲染层的组件中可以加入事件绑定
- 当达到触发事件时,就会执行Page中定义的事件处理函数
示例代码
<!--wxml-->
<view bindtap="clickMe">点我</view