组件的生命周期，小程序如何引入第三方ui框架

笔记

组件开发的三要素

• properties //相当于vue中的props接收属性
• triggerEvent//相当于vue中是$emit
• slot//和vue是类似的slot

1.可以通关slot的自定义组件嵌入wxml结构
2.默认一个自定义住家你只能嵌入一个slot，如果嵌入多个slot必须要开启options中的，multipleSlots

列如：
Component({
options:{
multipleSlots:true,//在组件定义时的选项中启用多slot支持
}，
......
})
3.用法：
第一步：在自定义组件内部添加slot
<slot  name="插槽名称"/>

第二步：在引入自定义组件的页面中内嵌wxml

<Dialog>
	<view catchtao="play" slot="brfore"  >嵌入的第一个</view>
	<view slot="after">嵌入的第二个</view>
</Diglog>

• 自定义组件样式隔离问题

  • 默认情况，自定义组件外部的样式不会污染到自定义组件内部的样式
  • 设置样式隔离的方法：

  1.在逐渐的options中开启stylelsolation选项

Component({
options:{
styleIsolation:'isolated',//表示样式隔离，默认隔离
},
})

​ 2.通过外部样式类允许外部的某个类来影响自定义组件

1.在自定义组件js中添加允许某个外部类的自定义属性
Component({
externalClasses:['my-bg']
})
2.在引入页面的子组件上添加外部样式类属性
<Dialog my-bg="bg" ></Diglog>
3.子组件内部添加对应的外部样式类名
<view class="my-bg">XXX</view>

3.组件的生命周期

created：组件创建完成，但不能setData

attached：在住家你实力进入页面节点数时执行

ready：在组件在师徒层布局完成后执行

detached：在逐渐实例被从页面节点数一出时执行

Component({
//组件的生命周期
lifeitMes:{
creaed() {},
attached(){},
},
//组建与页面相关的生命周期
pageLifetimes:{
show:functuon(){
//页面被展示
},
hide:function(){
//页面被隐藏
},
resize:function(size){
//页面尺寸变化
}
}
})

4.Behavior:相当于vue的mixins React中类似于HOC

​ 主要目的是为了复用组件之间相通的方法

5.微信小程序第三官方UI组件

• 小程序如何引入地上UI框架(通常也是基于npm)

第一步：初始化package.json npm init -y

第二步：安装需要的小程序UI框架或者第三方包 npm install weui-miniprogram

第三步：配置小程序支持npm

打开开发者工具–详情–背地设置–勾选【使用npm模块】打开开发者工具–工具–构造npm

第四步：在app.wxss中引入第三方的ui框架样式

第五步：在要引入的页面中添加相关组件并在 页面上直接使用 xxx.json中引入第三方组件路径

注意：具体使用方法包括相关属性事件api

 - vant  ui使用

vant ui (基于微信小程序)

第一步：初始化package.json npm init -y

第二步：安装需要的小程序ui框架或者第三方包npm i vant-weapp -S --production

第三步：配置小程序支持npm

打开开发者工具–详情–本地设置–勾选【使用npm模块】打开开发者工具–工具–构造npm

第四步：在要引入的页面中添加相关组件并在页面上直接使用xxx.json引入第三方组件路径

注意:具体使用方法包括相关属性事件参考api

tabBar右上角abdge

wx.setTabVarBadge({inbdex:2,text:'10})

小程序数据缓存：

1.存储wx.setStorageSync('属性','值')
2.获取wx.getStorageSync('name')
3.删除wx.removeStorageSync('name')
4.删除全部wx.chearStirageSync()

小程序登陆:wx.login({

success:res=>{

code}

})

获取用户信息:wx.getUserlnfo()

1.目标项目：天使童装

2.登陆api工厂后台管理（没有注册）

登陆后台，左侧菜单”工厂设置“–>“数据克隆”–>”讲别人的数据克隆给我“

对方商户ID填写

点击”立即克隆“，然后退出后台重新登陆

3.banner管理系统设置–banner管理

4.小程序设置

微信设置-->小程序设置-->添加appic/secret
注意：appic/secret来自于小程序后台 开发---设置

5.设置专属域名

登陆api后台管理-->点击左侧的'首页'-->基本信息-->专属域名