自定义组件
定义组件
在.json中
"component":true,
在页面中使用组件
- 页面的.json
"usingComponents": {
"组件名称":"组件地址"
}
- 在页面中使用
<组件名称></组件名称>
<item></item>
组件参数传递
父传子
- <item title="xxxx">
- 组件的js
properties: {
title:{type:"string",value:''},
},
- 在组件内部使用
{{title}}
子传父
- 在组件js
triggerEvent("事件名",事件参数) - 在page页面里面监听
<item bind事件="响应函数">
<item bindclick="clickHd">
组件的css
- 组件和页面的css默认是隔离
- 隔离方式配置
// styleIsolation:"apply-shared"
// 组件样式隔离的方式 isolated 表示启用样式隔离
// apply-shared 表示页面 wxss 样式将影响到自定义组件
// shared 表示页面 wxss 样式将影响到自定义组件
- 自定义class
1.组件的js定义
externalClasses: ['item-class'],
2.组件的wxml调用
<view class="item-class">
3.页面中填入class
<item item-class="myitem" >
4.在页面wxss中书写规则
.myitem{ color:red}
组件的插槽
单个插槽
- 页面中编写插槽
<item> <text>插槽内容</text> </item> - 组件内部wxrml调用
<item class="item item-lass">
<slot></slot>
</item>
多个插槽
- 组件内部去定义.
options:{
multipleSlots:true
}
- 页面中编写插槽
<item><icon type=" info" slot="icon"></icon> </item> - 组件内部调用插槽内容
组件的生命周期
lifetimes:
created //被创建
attached //组件实例进入页面节点
ready //组件视图渲染完毕
moved //组件被移动
detached //组件从页面中移除
error //组件被移除
组件内可使用的页面生命周期
pageLifetimes
show
hide
resize(size) //尺寸
分包
why
- 提高小程序的加载速度
主包做的很小，
其他的代码，预加载，分包加载的方式 - 让小程序的代码超出2M
通过把小程序的代码包拆分多个每个2M最多12M (18M)
1.把小程序氛围多个包，先下载主包，有空闲再去下载分包
- tab对应的页面应该是主包
- 其他页面可以是分包
步骤
- 做的时候就要考虑分包，不要做好了再分包
- 文件夹就是分包的名称
- 配置分包
"subpackages":[
{
"root": "yidian",
"pages":[
"pages/yidian/yidian",
" pages/article/article'
]
}
]
- 修改路径
预加载
当进入指定的页面，默认下载分包
"preloadRule": {
"pages/index/index": {
"network": "all",
"packages": ["yidian"]
},
"pages/jok/jok": {
"packages": ["base"]
}
},
//当进入首页 去加载yidian这个分包
// 当进入joy笑话 去预加载base分包
npm安装插件
- 右上角详情>使用npm模板.
- 进入cmd
进入项目文件
npm init初始化项目 - npm i @vant/weapp -S -production
- 菜单-》工具-》构建npm
- 可以在页面的json配置中引用
"usingComponents": {
"van-button":" @vant/weapp/button'
}
- 在页面wxml里面使用
<van-button type="primary">按钮</van-button>
小程序的登录流程
小程序端-服务器端-微信服务器端
- 小程序wx.login可以获取到- -个code发送给服务器端
- 服务端通过code +appid+appsecret发给微信服务端换取sessionkey和openid (用户的唯一-id)
- 服务端把openid和sessionkey返回给小程序存储
- openid sessionid可以作为我们向服务器发送业务请求的一个凭证
用户头像信息获取
wx.get5etting(Object object)
获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
wx.getUserInfo
可以获取到用户的信息
用户头像，名称，性别，
- 每次获取的时候，需要用户主动授权(这样，不希望，用一次，就要授权一次
- 我们会把用的信息发送给服务器，关联openid存取起来
(我们拿到openid就可以从服务器获取不需要授权)
