组件参数传递
父传子
<item title="xxxx">
组件的js
properties:{title:{type:"string",value:''},},
在组件内部使用
{{title}}
子传父
在组件js
triggerEvent("事件名",事件参数)
在page页面里面监听
<itembind事件="响应函数"><itembindclick="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调用
<itemclass="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) //尺寸
分包
提高小程序的加载速度
主包做的很小，
其他的代码，预加载，分包加载的方式
让小程序的代码超出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存取起来
