微信小程序组件化

组件化使用

新建
右键  新建Component
引用
xxx.json
 "usingComponents": {
    "item":"/components/item/item"
  }

使用
<item></item>

插槽

默认插槽

<item>
    <text>嵌套内容</text>
</item>
    组件内部
<slot></slot>

具名插槽

组件的js的options定义
  options: {
    multipleslots: true, //开启多个插槽
    styleIsolation: "isolatedr", //isolated隔离
  },
传入
<text slot="pre">$</text>
<text slot="next">美元</text>
接收
<slot name="pre"></slot>
<slot name="next"></slot>

样式

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

配置样式格式

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

外部类 

组件

js定义
 externalClasses:["item-class"],
wxml模板中使用
<item title="外部类"  item-class="myclass" ></item>

 参数

 传递（参数是只读）

<item title="标题"></item>

获取

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

使用

{{title}}

事件传递

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

 Component

 externalClasses:["item-class"],  
外部类
properties
传入的参数(只读)
	  "title": {
      type: String,
      value: ''
    },
options
选项
	 multipleslots: true, //开启多个插槽
	 styleIsolation: "isolatedr", //isolated 样式隔离
data
数据
methods
组件的方法
lifetimes
生命周期
pageLifetimes
页面声明周期

生命周期 

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

pageLifetimes 

   页面生命周期

show(){}     页面显示
hide(){}      页面隐藏
resize(){}    视图变化

第三方组件

npm使用 

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

 weapp使用

安装
npm i @vant/weapp -S --production
配置
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
使用
<van-button type="danger">危险按钮</van-button>

分包

为什么要分包？ 

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

 只有用户进入到分包页面
/sub/pages/vant/vant
小程序才会加载sub文件夹的内容
(小程序资源的按需加载)

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

 分包预加载

 1.分包，只有进入页面才开始加载
（如果分包比较大，进入页面等待时间就会比较长）
2.进入到某个特定的页面时候，提前加载分包资源

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

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

那些做主包，那些分包 

1.底部栏会有几个页面（主包）

2.二级页面页面
作为不同的分包

登录流程 

1.获取用户的头像和昵称信息（可选）
2.通过wx.login() 获取code
3.把code和用户信息（可选）发送给后端
4.后端通过code+appid+AppSecret向微信的服务器换取openid
5.openid就是用户的唯一标识符（判断用户的权限信息)再返回给第3步前端

 支付流程

1.用户下单
2.订单信息，把code发送给服务器
3.wx.requestPayment(后端返回u的5个参数和一指纹)
4.打开支付界面，返回支付结果