10分钟入门微信小程序开发
小程序开发工具
微信web开发这工具页面
小程序项目结构
每个小程序的结构都是由两个主要部分构成：主体部分 + 各个页面
主体部分主要由3个文件构成
- app.js：小程序逻辑，初始化APP
- app.json ：小程序配置，比如导航、窗口、页面http请求跳转等
- app.wxss：公共样式配置
页面由4个文件构成
- js：页面逻辑
- wxml：页面展示
- wxss：页面样式表
- json：页面配置，配置一些页面展示的数据
App 生命周期
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
App({
onLaunch: function () {
//App Launch ,生命周期函数--监听小程序初始化
// 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
},
onShow: function () {
// onShow,生命周期函数--监听小程序显示
// 当小程序启动，或从后台进入前台显示，会触发 onShow
},
onHide: function () {
// onHide,生命周期函数--监听小程序隐藏
// 当小程序从前台进入后台，会触发 onHide
}
})Page 生命周期
Page 生命周期函数
Page({
data:{
//页面的初始数据
},
onLoad:function(options){
// 生命周期函数--监听页面加载
// 页面初始化 options为页面跳转所带来的参数
// 一个页面只会调用一次。
},
onReady:function(){
// 生命周期函数--监听页面初次渲染完成
// 页面渲染完成
},
onShow:function(){
// 生命周期函数--监听页面显示
// 页面显示,每次打开页面都会调用一次。
},
onHide:function(){
// 生命周期函数--监听页面隐藏
// 页面隐藏,当navigateTo或底部tab切换时调用。
},
onUnload:function(){
// 生命周期函数--监听页面卸载
// 页面关闭,当redirectTo或navigateBack的时候调用。
}
})Page 实例的生命周期
开发中常见的需求场景
-
页面跳转
- wx.redirectTo
- wx.navigateTo
- wx.switchTab
- wx.reLaunch
- wx.navigateBack
-
网络请求(wx.request)
-
数据存储
- wx.setStorage/wx.getStorage
- wx.setStorageSync/wx.setStorageSync
- wx.removeStorage/wx.removeStorageSync
-
绑定事件（bindtap）