微信小程序(一)微信小程序框架分析

微信小程序框架结构介绍

框架全局文件

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

app.js 小程序逻辑文件(必填)

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

属性类型描述触发时机
onLoadFunction监听小程序初始化当小程序初始化完成时,会触发onLoad(全局只触发一次)
onShowFunction监听小程序显示当小程序启动,或从后台进入前台显示,会触发onShow,每次打开页面都会调用一次
onHideFunction监听小程序隐藏当小程序从前台进入后台时触发
onErrorFunction错误监听函数当小程序发生脚本错误,或者API调用失败时,会触发onError并附带错误信息
onPageNotFoundFunction页面不存在监听函数当小程序出现要打开的页面不存在的情况会附带页面信息回调该函数
globalDataString全局数据在其他页面中可以调用全局数据
自定义函数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"
  }]//导航条列表
 ]
}

4.配置网络超时(networkTimeout)
可以配置网络请求,文件上传,文件下载时最大的请求时间,超过这个时间,则不再请求。

app.wxss小程序公共样式表(选填)

全局样式,使用css

工具类文件(utils)

(1)用于存放工具栏的js函数
(2)定义的函数要通过module.exports将定义的函数名称注册进来在其他页面才可以使用。
(3)eg日期格式化的函数,时间格式化的函数

框架页面文件(pages)

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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值