10分钟入门微信小程序开发

小程序开发工具

微信web开发这工具页面

![develop-tool.png]/assets/images/dev-tool.png){:width=”800px”}

小程序项目结构

每个小程序的结构都是由两个主要部分构成：主体部分 + 各个页面

主体部分主要由3个文件构成

app.js：小程序逻辑，初始化APP
app.json ：小程序配置，比如导航、窗口、页面http请求跳转等
app.wxss：公共样式配置

页面由4个文件构成

js：页面逻辑
wxml：页面展示
wxss：页面样式表
json：页面配置，配置一些页面展示的数据

![小程序结构.png]/assets/images/file-structure.png)

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 实例的生命周期

![mina-lifecycle.png]/assets/images/page-circle.png)

开发中常见的需求场景

页面跳转
- 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）