自定义组件、使用npm包、全局数据共享、分包

已于 2022-06-29 20:49:09 修改
阅读量853 收藏 1
点赞数
分类专栏： 小程序开发 文章标签： npm 前端 javascript 微信小程序
于 2022-06-28 21:10:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51195865/article/details/125508310
版权

自定义组件

组件的创建与引用

1.创建组件

①在项目的根目录中，鼠标右键，创建components->test文件夹
②在新建的components->test文件夹上，鼠标右键，点击“新建Component”
③键入组件的名称之后回车，会自动生成组件对应的四个文件，后缀名分别为.js,.json,.wxml和.wxss

2.局部引用

组件的引用方式分为“局部引用”和“全局引用”，顾名思义：
①局部引用：组件只能在当前被引用的页面内使用
②全局引用：组件可以在每个小程序页面使用

3.局部引用组件

在这里插入图片描述

4.全局引用组件

在这里插入图片描述

5.全局引用 VS局部引用

根据组件的使用频率和范围，来选择合适的引用方式：
①如果某组件在多个页面中经常被用到，建议进行“全局引用”
②如果某个组件只在特定的页面中被用到，建议进行“局部引用”

6.组件和页面的区别

在这里插入图片描述

自定义组件-样式

1.组件样式隔离

在这里插入图片描述

2.组件样式隔离的注意点

在这里插入图片描述

3.修改组件的样式隔离选项

在这里插入图片描述

4.stylelsolation的可选值

在这里插入图片描述

自定义组件-数据、方法和属性

1.data数据

在这里插入图片描述

2.methods方法

在这里插入图片描述
wx.showToast()弹窗，类似于alert()

3.properties属性

在这里插入图片描述

4.data和properties的区别

在这里插入图片描述

5.使用setData修改properties的值

在这里插入图片描述

自定义组件-数据监听器

1.什么是数据监听器

在这里插入图片描述

2.数据监听器的基本用法

在这里插入图片描述
在这里插入图片描述

3.监听对象属性的变化

在这里插入图片描述

自定义组件-纯数据字段

1.什么是纯数据字段

在这里插入图片描述

2.使用规则

在这里插入图片描述
快速修改一样的代码 选中变量，crtl+D

自定义组件-组件的生命周期

1.组件的全部生命周期函数

在这里插入图片描述

2.组件主要的生命周期函数

在这里插入图片描述

3.lifetimes节点

在这里插入图片描述

自定义组件-组件所在页面的生命周期

1.什么是组件所在页面的声明周期

在这里插入图片描述

2.pageLifetimes节点

在这里插入图片描述

3.随机初始化组件展示内容

在这里插入图片描述
在组件所在页面被展示时就调用
在这里插入图片描述

自定义组件-插槽

1.什么是插槽

在这里插入图片描述

2.单个插槽

在这里插入图片描述

3.启用多个插槽

在这里插入图片描述

4.定义多个插槽

在这里插入图片描述

自定义组件-父子组件之间的通信

1.父子组件之间通信的3种方式

在这里插入图片描述

2.属性绑定

在这里插入图片描述
在这里插入图片描述

3.事件绑定

在这里插入图片描述
事假绑定步骤
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.获取组件实例

在这里插入图片描述

自定义组件-behaviors

1.什么是behaviors

在这里插入图片描述

2.behaviors的工作方式

每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用他时，它的属性、数据和方法会被合并到组件中
每个组件可以引用多个behavior,behavior也可以引用其他behavior.

3.创建behavior

在这里插入图片描述
在这里插入图片描述

4.导入并使用behavior

在这里插入图片描述

5.behavior中所有可用的节点

在这里插入图片描述

6.同名字段的覆盖和组合规则

在这里插入图片描述

使用npm包

小程序对npm的支持与限制

在这里插入图片描述

使用npm包-Vant Weapp

1.什么是Vant Weapp

Vant Weapp是有赞前端团队开源的一套小程序UI组件库，助力开发者快速搭建小程序应用。它所使用到是MIT开源许可协议，对商业
使用比较友好

2.安装Vant组件库

在小程序项目中，安装Vant组件库主要分为如下三步：
①通过npm安装
②构建npm包
③修改app.son
先查看项目中有没有package.json包管理配置文件，
配置命令

npm inint -y
3.使用vant组件

在这里插入图片描述

4.定制全局主题样式

在这里插入图片描述
在这里插入图片描述
CSS自定义变量也是有作用于的，全局html{定义CSS自定义变量}，微信小程序的根节点为page,page{//设置CSS自定义变量}
在这里插入图片描述

5.定制全局主题样式

在这里插入图片描述
在这里插入图片描述

使用npm包-API Promise化

1.基于回调函数的异步API的缺点

在这里插入图片描述
缺点：容易造成回调地狱的问题，代码的可读性、维护性差

2.什么是API Promise化

在这里插入图片描述

3.实现API Promise化

在这里插入图片描述

npm i --save miniprogram-api-promise

小程序无法直接使用node_modulese里面的包，通过构建npm会生成miniprogram_npm来使用刚下好的包，每次构建之前建议删除miniprogram_npm文件夹以免报错

4.调用Promise化之后的异步API

在这里插入图片描述

全局数据共享

1.什么是数据共享

在这里插入图片描述

2.小程序中的全局数据共享方案

在这里插入图片描述

全局数据共享-MobX

1.安装MobX相关的包

在这里插入图片描述

2.创建MobX的Store实例

在这里插入图片描述

3.将Store里面的成员绑定到页面中

在这里插入图片描述

4.在页面上使用Store中的成员

在这里插入图片描述

5.将Store中的成员绑定到组件中

在这里插入图片描述

6.在组件中使用Store中的成员

在这里插入图片描述

分包

1.什么是分包

分包指的是把一个完整的小程序项目，按需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需加载

2.分包的好处

对小程序进行分包的好处主要有以下两点：
①可以优化小程序首次启动的下载时间
②在多团队共同开发时可以更好的解耦协作

3.分包前项目的构成

在这里插入图片描述

4.分包之后项目的构成

在这里插入图片描述

5.分包的加载规则

在这里插入图片描述

6.分包的体积限制

在这里插入图片描述

分包-使用分包

1.配置方法

在这里插入图片描述
在这里插入图片描述

2.打包原则

在这里插入图片描述

3.引用原则

在这里插入图片描述

分包-独立分包

1.什么是独立分包

在这里插入图片描述

2.独立分包和普通分包的区别

在这里插入图片描述

3.独立分包的应用场景

在这里插入图片描述

4.独立分包的配置方法

在这里插入图片描述

5.引用原则

在这里插入图片描述

分包-分包预下载

1.什么是分包预下载

分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度

2.配置分包的预下载

在这里插入图片描述

3.分包预下载的限制

在这里插入图片描述

Blizzar_front-end
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义Vue组件打包、发布到npm及使用教程
10-16
主要介绍了自定义Vue组件打包、发布到npm及使用教程 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
基于Vue的文字跑马灯组件(npm 组件包)
08-30
A Vue component to marquee
npm 上传发布自定义组件以及使用详细流程(Vue包含)
卡尔特斯
10-13 9408
Vue 自定义全局UI组件Vue 全局导入 JS 文件npm 删除(废弃)发布包或版本前端开发经常需要使用到 npm 安装第三方库，那么如何将自己写的库上传到 npm 进行使用呢？如果在项目中使用到依赖包，可以先了解一下npm 命令使用介绍以及区别，里面有对安装依赖包的详细介绍UI。
使用npm包，全局共享数据，分包
weixin_49107940的博客
04-09 718
Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小程序应用。它所使用的是MIT 开源许可协议，对商业使用比较友好。官方文档地址API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题。全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。
npm 内部拆分模块
07-04 362
无添加的爱
发布自己的npm包，vue组件模块化
baiyikai的博客
10-14 590
发布基于vue的自己的npm包
npm如何引入本地自建的包和需要维护的包
热门推荐
一曲红尘诀
05-31 2万+
　　之前项目中一些包需要更改，然后放到本地项目中维护。因为某些网络限制，也有些包无法install下来，本地代码库会维护包。 　　以下测试基于mac npm 6.9.0版本，博客园写了一篇（https://www.cnblogs.com/lin0123/p/13020292.html），csdn也迁移下 　　正常情况下在项目package.json 所在的目录（一般也是项目根目录）运行npm install xxxx 命令之后，会从远程或者代理地址下载xxxx包到node_modules，然后在p...
vue中npm包全局安装和局部安装过程
10-16
主要介绍了npm包全局安装和局部安装,需要的朋友可以参考下
自定义vue组件发布到npm的方法
08-27
本篇文章主要介绍了自定义vue组件发布到npm的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue造轮子完整指南--npm组件包开发步骤
最新发布
您的博客
09-26 1385
前端npm造轮子指南，vue造轮子指南，npm包发布指南
如何在项目中引用本地的npm包
qq_57956183的博客
08-17 2605
2. 不要指定包名的版本号，而是指定依赖项所在的本地路径。本地路径应该是相对于当前项目目录的路径。
用vue写一个npm包(package)，发布及引用
weixin_44434938的博客
02-20 2643
用vue写一个npm包(package)，发布及引用
微信小程序（使用npm包、全局数据共享、分包、自定义tabBar）
ZHAOKAIYUR的博客
03-14 992
黑马程序员，学习记录黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战自定义 tabBar | 微信开放文档 (qq.com)"custom" : true , // 加上这个即可 "list" : [ ... // 为了兼容性 完整保留下来 ] } ,创建必须叫这个名字。
小程序npm包及分包
pauline_的博客
12-19 1133
小程序对npm的支持与限制 目前,小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率,但是在小程序中使用npm包有如下3个限制: 不支持依赖于Node.js 内置库的包 不支持依赖于浏览器内置对象的包 不支持依赖于C++插件的包 1.什么是Vant Weapp Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用.它所使用的是MIT开源许可协议,对商业使用比较友好 官方文档:https://github.com/youzan/vant-wea
微信小程序 自定义组件 引用
qq_35262929的博客
11-09 421
微信小程序自定义组件，用于复用代码，简化代码的复杂度。
小程序-独立分包使用npm第三方(vant)组件库
weixin_47124112的博客
01-03 893
注意：当构建完的时候，独立分包没有多出文件那就在独立分包下新增一个文件在独立分包页面的json下引入组件{在页面使用组件
html引入npm包,npm安装的包如何引入css, js
weixin_30513765的博客
06-25 4378
本文主要是在laravel框架中引入npm安装的资源的，不知道laravel，纯前端的小伙伴也不要慌，都是一样的laravel用的mix，默认的mix文件是根目录下的 webpack.mix.js 默认有这么两行定义：mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css');这两...
npm引入animate.css
qq_52200979的博客
04-25 1283
首先要去你的项目里终端安装它，npm install animate.css 。 安装完后就在需要的组件里引入它，因为它不是js类型，所以直接import "animate.css" 引入。 引入后需要动画的<transition>中的name属性必须为name:"animate_animated animate_bounce",然后还有一个新的属性enter-active-class="xxx" 这是进入的 leave-active-class="xxx"。xxx动画效果可以去npm官网上
自定义组件上传npm并在本地项目引入
baidu_35523558的博客
04-06 333
参考大神的文章： 封装第三方组件并上传到npm_夕山雨的博客-CSDN博客_npm 上传组件 记录一下实现过程中遇到的坑： 1、删掉不需要的包 npm unpulish --force 注意：这个命令只能删当前版本的包，当前版本的包删除之后npm官网上会出现上一个版本的包，此时需要把项目中的版本名和版本号再修改成npm官网中需要删除的包，再执行删除命令。。。 坑的来了，清理完之后需要等待24小时候之后才能发布新版本的包。。。。 ...
vue封装自定义组件,打包发布到npm上使用
08-30
Vue是一种用于构建用户界面的渐进式JavaScript框架，它可以通过封装组件来实现可复用、模块化以及易于维护的代码。下面我将介绍如何对Vue组件进行封装，并将其打包发布到npm上供他人使用。 首先，我们需要创建一个Vue项目，并在项目中使用Vue CLI来进行组件的开发和构建。可以通过以下命令创建一个新的Vue项目： ``` vue create my-component ``` 接下来，您可以通过Vue CLI支持的任何方式（如单文件组件、JavaScript脚本等）创建自定义组件。在组件的开发过程中，可以利用Vue提供的各种功能和特性，比如计算属性、生命周期钩子函数、模板语法等。确保你的组件功能完备、可复用且易于理解。 完成组件的开发后，我们需要将其打包成可用的npm包。Vue CLI可以帮助我们自动进行打包，只需执行以下命令： ``` npm run build ``` 该命令将生成一个dist文件夹，其中包含了打包后的组件代码。 接下来，我们需要在项目的根目录中创建一个package.json文件，用于描述我们的npm包，并设置一些配置信息。其中，name字段用于定义npm包的名称，version字段用于定义npm包的版本号。其他字段根据您的需要进行设置。然后，执行以下命令将package.json文件拷贝到dist文件夹中： ``` cp package.json dist/ ``` 然后，我们需要登录到npm官方网站，并创建一个账户。接着，使用以下命令进行登录： ``` npm login ``` 在登录成功后，使用以下命令发布npm包： ``` npm publish dist/ ``` 完成上述步骤后，您的自定义Vue组件就已经发布到了npm上。其他开发者可以通过以下命令安装并使用您的组件： ``` npm install your-component ``` 然后，在他们的Vue项目中，可以通过import语句引入您的组件，并在模板中使用它。 至此，我们已经学习了如何封装自定义Vue组件，并通过npm发布，供他人使用。希望这能帮助到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值