2024/2/5总结

news2024/11/15 11:02:48

微信小程序

监听对象中所有属性的变化

如果某个对象中需要被监听的属性太多,为了方便,可以使用 通配符 ** 来监听 对象中所有属性的变化

什么是纯数字字段

概念:纯数字字段指的是那些不用于界面渲染的 data 字段

好处:提升界面的更新的性能。

使用规则

在 Component 构造器的 options 节点中,指定 pureDataPattern 作为一个正则表达式,字段名符合这个正则表达式的字段,将成为 纯数据字段

组件的声明周期函数

在小程序中,最重要的 生命周期函数有 3个 ,分别是 created attached detached 它们各自的特点如下:

  • 组件实例 刚被创建好的时候 ,created 生命周期函数会被触发

此时含不能调用 setDate 

通常在这个生命周期函数中,只应用于给组件的 this 添加一些字典关于的属性字段

  • 在组件 完全初始化完毕,进入页面节点树以后,attached 生命周期函数会被触发

此时,this.setData 已被初始化完毕,绝大多数的初始化工作可以在这个时机进行

  • 在组件离开页面节点树之后,detached 生命周期函数会被触发

退出一个页面树时,会触发页面内每个自定义组件的 detached 生命周期函数

lifetimes 节点

在小程序组件中,生命周期函数可以直接定义在 component 构造器的第一级参数中,可以在 lifetimes 字段内进行声明 (这是推荐的方式,其优先级最高)

旧版的样式时 直接在 Component 里面直接定义这些 生命周期函数。如果新旧方式都有,旧方式会被覆盖。

什么是组件所在页面的生命周期

自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期

在自定义组件中,组件所在页面的生命周期函数有如下 3 个

pageLifetimes 节点

组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点中

插槽

在自定义组件的 wxml 可以提供一个 <slot> 节点 ,用于承载组件使用者提供的 wxml 结构

单个插槽

在小程序中,默认每个自定义组件中只允许使用一个 <slot> 进行占位,这种个数上的限制叫做单个插槽。

启用多个插槽

默认不支持多个插槽,但是可以在 组件的 js 文件中,通过如下的方式进行启用

多个插槽以不同的 name 进行区分不同的 插槽

父子通信

属性绑定

用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据

事件绑定

用于子组件向父组件传递数据,可以传递任意数据

在这期间,有需要注意的点,我在 js 里面写习惯了 箭头函数 =>  但是这里面不要写 箭头函数,因为它不支持,导致我访问 this 是一个 undefined 的值。 

获取组件实例

父组件可以通过 this.selectComponent("id 或者 class 选择器") 获取子组件的实例对象,从而直接访问子组件的任意数据和方法,调用时需要传入一个选择器。好好好,这是 vue 里面的 ref 吧

behaviors

是小程序中,用于实现组件中间代码共享的特性,类似于 Vue.js 中的 “mixins”

每个 behaviors 可以包含一组属性、数据、生命周期函数 和 方法,组件引用它时,它的属性、数据、方法会被合并到组件中

创建 behavior

调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象,供所有的组件使用

然后就可以使用了

behavior 中所有可用的节点

小程序对 npm 的支持与限制

小程序已经支持使用 npm 安装 第三方包,从而提高 小程序的开发效率,但是,小程序中使用 npm 包中有如下 3 个限制

  • 不支持 依赖于 Node.js 内置库的包
  • 不支持 依赖于 浏览器内置对象的包
  • 不支持 依赖于 C++ 插件的包

Vant 

是有赞前端团队开源的一套小程序 UI 组件库,助力开发者快速搭建小程序应用,它所使用的是 MIT 开源许可协议。

安装请参考:

快速上手 - Vant Weapp (gitee.io)

使用Vant组件

安装完 Vant 组件之后,可以在 app.json 的 usingCoimponents 节点中引入需要的组件,即可在 wxml 中 直接使用组件

费了九牛二虎之力,才安装好,整个人都要崩溃了

参考博文:

http://t.csdnimg.cn/Zypjy

定制全局主题样式

在 app.wxss 中,写入 css 变量 ,即可对全局生效

API promise 化

默认情况下,小程序官方提供的 异步API 都是 基于回调函数实现的,要实现 API promise 化 主要依赖于 miniprogram-api-promise 这个第三方的 npm 包

安装:
npm i --save miniprogram-api-promise@1.0.4

实现:

跟 js 里面的 async await 是一样的

全局数据共享

是为了解决 组件之间数据共享的问题。

在小程序中,可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享,其中:

  • mobx-miniprogram  用来创建 Store 实例对象
  • mobx-miniprogram-bindings  用来把Store中的共享数据或方法,绑定到组件或页面中使用
安装
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
创建 store 实例

导出后,就可以各个地方都可以使用了。

计算属性  需要加 get !!!

actions方法,修改store里面的数据:

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

直接使用

将 store 中的成员 绑定到 组件中

也是可以直接使用

分包

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

  • 好处:
  • 优化小程序首次启动的下载时间
  • 在多团队共同开发更为便捷

推荐分包构成:

  • 主包:一般只包含项目的启动页面 或 TabBar 页面,以及所有分包都需要用到的一些公共资源
  • 分包:只包含和当前分包有关的页面和私有资源

在小程序启动时,默认会下载主包并启动主包内界面

分包的体积限制
  • 整个小程序的所有分包不超过 16M 主包+所有分包
  • 单个分包/主包大小不能超过 2 M

打包原则

小程序会按照 subpackages 的配置来进行分包subpackages 之外的目录会被打包到 主包中

主包也可以有自己的 page是(即最外层的 pages 字段)

  • tabBar 页面必须在主包内
  • 分包之间不能互相嵌套
引用原则
  • 主包无法引用分包内的私有资源
  • 分包之间不能相互引用私有资源
  • 分包可以引用主包内的公共资源
独立分包

本质上也是分包,但是看它可以独立于主包 和 其他分包而单独运行

独立分包和普通分包区别

最主要的区别:是否依赖于主包才能运行

在 subpakages 里面会 多一个配置 independent:true

独立分包和其他包是不能互相引用资源的

分包预下载

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

预下载分包的行为,会在进行指定的页面时触发,在 app.json 中 ,使用 preloadRule 节点定义的预下载规则

​​​​​​​

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1436326.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024.02 国内认知大模型汇总

概述 大模型&#xff0c;又称为大规模机器学习模型&#xff0c;是一种基于大数据的人工智能技术。它通过深度学习和机器学习的方法&#xff0c;对大量数据进行训练&#xff0c;以实现对复杂问题的高效解决。大模型技术在语音识别、图像识别、自然语言处理等领域有着广泛的应用…

sqli.bypass靶场本地小皮环境(1-5关)

1、第一关 http://sqli.bypass/index1.php 单引号报错id1 双引号正常id1&#xff0c;应该是单引号闭合 id1--注释符用不了&#xff0c;%20和都用不了 %0a可以用 没有报错&#xff0c;用布尔盲注&#xff0c;POC&#xff1a;id1%0aand%0asubstr(ss,1,1)s%0aand%0a11 脚本跑数…

JavaScript流程控制详解之顺序结构和选择结构

流程控制 流程控制&#xff0c;指的是控制程序按照怎样的顺序执行 在JavaScript中&#xff0c;共有3种流程控制方式 顺序结构选择结构循环结构 顺序结构 在JavaScript中&#xff0c;顺序结构是最基本的结构&#xff0c;所谓的顺序结构&#xff0c;指的是代码按照从上到下、…

【python数据分析基础】—dataframe中index的相关操作(添加、修改index的列名、修改index索引值等)

文章目录 前言一、添加、修改index的列名二、修改index索引值 前言 本文主要讲dataframe结构中index的相关操作&#xff0c;index相当于是数据表的行。 一、添加、修改index的列名 新建一个dataframe表&#xff0c;我们可以自定义index的值&#xff0c;如下&#xff1a; imp…

Webpack源码浅析

webpack启动方式 webpack有两种启动方式&#xff1a; 通过webpack-cli脚手架来启动&#xff0c;即可以在Terminal终端直接运行&#xff1b; webpack ./debug/index.js --config ./debug/webpack.config.js通过require(webpack)引入包的方式执行&#xff1b;其实第一种方式最终…

sqli-labs-master靶场训练笔记(38-53|boss战)

2024.2.4 level-38 &#xff08;堆叠注入&#xff09; 这题乍一看感觉又是来卖萌的&#xff0c;这不是和level-1一模一样吗 然后仔细看了一下源代码&#xff0c;根据 mysqli_multi_query 猜测这题的本意应该是堆叠注入 mysqli_multi_query() 是 PHP 中用于执行多个 SQL 查…

Sysbench 性能测试(小白快速上手)

文末有惊喜哦 &#xff01; Sysbench 介绍 Sysbench 是一个在Linux系统上进行性能测试和基准测试的工具。它可以用于评估计算机系统的各种性能指标&#xff0c;如 CPU 性能、内存性能、文件 I/O性 能和数据库性能等。Sysbench 提供了多种测试模式和选项&#xff0c;可以帮助用户…

感悟笔记——2024年2月5日

今日阅读了一篇挺有深度的文章&#xff0c;主要阐述进入职场后的大部分人&#xff0c;是怎么逐渐沦为螺丝钉的?即使起点巨高的优等生&#xff0c;也不可避免。文章指路&#xff1a; 「优等生思维」正在将你变成「螺丝钉」和「老黄牛」从小到大&#xff0c;我一直都是那个「别…

EMC测试报告怎么看 PK、QP、AV

EMC测试报告怎么看 报告中的字母辐射报告1辐射报告2 测试条件 报告中的字母 1.PK.PEAK&#xff0c;是指峰值&#xff08;单位时间内的最高值&#xff09;&#xff1b; 2.QP&#xff08;QUASI-PEAK)是指准峰值&#xff08;单位时间内的平均值&#xff09;&#xff1b; 3.AV(AVE…

数据采集接口分类:数据采集、数据的采集有哪些?

中国的人工智能会面临着前所未有的发展机遇&#xff0c;她也将会以真正解决人类钢需载入史册&#xff0c;我们也期待着在天津跟在座的各位合作伙伴共同努力&#xff0c;真正的用人工智能建设美好世界。 API接口数据采集 主流电商数据采集 一、 什么是数据采集 确立一个算法模…

算法-2-异或运算

按位异或&#xff1a;相同为0&#xff0c;不同为1 异或运算性质 1&#xff09;异或运算就是无进位相加&#xff08;ab写二进制形式每位相加时不进位&#xff09; 2&#xff09;异或运算满足交换律、结合律&#xff0c;也就是同一批数字&#xff0c;不管异或顺序是什么&#…

【精选】java继承进阶,子类继承父类(内存图、内存分析工具)

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

5年前端仔的2023年终总结

突然发现已经有好几个月没有写过博客总结过什么&#xff0c;小小辩解一下&#xff0c;其实并不是笔者停止的学习和总结&#xff0c;随着在前端这个行业的逐年深入&#xff0c;渐渐的很多收获不再是像之前简单的技术点的确定性描述讲解了&#xff0c;而是某个领域的知识体系的串…

计算机服务器中了locked勒索病毒怎么处理,locked勒索病毒解密数据恢复

网络技术的不断发展&#xff0c;为企业的生产生活提供了极大便利&#xff0c;但也为网络安全带来严重威胁。近期&#xff0c;云天数据恢复中心接到某集团企业的求助&#xff0c;企业的计算机服务器遭到了locked勒索病毒攻击&#xff0c;导致企业系统内部的金蝶账套全部被加密&a…

鸿蒙踩坑合集

各位网络中的小伙们&#xff0c;关于鸿蒙的踩坑陆陆续续收集中&#xff0c;本文章会持续更新&#xff0c;希望对您有所帮助 1、预览视图无法正常加载 重新编译项目&#xff0c;点击刷新按钮&#xff0c;控制台提示Build task failed. Open the Run window to view details. 解…

生物地理学算法

生物地理学优化算法 生物地理学优化算法&#xff08;biogeography-based optimization,BBO&#xff09;源于生物地理学理论&#xff0c;通过模仿栖息地之间物种迁移和变异对优化问题进行求解&#xff0c;由Simon于2008年提出。 BBO算法由一群可行解组成&#xff0c;这些可行解…

港口起重数字化解决方案:PreMaint智能化引领未来

在面对日益增加的货轮和集装箱需求的背景下&#xff0c;港口码头迫切需要高效、智能的解决方案来优化起重设备运行&#xff0c;提高生产效率。数字化技术在港口起重领域的应用&#xff0c;尤其是仿真和数据分析&#xff0c;成为解决这些挑战的重要工具。而PreMaint智能化系统的…

text-generation-webui搭建大模型运行环境与踩坑记录

text-generation-webui搭建大模型运行环境 text-generation-webui环境初始化准备模型启动项目Bug说明降低版本启动项目 text-generation-webui text-generation-webui是一个基于Gradio的LLM Web UI开源项目&#xff0c;可以利用其快速搭建部署各种大模型环境。 环境初始化 下载…

【芯片设计- RTL 数字逻辑设计入门 7 -- 同步复位与异步复位详细介绍】

文章目录 复位的类型和划分同步复位综合后电路优缺点 异步复位优缺点 异步复位的时序分析&#xff08;recovery time/removal time&#xff09;异步复位&#xff0c;同步释放综合后电路优缺点 转自&#xff1a;https://blog.csdn.net/qq_40281783/article/details/128969188 复…

2024三掌柜赠书活动第九期:Node.js从基础到项目实践(视频教学版)

目录 前言Node.js从基础到项目实践关于《Node.js从基础到项目实践(视频教学版)》编辑推荐内容简介作者简介图书目录书中前言/序言《Node.js从基础到项目实践(视频教学版)》全书速览结束语 前言 随着Web应用的快速发展&#xff0c;Node.js作为一种强大的JavaScript运行时环境&…