小程序组件用法

组件

新建Comment文件夹，里面建item文件夹
右键item->page文件
item文件夹 ==> index组件
page ==> user文件

引用

 //xxx.json
 "usingComponents": {
    "item":"/components/item/index"
  }

调用

<item></item>   

插槽

默认插槽

<item>
   <text>嵌套内容</text>
</item>

index.js

组件的js的options定义
 options: {
    multipleSlots: true, //开启多个插槽
  }

具名插槽
user.wxml

//传入
<text slot="pre">$</solt>
<text slot="next">美元</solt>

index.wxml

//接收
<slot name="pre"></slot>
<slot name="next"></slot>

样式

组件的样式 默认是相互隔离
index.js

//配置样式隔离
options: {
    multipleSlots: true, //开启多个插槽
    styleIsolation: "isolated",
    //isolated隔离，apply-shared子可以用父,shared相互影响
  }

外部类组件
index.js

//js定义
externalClasses:["item-class"]

index.wxml

class="item item-class"

参数

user.wxml

//传递（参数只读）
<item title="标题"></item>

index.js

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

index.wxml

//使用
{{item}}

事件传递

index.js

//子元素发送事件
 this.triggerEvent("事件名称","事件对象")

user.wxml

//父元素监听
<item bind:事件名="处理函数"></item>

index.js

function 处理函数(e){
  //e就是事件对象
}

生命周期-lifetimes

index.js

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

页面生命周期-pageLifetimes

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

第三方组件

npm使用
1.在项目中npm i init -y 创建packe.json
2.工具栏点击详情，本地设置，勾选npm模块
3.工具栏点击工具，构建npm

weapp使用
安装
npm i @vant/weapp -S --production
配置
user.json

"usingComponents": {
    "van-button": "@vant/weapp/button/index"
}

user.wxml

<van-button type="default">默认按钮</van-button>

分包

为什么需要分包?

1. 小程序是动态加载（没有安装）主包源代码限制2M,通过分包可以上传16M的内容（现代大型小程序项目）分包是很有必要的
2. 即使小程序主包只有2M，下载打开小程序是比较慢主包只有一个页面，切换其他页面，加载分包内容（优化主页加载速度）

app.json

"subpackages": [
    {
      "root": "sub",
      "pages": [      
        "pages/vant/vant"  
       ]
    }]

分包预加载

当进入到某个特定的页面时候，提前加载分包资源

配置

 "preloadRule": {
      "pages/user/user": {
        "network": "all",
        "packages": ["sub"]
      }
 },

当进入到pages/user/user页面时候并且网络有空闲，那么网络预加载会加载分包sub