小程序简要

微信小程序

https://mp.weixin.qq.com/

小程序代码构成

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件，相当于是 HTML
3. .wxss 后缀的 WXSS 样式文件，相当于是 CSS
4. .js 后缀的 JS 脚本逻辑文件

全局配置文件：app.json

• pages: 数组，描述当前小程序所有页面路径，写在 pages 字段的第一个页面就是这个小程序的首页
• window: 全局的默认窗口表现，小程序所有页面的顶部背景颜色，文字颜色定义等
• tabBar: 底部 tab 栏

页面配置文件：*.json

• 会将全局 window 配置中的相同项覆盖掉

WXML、WXSS：相当于是 HTML＋ CSS，但是功能比 HTML+CSS 更强大，WXSS 中新增 rpx 单位支持

js 是逻辑代码

宿主环境

渲染层：WXML、WXSS

逻辑层：JS

小程序注册：

应用注册

在 app.js 文件中实现应用注册，调用 App() 方法实现应用注册

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log('launch........')
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log('show..........')
  },

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

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    console.log('error........')
  },
    
  globalData: { // 可以保存全局共享的状态数据
      
  }
})

注意：整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数

页面注册

在各页面的 page.js 文件中，调用 Page() 方法实现页面注册

Page({

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

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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('ready...........')
  },

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

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

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

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

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

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

模块化

使用 module.exports 导出模块，使用 require 引入模块