小程序2

自定义组件

定义组件

在.json中
"component":true,

在页面中使用组件

1. 页面的.json

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

2. 在页面中使用

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

组件参数传递

父传子

1. <item title="xxxx">
2. 组件的js

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

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

子传父

1. 在组件js
   triggerEvent("事件名",事件参数)
2. 在page页面里面监听

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

组件的css

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

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

3. 自定义class
   1.组件的js定义
   externalClasses: ['item-class'],
   2.组件的wxml调用
   <view class="item-class">
   3.页面中填入class
   <item item-class="myitem" >
   4.在页面wxss中书写规则
   .myitem{ color:red}

组件的插槽

单个插槽

1. 页面中编写插槽
   <item> <text>插槽内容</text> </item>
2. 组件内部wxrml调用

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

多个插槽

1. 组件内部去定义.

options:{
  multipleSlots:true
}

2. 页面中编写插槽
   <item><icon type=" info" slot="icon"></icon> </item>
3. 组件内部调用插槽内容

组件的生命周期

lifetimes:

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

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

pageLifetimes
show
hide
resize(size) //尺寸

分包

why

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

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

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

步骤

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

"subpackages":[
   {
      "root": "yidian",
      "pages":[
        "pages/yidian/yidian",
        " pages/article/article'
      ]
  }
]

3. 修改路径

预加载

当进入指定的页面，默认下载分包

"preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["yidian"]
    },
    "pages/jok/jok": {
      "packages": ["base"]
    }
    
},
//当进入首页 去加载yidian这个分包
// 当进入joy笑话 去预加载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>

小程序的登录流程

小程序端-服务器端-微信服务器端

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

用户头像信息获取

wx.get5etting(Object object)
获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
wx.getUserInfo
可以获取到用户的信息
用户头像，名称，性别，

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