微信小程序开发笔记1

tabBar 

"tabBar": {
    "color": "#c0c0c0",
    "selectedColor": "#000000",
    "backgroundColor": "#f0f0f0",

    "borderStyle": "black", 
    "position":"bottom",
    "list": [
      {
      "pagePath":"pages/index/index",
      "text": "text",
      "iconPath": "assets/Book.png",
      "selectedIconPath": "assets/Brush.png"
       },
      {
          "pagePath": "pages/index/index",
          "text": "text",
          "iconPath": "assets/Bill.png",
          "selectedIconPath": "assets/Billpaid.png"
      }
    ]
  },

---

逻辑与页面分离的结构

由JavaScript完成处理生命周期事件业务数据供给界面事件处理

页面结构（WXML）    页面样式（WXSS）  展示逻辑层的数据   接受用户输入

逻辑层的JavaScript     

---

应用的生命周期——App.js文件

​​//用于去创建一个应用实例对象
App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  //在整个应用启动时触发
  //只会触发一次
  onLaunch: function () {
    console.log('应用启动啦')
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  //应用程序显示到屏幕上
  //每次成为焦点状态都会触发
  onShow: function (options) {
    console.log('应用前台显示了')
    console.log(options)
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log('隐藏到后台')
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  // onError 只能捕获到运行阶段的异常
  onError: function (msg) {
    console.log('123')
  },
  //每一个JS 都有单独的作用域

  //全局共享对象
  //除了生命周期里面约定 钩子函数，还可以定义任何成员
  //定义在这里的成员可以在后续每一个页面中共享
  foo:'bar',
  say(){
    console.log("hello")
  }
})

index.js

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
     

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
     const app = getApp(); //获取全局唯一的应用程序实例对象
     console.log(app.foo);
     app.say();
      
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

---

页面的生命周期

index.js

//创建一个页面实例对象
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  //页面加载
  //这个页面即将要工作啦
  //适合去做数据的初始化
  onLoad: function (options) {
    //this.data.foo='hello world'    不能通过赋值的方式去，而是通过下面的方式去
    this.setData({foo:'hello world'})
    console.log('index on load')
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  //当页面准备好啦，页面渲染完成
  //ready 是在show之后
  onReady: function () {
    //只有页面加载完成，才可以设置标题
    wx.setNavigationBarTitle({
      title:'index'
    })
    console.log('index ready')
  },

  /**
   * 生命周期函数--监听页面显示
   */
  //页面进入焦点状态(前台显示)
  onShow: function () {
    console.log('index on show')
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  //
  onHide: function () {
    console.log('index on hide')
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  //页面卸载
  //当页面被销毁
   //可以用于在页面卸载之前，保存之前的页面状态
  onUnload: function () {
    console.log('index on unload')
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

page1.js

// pages/page1/page1.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('page1 on load')
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */

  onReady: function () {
      //只有页面加载完成，才可以设置标题
      wx.setNavigationBarTitle({
        title: 'page1',
      })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('page1 on show')
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('page1 on hide')
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
   
    console.log('page1 on unload')
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})