小程序基础知识

分包

把一个完整的小程序项目，按照需求划分为不同的子包，最终打包成不同的分包，用户在使用时按需进行加载

好处：

优化小程序首次启动的下载时间

分包后项目构成

分包后小程序由1个主包和多个分包组成

• 主包：一般只包含项目的启动页面或Tabbar页面

• 分包：只包含和当前分包有关的页面和资源

分包体积限制

• 整个小程序所有包大小不超过16M（主包+分包）

• 单个分包/主包大小不能超过2M

app.json中声明分包的结构

//声明分包的结构
"subPackages": [
    {
       "root":"packageA",   //第一个分包的根目录
       "pages": [   //分包下所有页面的存放路径
         "pages/detail/detail"
       ]
    },
    {
      "root":"packageB",
      "pages": [
        "pages/goods/goods"
      ]
   }
  ],

封装网络请求

• utils/request.js

  /* 
  options={
    url,method,data,success
  }
  
  */
  
  function request(options){
    wx.showLoading({
      title: '数据加载中',
    })
    wx.request({
      url: options.url, //仅为示例，并非真实的接口地址
      data: options.data,
      method:options.method,
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        // console.log(res.data)
        options.success(res.data)
      },
      complete:()=>{
        wx.hideLoading()
      }
    })
  }
  
  module.exports={
    request
  }

  页面中使用引入即可

  const {request}=require('../../utils/request')

  生命周期

  应用生命周期

  小程序从启动---运行---销毁的整个过程

  app.JS中声明

  App({
    // 小程序初始化完成执行，全局只触发一次，可以做一些初始化工作
    onLaunch() {
    },
    // 小程序启动，从后台进入到前台显示时的函数
    onShow(){
  
    },
    onHide(){
      // 小程序启动，从前台进入到后台显示时的函数
    },
  })

  页面生命周期

  小程序页面从加载-----渲染----销毁的过程

  页面生命周期范围小，应用生命周期范围大

  页面的js文件

   Page({
        /**
     * 生命周期函数--监听页面加载   一个页面只调用一次
     */
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成  一个页面只调用一次
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() { },
    /** 
     * 生命周期函数--监听页面卸载  一个页面只调用一次
     */
    onUnload() {},
   })

  lifetimes节点

• Component({
    lifetimes: {
      attached: function() {
        // 在组件实例进入页面节点树时执行
      },
      detached: function() {
        // 在组件实例被从页面节点树移除时执行
      },
    },
    // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
    // ...
  })

  组件所在页面的生命周期

  自定义组件的行为依赖于页面状态的变化，就需要用到组件所在页面的生命周期

  每当触发页面的show生命周期函数的时候，我们希望能够重新生成一个随机的RGB颜色值

  生命周期函数	参数	描述
  show	无	组件所在页面被展示时执行
  hide	无	组件所在页面被隐藏时执行
  resize	Object Size	组件所在页面尺寸变化时执行

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

 页面展示的时候，重新生成一个随机的RGB颜色值

Component({
 pageLifetimes:{
    show(){
      this._randomColor()
    }
  },
  methods:{
    _randomColor(){
      this.setData({
        _rgb:{
          r:Math.floor(Math.random()*256),
          g:Math.floor(Math.random()*256),
          b:Math.floor(Math.random()*256)
        }
      })
    }
  }
})

• 纯数据字段

  不用于界面渲染的 data 字段

  某些 data 中的字段（包括 setData 设置的字段）既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。可以指定这样的数据字段为“纯数据字段”

  纯数据字段 有助于提升页面更新性能

  在 Component 构造器的 options 定义段中指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。

  Component({
    options:{
      pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
    },
    data: {
      // 将rgb改为以_开头的纯数据字段
      _rgb:{
        r:0,
        g:0,
        b:0,
      },
      fullColor:'0,0,0'
    },
  }）