微信小程序（一）微信小程序框架分析

最新推荐文章于 2024-08-06 12:45:29 发布

神农尺

最新推荐文章于 2024-08-06 12:45:29 发布

阅读量531

点赞数

文章标签：微信小程序小程序小程序结构

本文链接：https://blog.csdn.net/qq_42855675/article/details/102637911

版权

微信小程序框架结构介绍

框架全局文件

1.app.js
2.app.json
3.app.wxss

app.js 小程序逻辑文件（必填）

----使用APP()函数注册小程序，并指定其生命周期函数。

属性	类型	描述	触发时机
onLoad	Function	监听小程序初始化	当小程序初始化完成时，会触发onLoad（全局只触发一次）
onShow	Function	监听小程序显示	当小程序启动，或从后台进入前台显示，会触发onShow，每次打开页面都会调用一次
onHide	Function	监听小程序隐藏	当小程序从前台进入后台时触发
onError	Function	错误监听函数	当小程序发生脚本错误，或者API调用失败时，会触发onError并附带错误信息
onPageNotFound	Function	页面不存在监听函数	当小程序出现要打开的页面不存在的情况会附带页面信息回调该函数
globalData	String	全局数据	在其他页面中可以调用全局数据
自定义函数	Function	全局函数	在其他页面中可以调用全局函数，但不可以调用生命周期函数

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

（1）App()必须在app.js中注册，且不能注册多个
（2）不可以在定义App()内的函数调用getApp()，使用this就可以获取App实例
（3）通过getApp()获取实例后，不要私自调用生命周期函数

app.json小程序公众设置文件（必填）

-----此文件配置小程序相关数据
1.配置页面路径（pages）
（1）页面必须在该配置中注册，否则无法使用页面。
（2）第一个页面为首先被渲染到屏幕上
（3）最后一个注册页面后不可以加’,'否则出错误

"pages":[
  "pages/index/index",
  "pages/logs/logs"
]

2.配置窗口表现（window）

"window":{
  "navigationBarBackgroundColor":"#666666",//导航条背景色
  "navigationBarTitleText":"配置窗口表现",//导航条文字
  "navigationBarTextStyle":"white",//导航条文字颜色
  "backgroundTextStyle":"light",//下拉背景字体或者loading样式
  "backgroundColor":"green",//窗口的背景
  "enablePullDownRefresh":true,//窗口是否可以下拉刷新
}

3.配置标签导航（tabBar）

"tabBar":{
  "selectedColor":"#D53E37",//标签导航选中时文字颜色
  "backgroundColor":"F5F5F5",//标签导航背景色
  "borderStyle":"white",//标签导航上边框颜色(white/black)
  "list":[{
    "pagePath":"pages/cinema/cineam",
    "text":"影院",
    "iconPath":"images/bar/movie-0.jpg",
    "selectedIconPath":"images/bar/movie-1.jpg"
  },{
    "pagePath":"pages/cinema/cineam",
    "text":"我的",
    "iconPath":"images/bar/mine-0.jpg",
    "selectedIconPath":"images/bar/mine-1.jpg"
  }]//导航条列表
 ]
}