一、小程序目录结构
文件类型
- .json为配置文件
- .wxml 为模板文件,相当于HTML模板
- .wxss 为样式文件,相当于HTML的CSS样式表
- .js 为JS 脚本逻辑文件,相当于HTML的js脚本
总结构
- app:一个,描述整体程序的;
- page:多个,描述各自页面的;
- project.config.json:一个,项目IDE配置文件;
- utils:一个,共用程序逻辑库;
具体说明
1、一个小程序主体部分(名称为app),由三个文件组成,必须放在项目的根目录;
文件 | 必填 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共配置 |
app.wxss | 否 | 小程序公共样式表 |
2、多个描述各自页面的 pages(pages目录存储小程序的每个页面);
文件 | 必填 | 作用 |
---|---|---|
页面名称.js | 是 | 本页面逻辑 |
页面名称.wxml | 是 | 页面结构 |
页面名称.json | 否 | 页面配置 |
页面名称.wxss | 否 | 页面样式表 |
注意:
- 为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名;
- 页面的配置,会覆盖小程序的公共配置;
3、根目录下的project.config.json
- 项目配置文件,或称为项目IDE配置文件;
- 在“微信开发者工具”上做的任何配置都会写入到这个文件;
- 如界面颜色、编译配置等,更换电脑,开发工具不需要重新配置;
4、一个共用程序逻辑库(util目录)
- 这个目录可以自定义名称;
- 公共的js函数文件,通过module.exports的方式,暴露pages下的每个页面使用;
- 不需要每个页面编写重复的Js代码;
module.exports={} 暴露给页面使用:
5、总结构图
新建的项目结构图:
二、文件说明
1、app.js文件
作用:一个描述整体程序的,调用了App()函数,注册一个小程序,参数为一个{}对象;
App()函数:用来注册一个小程序,接受一个 object 参数,其指定小程序的生命周期函数等;
说明:
1)注册小程序
每个小程序都需要在 app.js
中,调用 App
方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
// app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
2)整个小程序只有一个 App 实例,是全部页面共享的。
开发者可以通过 getApp
方法获取到全局唯一的 App 实例,获取App上的数据或调用开发者注册在 App
上的函数。
// index.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
3)App(Object object)
注册小程序,接受一个 Object
参数,其指定小程序的生命周期回调等;
App() 必须在 app.js
中调用,必须调用且只能调用一次。不然会出现无法预期的后果
参数Object object
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
onLaunch | function | 否 | 生命周期回调——监听小程序初始化。 | ||
onShow | function | 否 | 生命周期回调——监听小程序启动或切前台。 | ||
onHide | function | 否 | 生命周期回调——监听小程序切后台。 | ||
onError | function | 否 | 错误监听函数。 | ||
onPageNotFound | function | 否 | 页面不存在监听函数。 | 1.9.90 | |
onUnhandledRejection | function | 否 | 未处理的 Promise 拒绝事件监听函数。 | 2.10.0 | |
其他 | any | 否 | 开发者可以添加任意的函数或数据变量到 Object 参数中,用 this 可以访问 |
onLaunch(Object object)
小程序初始化完成时触发,全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
参数:与 wx.getLaunchOptionsSync 一致
onShow(Object object)
小程序启动,或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。
参数:与 wx.onAppShow 一致
onHide()
小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。
onError(String error)
小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。
参数:与 wx.onError 一致
onPageNotFound(Object object)
- 基础库 1.9.90 开始支持,低版本需做兼容处理。
小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound。
参数:与 wx.onPageNotFound 一致
示例代码:
App({
onPageNotFound(res) {
wx.redirectTo({
url: 'pages/...'
}) // 如果是 tabbar 页面,请使用 wx.switchTab
}
})
onUnhandledRejection(Object object)
- 基础库 2.10.0 开始支持,低版本需做兼容处理。
小程序有未处理的 Promise 拒绝时触发。也可以使用 wx.onUnhandledRejection 绑定监听。注意事项请参考 wx.onUnhandledRejection。
参数:与 wx.onUnhandledRejection 一致
4)App的Object
参数--类型any
开发者可以添加任意的函数,或数据到 Object 参数中,用 this 可以访问相当于ApplicationContext,在整个小程序上下文中都以使用,即服务整个小程序scope;
app.js程序主体逻辑层,使用this访问;
例:App中,自定义函数和数据变量,在onShow函数中被调用;
//app.js
App({
onShow:function(){
this.myConsoleLog("app内onShow调用自定义函数myConsoleLog")
this.myConsoleLog("app内打印自定义数据变量:"+ this.myminiProgramName)
},
myConsoleLog:function(msg){
console.log(msg)
},
myminiProgramName:"Nikey的小程序"
})
运行结果:
在页面.js逻辑层,使用getApp().属性名称访问;
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
name:''
},
onShow:function(){
app.myConsoleLog("index page页面调用")
this.setData({
name:app.myminiProgramName
})
}
})
其他例子:
注意:
- App() 必须在 app.js 中注册,且不能注册多个;
- 不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例;
- 不要在 onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成;
- 通过 getApp() 获取实例之后,不要私自调用生命周期函数;
2、页面.js文件,逻辑层访问
//index.js
//获取应用实例
const app = getApp()
1)页面.js逻辑层访问;
2)app.js的App({自定义Any属性}) ,页面.js逻辑层访问,以及视图使用;
3、app.json文件,配置小程序项目
作用:对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
所有的选项配置:pages、window、tabBar、networkTimeout、debug
app.json 配置项列表
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pages | String Array | 是 | 设置页面路径 |
window | Object | 否 | 设置默认页面的窗口表现 |
tabBar | Object | 否 | 设置底部 tab 的表现 |
networkTimeout | Object | 否 | 设置网络超时时间 |
debug | Boolean | 否 | 设置是否开启 debug 模式 |
1)pages属性说明:
- 类型是String Array(字符串数组), 每一项都是字符串,来指定小程序由哪些页面组成;
- 每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面;
- 小程序中新增/减少页面,都需要对 pages 数组进行修改;
- 文件名不需要后缀,框架自动匹配pages 数组路径下 .json, .js, .wxml, .wxss 4文件进行整合;
- pages字符串数组的第一个字符串页面路径【路径+文件名】为小程序显示的首页;
app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
4、页面的js逻辑层(注册页面)