美文网首页微信小程序
微信小程序的组件及分包

微信小程序的组件及分包

作者: 南崽 | 来源:发表于2020-05-10 23:31 被阅读0次

自定义组件

定义组件

  • 页面的.json
"component":true,

在页面中使用组件

    1. 页面的json
"usingComponents":{
"组件的名称":"组件的地址"
}
  • 2.在页面中使用
<组件的名称></组件的名称>
<item></item>

组件的参数传递

  • 父传子

  • 1.<item title="xxx"></item>

    1. 组件的js
properties:{
title:{type:"string",value:""}
}
  • 3.在组件内部使用
    {{title}}

  • 子传父

    1. 在组件的js文件
triggerEvent("事件名",事件参数)
    1. 在page页面监听
<item bind事件="响应函数"></item>
<item bindclick="clickHd">
    1. 在page.js里获取数据
clickHd(e){
e.detail 事件参数
}

组件的css

    1. 在组件和页面的css默认是隔离
    1. 隔离方式配置
stylesolation:"apply-shared"
// isolated 表示启用样式隔离,
// apply-shared 表示页面 wxss 样式将影响到自定义组件,
// shared 表示页面 wxss 样式将影响到自定义组件
    1. 自定义class

1). 组件的js定义

externalClasses:["item-class"]
  • 2). 组件的xwml调用
<view class="item-class"></view>
  • 3). 页面中填入class
<item item-class="myitem"></item>
  • 4). 在页面中wxss中书写规则
.myitem{color:red}

组件的插槽

  • 单个插槽

    1. 页面中编写插槽
<item><text>插槽内容</text></item>
    1. 组件内部wxml调用
<view class="item item-class">
<slot></slot>
</view>
  • 多个插槽 (命名插槽)

    1. 组件内部去定义
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})
    1. 页面中编写插槽
<item><icon type="info" slot="icon"></icon></item>
    1. 组件内部调用插槽内容
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

组件的生命周期

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

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

  • pageLifetimes
  • show
  • hide
  • resize(size) 尺寸

分包

why

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

1.把小程序分为多个包,先下载主包,有空闲再去下载分包

分包原则

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

步骤

    1. 做的时候就要考虑分包,不要做好了再分包
    1. 文件夹就是分包的名称
    1. 配置分包
"subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }
  ]
}
    1. 修改路径

预加载

"preloadRule":{
"pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
}
//当进入到首页 去加载yidian这个分包
//当进入到jok 去加载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>

小程序的登录流程

  • a. 小程序端-服务器端-微信服务器端

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

用户头像信息

wx.getSetting(Object object)

获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限

wx.getUserInfo(Object object)

获取用户信息

  • 用户头像,名称,性别
    1. 每次获取的时候,需要用户主动授权
      (不希望用一次,授权一次)
    1. 我们会把用的信息发送给服务器,关联openid存储起来(我们拿到openid就可以从服务器获取,不需要授权)

相关文章

  • 微信小程序性能优化实践

    历史回顾: 微信小程序自定义组件 - 表格组件来啦 通过微信小程序来实现 “钉钉打卡” 记一次微信小程序项目分包,...

  • 微信小程序的组件及分包

    自定义组件 定义组件 页面的.json 在页面中使用组件 页面的json 2.在页面中使用 组件的参数传递 父传子...

  • 2019-06小程序升级简要

    微信小程序分包加载 包的限时 整个小程序所有分包大小不超过 8M 单个分包/主包大小不能超过 2M 分包规则(普通...

  • 小程序好文集合

    组件篇 微信小程序:组件实践 整体梳理 微信小程序开发深入解读

  • 微信小程序:分包报错

    微信提供了分包加载目前小程序分包大小有以下限制: 整个小程序所有分包大小不超过 8M 单个分包/主包大小不能超过 ...

  • 微信小程序日历组件开发

    # 微信小程序日历组件开发 微信小程序基础知识 微信小程序 框架介绍 组件文档 上述是开发小程序的基本知识。 今天...

  • 微信小程序-canvas压缩图片使用入门

    微信小程序canvas组件官方文档 微信小程序canvas组件官方文档canvas API canvas组件介绍 ...

  • 微信小程序分包加载设置

    设置分包加载 微信小程序分包限制为: 主包或者单个分包最大为2M 整体小程序所有包最大为8M 为什么需要设置分包?...

  • 微信小程序基础

    微信小程序介绍微信小程序开发工具的使用微信小程序框架文件微信小程序逻辑层微信小程序视图层微信小程序组件介绍微信小程...

  • 微信小程序分包

    2020-03-10 周二 阴 简述什么是分包、为什么要分包以及分包的优缺点,罗列分包相关规则和大坑 背景 微信客...

网友评论

    本文标题:微信小程序的组件及分包

    本文链接:https://www.haomeiwen.com/subject/wajenhtx.html