小程序组件化

组件化使用
新建
右键 新建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.打开支付界面，返回支付结果