一、微信小程序的相关文件类型
微信小程序项目结构主要有四个文件类型
1、WXML是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件。
2、WXSS是一套样式语言,用于描述 WXML 的组件样式,
3、js 逻辑处理,网络请求
4、json 小程序设置,如页面注册,页面标题及tabBar。
在目录中还有
app.json这个文件必须有,如果没有这个文件,项目无法运行。因为微信框架把这个作为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window背景色,配置导航条样式,配置默认标题。
app.js也必须要有,没有会报错,可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
二、逻辑层(App Service)
小程序开发框架的逻辑层是由JavaScript编写。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
用 App 和 Page 方法,进行程序和页面的注册。
用 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
JavaScript 在 web 中一些能力都无法使用,如 document,window 等。
三、相关处理代码
1、注册程序处理代码
App({
onLaunch: function(options) {
// Do something initial when launch.
},
onShow: function(options) {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
2、注册页面处理代码
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})