- 博客(127)
- 收藏
- 关注
RSS订阅原创 web学习笔记（八十二）uniapp
uniapp是一个基于Vue.js框架的前端开发框架，它可以帮助开发者使用Vue.js一次编写代码，同时生成多个平台（如iOS、Android、Web等）的应用程序。Uni-app的出现使得开发者可以只使用一种语言（Vue.js语法），同时生成多个平台的应用，简化了跨平台开发的复杂度。原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。
2024-07-20 11:17:13
780
原创 web学习笔记（八十一）
因为低版本可能会不兼容自定义tabber，所以我们在自定义tabbar的同时也需要配置小程序自带的tabbar，以确保在低版本的情况下最起码有一个tabbar显示在页面上。(3)我们可以参考微信开发文档中创建自定义tabber组件的代码来自行修改合适的格式，需要注意的是自定义tabbar页面的高亮显示是由onshow中的一段代码来控制的，我们需要给设置tabbar页面的设置下列代码（记得修改对应的 selected值）。
2024-07-20 11:16:47
227
原创 web学习笔记（八十）
因为小程序在加载页面时只会先加载主包的页面，分包的页面是被点击后才会进行下载的操作，这样会导致用户首次进入分包页面速度较慢，因此我们可以通过分包预下载将点击量高的页面所在分包提前下载出来，提供用户的体验感（注意：分包预下载是异步操作，系统会先将主包下载完成后进行预下载的操作）。（2）把app.js文件中的"style":"v2"去除(这句话是小程序用来渲染页面用到，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件的样式混乱。（5）在app.json中 进行全局注册。
2024-07-06 16:48:35
1138
原创 web学习笔记（七十九）
小程序中的全局数据再app.js文件中声明，app本来就是小程序给我们配置的全局文件，因此在app.js文件中声明的数据也都是全局数据，然后我们需要在页面中通过getApp来获取app实例，然后再拿数据。
2024-07-06 16:48:03
450
原创 web学习笔记（七十八）
在components文件中可以创建子组件，首先需要创建一个文件夹，然后右击文件夹选择新建Component选择这个配置系统不会自动配置路由，选择新建Page是会生成路由的。在子组件的js文件中有一个Component组件实例，用于创建组件实例对象，需要注意和Page实例对象进行区分。properties是组件的属性列表:类似于vue的props，用于接收父组件的props传值// 可以简写，也可以通过对象格式来进行编写。min: {// 约定值的类型，可以 约定一个，也可以约定一组类型。
2024-07-05 17:21:29
1026
原创 web学习笔记（七十七）
需要注意的是navigateTo等价于vue中的push()，会生成历史记录，会保留当前页面（不会被卸载），可以跳转到应用内的某个页面。生命周期函数--监听页面加载,类似于vue中的created，表示页面实例Page开始加载，此时是可以访问响应式数据及事件方法的。生命周期函数--监听页面显示，页面初始化加载以及重新加载都会执行这个函数，重新激活一些功能，比如：视频播放、实时地图定位。（2）实现点击事件并编写返回的相关代码，此时也可以通过onLoad拿到路由跳转时传递过来的参数。（1）给按钮绑定点击事件。
2024-07-05 17:21:16
300
原创 web学习笔记（七十六）
（1）定义在data内部：在这里定义一个响应式数据，此处数据的更新是合并更新。（2）定义在data的外部：此处的数据不是响应式数据，但是当我们发送请求时需要的页码等变量并不需要响应式数据，此时就可以将数据声明在data外部。data: {count: 1, //这个数据后面赋什么值，初始值就是什么类型。users: [{ name: "小张", age: 20 },{ name: "小刘", age: 24 },{ name: "小赵", age: 23 },],},
2024-07-04 19:25:18
398
原创 web学习笔记（七十五）
在小程序中不能直接修改数组和对象中的某个属性值，我们得通过自定义传参的方式来实现修改属性值，首先我们需要在wxml页面中通过自定义传参将我们需要修改的哪一项的name传到方法中（在小程序中不能直接通过方法名后面加括号的方式进行事件传参，得通过data-参数名="参数值"的方式来进行传参，如果传过去的是一个字符串可以不用加双大括号，但是如果想传递过去一个变量则需要加双大括号例如： data-name='{{item.name}}'）。小程序发送请求需要通过wx.request来发起网络请求，
2024-07-04 19:24:48
458
原创 web学习笔记（七十四）
view>是布局容器 相当于div 我们通常习惯给页面包裹一个根组件，但是小程序和vue不一样，vue要求我们只能有一个根组件，而小程序可以有多个根组件，页面不会报错，看个人习惯编写页面即可。小程序中数据和方法需要声明在.js文件中，在小程序中每一个页面路由组件都对应一个page实例对象，我们在这个对象中设置响应式数据、事件、组件生命周期。在小程序中我们通过wx:for来进行循环的操作，同时需要通过wx:key来绑定key，绑定值可以为所有或者是数据内的唯一标识，因此，如果需要频繁切换的情景下，用。
2024-07-03 20:29:42
1129
原创 web学习笔记（七十三）微信小程序
（2） "renderer"和 "rendererOptions"是小程序的渲染配置，如果我们不想使用自带的navigation-bar时需要删除相关配置，此处的渲染配置也需要进行删除操作，否则会产生警告。是用来定义底部导航栏的配置项。底部导航栏（Tab Bar）通常用于在不同页面之间进行快速导航，用户可以通过点击底部的图标或文本切换到不同的页面。（3） "window" 是用来定义小程序的窗口表现的配置项。（1） "pages": [] 用来定义小程序的所有页面路径，默认展示数组第一项的页面。
2024-07-03 20:29:34
1030
原创 web学习笔记（七十二）
嵌套组件传值，由父组件提供数据，子组件注入数据，和vue3的用法是一样的，都是只能实现单项数据传值。在vue2中可以通过给标签设置ref属性给dom元素或者是子组件指定一个引用名称，然后在组件的实例中通过$refs访问该引用，从而操作dom元素。通过$parent我们可以获得父组件的整个实例对象，然后就可以直接调用this的方法和数据，不用再通过标签内部传递指定的值。在子页面中进行注入操作 ，但是注入后不能直接使用，需要通过计算属性来返回一个新的属性，才可以使用，否则无法实现响应式的效果。
2024-06-27 20:25:44
942
原创 web学习笔记（七十一）
然后就可以在代码中使用数据，之前vue3我们如果需要在js代码中用父组件 的数据还需要通过props打点调用对应的属性，而在vue2中可以和页面的自定义变量一样直接使用。vue2可以通过自定义事件来实现子传父的效果，首先我们需要在父组件页面给子组件标签设置自定义事件，然后将触发自定义事件后执行的事件给执行出来。在标签内写入要从父页面传到子页面的数据，此时默认传递的数据都是字符串类型的，如果需要传递其他类型的数据（数字、数组、对象等）可以用v-bind进行数据绑定后再传递数据。
2024-06-27 10:49:48
438
原创 web学习笔记（七十）
如果data不是函数，而直接写一个对象，那么所有组件共用同一个数据了，此时的数据变成了全局变量，任意一个组件修改data中的数据，所有组件都会同步变化，这样的话，组件复用就会出现问题，因为组件复用本质上是复用的标签结构和样式而已，数据肯定不能共享，每个组件实例对象this都需要维护自己内部的数据，保证数据的独立性。vue2是选项式api，所有的响应式数据都要写在data中，并且需要return出去，事件的绑定方法和vue3是一样的，但是需要将声明的方法都写在 methods对象中。
2024-06-26 22:51:53
1531
原创 web学习笔记（六十九）vue2
（3） 选择配置项目，最下面的选项是自己重新配置，第一次创建vue2项目的话就用最下面的语句，如果是之前创建过vue2项目并保存了配置，则可以直接选择对应的语句，然后回车拿到之前的配置。在vue3中我们创建好项目还需要自行通过npm i安装对应的包文件，而Vue2在创建项目时会自行帮你下载对应的包文件。（1）在cmd窗口输入npm install -g @vue/cli命令行，快速搭建脚手架。（10）保存后设置当前配置的名字。（5）选择vue的版本。（2） 创建vue2项目。（9）是否保存当前配置。
2024-06-26 11:47:39
191
原创 web学习笔记（六十八）项目总结
但是在使用一些第三方组件的时候，通过内部类名设置样式可能会不生效，因此使用样式穿透，让内部类名突破scoped的限制，从而生效。因为对象没有.length属性，但是我们可以通过object.keys获得一个包含对象所有键名的数组，然后通过object.keys(obj).length来获取键名数组的长度，这个长度就是对象的长度。watch对于引用类型，默认只能监听第一层的变化，深层数据的变化监听不了但是可以通过设置deep:true来开启深度监听。
2024-06-25 21:34:56
443
1
原创 web学习笔记（六十七）项目总结
通常我们组件的标签名就是默认的样式名，可以拿来进行组件穿透，或者在控制台进行检查，然后复制类名进行样式穿透，如果设置样式穿透不起效的话可以尝试在外层再包裹父元素的样式穿透。（1）当接口返回数据是数组时可以用v-for进行遍历，当返回数据是对象时也可以进行遍历，注意当遍历对象时就不可以写index了，需要遍历key，然后用来绑定key。（2）当返回数据是对象在页面使用时直接打点调用对应属性即可，不需要再遍历使用item来进行操作（会报错）。z-index需要搭配定位使用，通常搭配相对定位使用。
2024-06-24 21:46:11
601
原创 web学习笔记（六十六）项目总结
使用这个标签可以允许你在组件等待数据或资源加载时显示一个占位符（通常是加载指示器），并在数据准备好后显示实际内容。(3)在stores文件夹下创建.js文件，然后在文件中编写相关共享状态的数据，通常我们将一类状态编写在同一个.js文件中，在这个文件中需要导出defineStore，并暴露useCounter模块。当请求过来的数据比我们需要的数据少时，我们可以自己将所需数据添加进去，比如分类中的全部，通常是接口数据中不包含的，此时就需要我们自己将分类添加到数据中去。(2)写触底加载事件的逻辑。
2024-06-24 21:45:38
1127
原创 web学习笔记（六十五）
Hash模式（历史模式）和History模式（哈希模式）是匹配路由的两种模式，一般默认配置Hash模式，可以在index.js页面中将路由匹配的模式换为哈希模式。
2024-06-07 10:54:56
451
原创 web学习笔记（六十四）
（2）router.go(1) 表示前进一个页面，在有历史记录的时候适合用，可以前进一个或多个页面，也括号内也可以写一个负数，表示后退几个页面。动态路由参数，是路由的一部分，参与路由的匹配，需要在index.js页面设置动态参数，此时的参数是必传的，而且参数数量也要一致。3.动态路由参数是路由的一部分，参与路由匹配，因此设置几个冒号变量就要设置几个参数，否则匹配不到路由，而?我们在这篇文章中提到的路由都是前端路由，是用来匹配组件完成跳转的，而后端路由则是为了获取json数据的。然后问号后面再写参数 ，
2024-06-07 10:52:42
768
原创 web学习笔记（六十三）
将include属性值定义为一个ref类型的响应式数组变量，通过手动对数组增删来控制要动态缓存或取消缓存的组件。设置最大缓存数量，如果超出缓存最大数量的限制，vue会主动卸载最久没有被访问的实例，为新实例腾出缓存空间。使用max属性，但是这个max属性无法手动指定要取消缓存的组件实例。包含要缓存的组件name属性值。排除要缓存的组件name属性值。调用时期为从dom上移除、进入缓存，以及组件卸载时。在组件初始挂载时，以及缓存组件被激活时执行。在组件被卸载时，以及缓存组件失去激活时执行。
2024-06-05 20:54:53
982
原创 web学习笔记（六十二）
（1）在集成终端输入： npm i --save pubsub-js来安装pubsub-js包，这是一个专门用来完成发布订阅操作的包，这个包是通用的，Vue、小程序、react、js都可以用。但是通常我们需要点击指定键然后触发相应的事件，此时就需要用到键盘的修饰符了, 也可以链式调用修饰符，表示同时按下对应的键触发键盘事件。组件树传值也叫依赖注入，可用解决父组件向某个深层子组件传值的问题，但是一定要注意，这个只能实现父传子的单向传递。是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
2024-06-05 17:51:25
535
原创 web学习笔记（六十一）
此时需要在子组件中接收我们自定义的事件，为后面在子组件触发父组件中的自定义事件做准备。通过setup传参的方式将时间名拿到，然后绑定按钮的点击事件，此时点击事件会触发我们自定义的事件，而我们自定义的事件又会自动执行对应的方法，然后将我们需要传递的数据写在方法的参数部分即可完成数据传递。在子组件中将父组件传过来的数据使用props进行接收 ，此时可以直接在页面使用{{}}来渲染数据，如果需要在js部分使用父组件传过来的数据，则需要在setup后面的括号内写入props再使用相关数据。
2024-05-30 10:51:39
463
2
原创 web学习笔记（六十）
虚拟dom也是一个js对象，和原生dom一样，主要是为了减少dom操作而设计的。每次更新dom前都先进行新旧dom的对比，其实新旧dom的对比就是两个js对象的对比。这样对比过后vue只操作变化的dom，那么更新的dom的效率就更高了。
2024-05-29 10:29:18
1074
原创 web学习笔记（五十九）
MVVM是model-view-viewModel的简写, 它是一种开发模式, 它实现了视图和数据逻辑之间的分离, model模型指的是后端传递的数据, view视图指的是所看到的页面, viewModel是连接视图view和模型model的桥梁, 从而实现模型model到视图view的转化 和 视图view到模型model的转化, 也就是我们所说的双向数据绑定, 使用MVVM模式实现的前端框架有 vue 和 react。通过选择器的嵌套来表示标签之间的层级关系。4. 什么是MVVM?
2024-05-28 19:18:52
962
原创 web学习笔记（五十八）
语法糖（Syntactic sugar）是指在编程语言中提供的一种更简洁、更易读的语法形式，用来表示相同的功能。语法糖让代码更易于写和理解，虽然底层实现是一样的，但使用语法糖可以让代码更简洁、更优雅。省去了../这种查找方式，更便捷。在script标签内部写入setup就可以使用setup语法糖了，此时不需要在script内部写入口函数，可以直接编写相关代码，也不需要将变量和方法用return返回就可以直接在template标签内部使用。路径别名是指在项目中定义的一些简短的路径，用来代替复杂的长路径。
2024-05-22 14:51:11
856
1
原创 web学习笔记（五十七）
vue2采用的是 Object.defineProperty进行对对象劫持实现响应式，正常对象中的属性是有限的，所以可以使用 Object.defineProperty进行迭代劫持，但是对于数组来说，数组中的元素可能是无限的，如果 Object.defineProperty也对数组中的每个元素进行劫持会非常浪费性能，所以为了避免不必要的性能浪费，vue2没有对数组中的每一项进行数据劫持。因此需要一个工具将.vue文件编译成浏览器能加载的.html .js .css文件，vite就是构建项目的编译工具。
2024-05-20 19:17:14
728
原创 web学习笔记（五十六）
vue2响应式原理:vue是一个典型的基于MVVM设计思想的框架，MVVM中M表示数据层（Model）V表示视图层(View) VM（viewmodel）表示用来连接视图层和数据层的桥梁,当数据层发生改变时会通过vm通知视图层更新视图，当视图层发生改变时会通过vm通知数据层更新数据，这就是典型的双向数据绑定。（2）输入命令行：npm create vue@latest ，然后根据提示输入项目名，及选择自己所需要的配置。绑定多个类名有两种方式，可以将类名以对象的形式来编写，也可以将类名以数组的方式来编写。
2024-05-20 14:51:09
407
原创 web学习笔记（五十五）
在Visual Studio Code中我们可以将常用的代码配置成代码片段，这样就可以在页面上快速输入大段代码了。（3） 点击新建全局代码片段文件，然后在输入框中输入自定义的命令名 eg:vuehtml;（4）将通过网址转换后的代码粘贴到对应文件中 ，然后保存就可以在页面中使用自定义代码片段了。v-show 指令是另一个用于根据条件来渲染模板内容，可以用来控制元素的显示和隐藏。（2） 点击设置页面中的用户代码片段。
2024-05-15 21:41:50
1196
原创 web学习笔记（五十四）Vue
Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2024-05-15 16:25:11
610
原创 web学习笔记（五十三）身份认证
当生成 JWT 字符串的时候，需要使用 secret 密钥对用户的信息进行加密，最终得到加密好的 JWT 字符串当把 JWT 字符串解析还原成 JSON 对象的时候，需要使用 secret 密钥进行解密。
2024-04-06 16:54:01
863
原创 web学习笔记（五十二）数据库
数据库（database）是用来组织、存储和管理数据的仓库。当今世界是一个充满着数据的互联网世界，充斥着大量的数据。数据的来源有很多，比如出行记录、消费记录、浏览的网页、发送的消息等等。除了文本类型的数据，图像、音乐、声音都是数据。为了方便管理互联网世界中的数据，就有了数据库管理系统的概念（简称：数据库）。用户可以对数据库中的数据进行新增、查询、更新、删除等操作。SQL（英文全称：Structured Query Language）是结构化查询语言，SQL 是一门数据库编程语言。
2024-04-06 16:18:43
928
原创 web学习笔记（五十一）
如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。当两个url的协议、域名、端口号三者有一个不一致时就发生了跨域现象。浏览器会对跨域请求进行拦截。例如，下表给出了相对于页面的同源检测：URL是否同源原因是同源（协议、域名、端口相同）否协议不同（http 与 https）否域名不同（www.test.com 与 blog.test.com）否端口不同（默认的 80 端口与 7001 端口）是同源（协议、域名、端口相同）
2024-04-01 21:16:03
1019
原创 web学习笔记（五十）
nodemon是一个用于 Node.js 开发的工具，它能够监视你的文件变化并自动重启 Node 应用程序。在开发过程中，当你对代码进行修改并保存时，nodemon可以帮助你自动重新启动应用程序，这样你无需手动停止和重新启动服务器来查看你的更改。之前每次我们修改过后端代码后都需要ctrl+c结束服务器的运行，然后再用Node命令重新运行代码，比较麻烦，但是现在我们可以通过nodemon 来自动重启Node。一定要在路由之前注册中间件客户端发送过来的请求，可以连续调用多个中间件进行处理。
2024-04-01 15:46:35
751
原创 JavaScript编写评分控件
编写一个评分控件，用一个单行5列的Table做评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景色变为红色，之后的td背景色变为白色。
2024-03-29 16:50:57
160
原创 web学习笔记（四十九）
之前我们有讲过可以通过node.js内置的http模块来创建服务器，但是http创建服务器的过程比较繁琐而且开发效率比较低，而 Express就是npm上用来创建wdb服务器的一个包，通过 Express包我们可以快速创建 Web 服务器。
2024-03-29 01:00:00
1044
原创 web学习笔记（四十八）
使用 require() 加载自定义模块时，必须指定以 ./ 或 ../ 开头的路径标识符。在加载自定义模块时，如果没有指定 ./ 或 ../ 这样的路径标识符，则 node 会把它当作内置模块或第三方模块进行加载。同时，在使用 require() 导入自定义模块时，如果省略了文件的扩展名，则 Node.js 会 按的顺序分别尝试加载，如果都没有那就会进行报错。
2024-03-28 09:09:20
914
原创 web学习笔记（四十七）
模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元。编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。
2024-03-28 08:37:01
1403
原创 web学习笔记（四十六）
在开发期间，自己的电脑既是一台服务器，也是一个客户端，为了方便测试，可以在自己的浏览器中输入 127.0.0.1 这个 IP 地址，就能把自己的电脑当做一台服务器进行访问了。尽管 IP 地址能够唯一地标记网络上的计算机，但IP地址是一长串数字，不直观，而且不便于记忆，于是人们又发明了另一套字符型的地址方案，即所谓的域名（Domain Name）地址。使用 path.extname() 方法，可以获取路径中的扩展名部分，里面只包含一个参数，而且是必选参数，这个参数是一个表示路径的字符串。
2024-03-28 08:36:38
1053
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人