一、小程序的启动
在app.json的pages中可以看到小程序的所有页面路径,写在pages字段第一个页面就是这个小程序的首页
微信客户端将首页代码装载然后通过小程序底层的一些机制,就可以渲染这个页面
然后我们看看小程序启动后执行的函数吧!
程序被执行会执行生命周期函数,这跟其它客户端程序一样。
小程序的生命周期函数是在app.js中onLaunch中
App({
onLaunch: function () {// 小程序启动之后 触发
}
//小程序显示的时候触发
onShow:function(){
console.log("生命周期函数-坚挺小程序显示的时候触发");
},
//小程序隐藏的时候触发
onHide:function(){
console.log("生命周期函数-坚挺小程序隐藏的时候触发");
},
//全局的属性
globalData: {
userInfo: null
}
})
二、程序与页面
我们可以看到一般一个文件夹下会有四种文件,客户端会先根据.json配置生成一个界面,顶部颜色和文字可以在json文件定义好。紧接着会装载页面的wxml结构和wxss样式。最后装在.js,js大体是这样的
//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.'
}, function() {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})
Page是页面构造器,这个构造器就生成了一个页面。生成页面的时候会把data数据和wxml一起渲染出最终的结构,渲染结束后页面会受到onLoad回调,我们可以在回调中处理自己的逻辑。
三、组件
组件对应程序开发的各种控件,不过小程序控件进行了一定的整合。
组件列表:(七大类)
视图容器有view、scroll-view 、swiper(视图容器、可滚动视图容器、滑块视图容器)
基本内容:
icon(图标)text(文字)progress(进度条)
表单:
button(按钮)form(表单)input(输入框)。。。
……
好,接下来,开始小程序之旅!!!