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