微信小程序的组件及分包

自定义组件

定义组件

• 页面的.json

"component":true,

在页面中使用组件

• 1. 页面的json

"usingComponents":{
"组件的名称":"组件的地址"
}

• 2.在页面中使用

<组件的名称></组件的名称>
<item></item>

组件的参数传递

• 父传子

• 1.<item title="xxx"></item>

• 2. 组件的js

properties:{
title:{type:"string",value:""}
}

• 3.在组件内部使用
  {{title}}

• 子传父

• 1. 在组件的js文件

triggerEvent("事件名",事件参数)

• 2. 在page页面监听

<item bind事件="响应函数"></item>
<item bindclick="clickHd">

• 3. 在page.js里获取数据

clickHd(e){
e.detail 事件参数
}

组件的css

• 1. 在组件和页面的css默认是隔离
• 2. 隔离方式配置

stylesolation:"apply-shared"
// isolated 表示启用样式隔离，
// apply-shared 表示页面 wxss 样式将影响到自定义组件，
// shared 表示页面 wxss 样式将影响到自定义组件

• 3. 自定义class

1). 组件的js定义

externalClasses:["item-class"]

• 2). 组件的xwml调用

<view class="item-class"></view>

• 3). 页面中填入class

<item item-class="myitem"></item>

• 4). 在页面中wxss中书写规则

.myitem{color:red}

组件的插槽

• 单个插槽

• 1. 页面中编写插槽

<item><text>插槽内容</text></item>

• 2. 组件内部wxml调用

<view class="item item-class">
<slot></slot>
</view>

• 多个插槽 (命名插槽)

• 1. 组件内部去定义

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

• 2. 页面中编写插槽

<item><icon type="info" slot="icon"></icon></item>

• 3. 组件内部调用插槽内容

<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

组件的生命周期

created 被创建
attached 组件实例进入页面节点
ready 组件视图渲染完毕
moved 组件被移动
detached 组件从页面中移除
error 组件被移除

组件内可使用的页面生命周期

• pageLifetimes
• show
• hide
• resize(size) 尺寸

分包

why

• 1. 提高小程序的加载速度
     主包做的很大,
     其他的代码,预加载,分包加载的方式
• 2. 让小程序的代码超出2M
     通过把小程序的代码包拆分分多少 每个2M 最多12M(18M)

1.把小程序分为多个包,先下载主包，有空闲再去下载分包

分包原则

• 1. tab对应的页面应该是主包
• 2. 其他页面可以分包

步骤

• 1. 做的时候就要考虑分包，不要做好了再分包
• 1. 文件夹就是分包的名称
• 2. 配置分包

"subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }
  ]
}

• 3. 修改路径

预加载

"preloadRule":{
"pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
}
//当进入到首页 去加载yidian这个分包
//当进入到jok 去加载base这个分包

npm安装插件

1. 右上角 详情>使用npm模板

2. 进入cmd

进入项目文件

npm init 初始化项目

3.

npm i @vant/weapp -S --production

4. 菜单-->工具-->构建npm

5. 在页面的json配置中引用

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

6. 在页面wxml里面使用

<van-button type="primary">按钮</van-button>

小程序的登录流程

• a. 小程序端-服务器端-微信服务器端

• 1. 小程序wx.login 可以获取到一个code 发送给服务器端
• 2. 服务端通过code+appid+appsecret发给微信服务端 换取sessionkey 和 openid(用户唯一的id)
• 3. 服务端把openid和sessionkey返回给小程序 存储
• 4. openid session可以作为我们向服务器发送业务请求的一个凭据

用户头像信息

wx.getSetting(Object object)

获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限

wx.getUserInfo(Object object)

获取用户信息

• 用户头像,名称,性别
• 1. 每次获取的时候,需要用户主动授权
     (不希望用一次，授权一次)
• 2. 我们会把用的信息发送给服务器,关联openid存储起来(我们拿到openid就可以从服务器获取，不需要授权)