微信小程序--1.组件

1.组件的使用

2.插槽

3.样式

1. 各组件样式互不干扰
   配置样式隔离

  options: {
    styleIsolation: "isolated",
    //isolated隔离，apply-shared子可以用父,shared相互影响
  },

2. 外部类
   组件

   页面

4.参数

1. 传递（参数只读）
   <item title="标题">
2. 获取

properties: {
    "title": {
      type: String,//数据类型
      value: ''//默认值
    },
    }
    

3. 使用
   {{title}}

5.事件传递

1. 子元素发送事件
   this.triggerEvent("事件名称",{时间对象})
2. 父元素监听
   <item bind:时间名="处理函数">
3. 处理函数
   function 处理函数(e){ //e就是事件对象 }

6.Component

1. 外部类
   externalClasses:["item-class"],

2. 传入的参数（只读）
   properties: { "title": { type: String, value: '' wxml模板中使用 class="item item-class" } },

3. 选项
   options: { multipleSlots: true, //开启多个插槽 styleIsolation: "isolated", 样式隔离 },

4. 数据：data

5. 组件的方法：methods

6. 生命周期：pageLifetimes

7.生命周期

1. lifetimes 生命周期

    lifetimes:{
    created(){
     console.log("创建完毕，有this 不能setData")
   },
    attached(){console.log("挂载，可以设置data");
    },
    ready(){console.log("组件挂载完毕");
    },
    move(){console.log("组件移动");
     },
   detached(){console.log("销毁");
    },
   error(){console.log("组件发生错误");
    }
   },
   

2. pageLifetimes 页面生命周期

   pageLifetimes:{
   	show(){console.log("页面显示")
     },
     hide(){console.log("页面隐藏");
     },
     resize(){console.log("视图变化");
     }
   },
   

7.第三方组件

1. npm使用

1. 在项目中 npm init -y 创建packge.json
2. 详情，本地设置，使用npm模块
3. 工具，构建npm

2.weapp使用

1. 安装
   npm i @vant/weapp -S--production
2. 配置
   { "usingComponents": { "van-button":"@vant/weapp/button/index" }}
3. 使用
   <van-button type="default">默认按钮</van-button>

8. 分包

为什么需要分包？

1. 小程序是动态加载（没有安装），主包源代码限制2M，通过分包可以上传16M的内容（大型小程序项目）分包是很有必要的
2. 即使小程序主包只有2M，下载打开小程序是比较慢的，主包只有一个页面，切换其他页加载分包内容（优化主页加载速度）
3. 只有用户进入到分包页面，才会加载分包页面（按需加载）
   
4. 分包预加载
5. 哪些做主包，哪些做分包
   底部栏页面做主包，二级页面做分包