qiaofugui 的博客文章

当前为qiaofugui的博客内容。查看全部
  • qqq
    组合式 API watch() 用来监听数据变化,默认是懒监听(默认页面首次加载不触发),watch 调用有三个参数,第一个是监听的数据,数据包含以下几种情况: 一个ref 一个响应式对象 一个函数,返回一个值 由上述类型的值组成的数组 const userInfo = ref({ name: '张三', info: { age: 18, mobile: '188xxxxxxxx' } }) watch(() => userInfo.name, (val, oldVal) => { console.log(val) }) watch(userInfo, (val, oldVal) => { console.log(val) }, { deep: true }) 第二个参数是数据发生变化后的回调函数,该函数接收三个参数:新值、旧值,以及一个用于注册副作用清理的回调函数 第三个可选的参数是一个对象,支持以下这些选项: immediate:在监听器创建时立即触发回调 deep:如果源是对象,强制深度遍历,以便在深层级变更时触发回调 watchEffect() 立即运行一个函…
  • qqq
    JS JavaScript 作用域 全局作用域 局部(函数)作用域 块级作用域(es6 之后才有) 作用域链 变量在寻找值的时候是先在当前的作用域中开始寻找,如果当前作用域中有则读取的是当前作用域的变量,如果当前作用域中找不到该变量,则会顺着作用域链去外层寻找 预编译 预编译是上下文创建之后, js代码执行前的一段时期, 在这个时期, 会对js代码进行预处理 全局上下文创建后,会生成变量对象VO,VO首先寻找变量声明,将var声明的变量作为VO对象的属性名,值为undefined。然后寻找函数声明,属性值为函数本身,如果函数名与变量名冲突,函数声明会将变量声明覆盖 全局预编译 console.log(a) var a = 100; function a () { } console.log(a) // 第一个log输出 函数a本身 // 第二个log输出 100 函数预编译 函数上下文创建后,会生成变量对象AO 寻找变量声明, 变量名作为AO对象的属性名, 属性值置为 undefined 寻找形参, 形参名作为AO对象的属性名, 属性值置为 undefined 将实参的值赋予形参, 即…
  • qqq3
    uni-popup 里面的 uni-popup-dialog 组件属性是 mode="input" 时,在 H5 中无异常,但是在微信小程序中只要打开的页面使用了uni-popup-dialog 组件并且 mode="input",IOS端的软键盘就会自动弹起!!!解决: uni-popup-dialog 使用 v-if 控制。 uni-app 编译到微信小程序时,默认存在组件样式隔离,导致样式穿透(深度选择器)失效 解决方法:在组件的 script 部分添加 options: { styleIsolation: 'shared' },解除样式隔离: // Vue3 defineOptions({ options: { styleIsolation: 'shared' // 允许样式穿透 } }) // Vue2 export default { options: { styleIsolation: 'shared' // 允许样式穿透 }, data() { return {} }, methods: {} }
  • qqq1
    ✨ 在介绍功能之前,先看看这款插件解决了哪些实际开发痛点: 批量操作效率:一次性完成多个数据项的增删改查,告别重复劳动 复杂JSON处理:内置强大编辑器,轻松处理嵌套对象和数组 现代化界面:直观易用的UI设计,降低学习成本 ✨ 核心功能亮点 📊 存储支持 Storage Manager支持localStorage存储类型: 持久化存储:完整管理localStorage数据,支持页面刷新后的数据保留 自动检测:打开插件即自动读取当前页面的所有存储数据,无需手动刷新 🔍 强大数据操作,得心应手 插件提供了全方位的数据管理功能,满足日常开发的各种需求: 实时搜索过滤:支持按键名或值内容快速定位数据,支持模糊匹配 直观编辑界面:点击即编辑,无需复杂操作,修改立即生效 批量管理:一键清空所有数据,或批量编辑多个数据项 安全操作:所有修改都有即时反馈,防止误操作导致的数据丢失 📝 JSON编辑,复杂数据轻松应对 针对开发中常见的复杂JSON数据,Storage Manager内置了编辑器: 多模式编辑:支持树形、代码、表单、文本和预览五种编辑模式 智能格式化:自动格式化JSON数据,缩进清晰…
  • qqq
    NuxtJS - 构建优雅的 Vue 应用 Nuxt.js 是一个用于构建优雅的 Vue.js 应用程序的框架。它专注于提供一种无缝的开发体验,同时允许你在服务器端渲染 Vue 应用。Nuxt.js 提供了以下功能: 服务器端渲染(SSR): Nuxt.js 允许在服务器端渲染 Vue 应用,提供更好的性能和 SEO。 自动生成路由: Nuxt.js 可以根据项目结构自动生成路由配置,减少了手动配置的工作。 插件和模块: 你可以使用插件和模块来扩展 Nuxt.js 应用的功能。 异步数据加载: Nuxt.js 支持在页面加载之前异步获取数据,以提供更快的初始加载速度。 官方网址:https://nuxtjs.org NextJS - 构建现代化的 React 应用 Next.js 是一个用于构建现代化 React 应用程序的框架。它强调性能、开发体验和 SEO 优化,是许多 React 开发者的首选。Next.js 提供了许多功能,包括: 服务器渲染(SSR): Next.js 允许在服务器端渲染 React 应用程序,从而提高了应用程序的性能和 SEO。 静态网站生成(SSG): 你…
  • qqq
    [文档](快速开始 – 阿里git客户端工具 (git-repo.info)) 把下载的文件放到安装 git 目录下的 cmd 文件夹里 提PR到云效 第一步 基于主分支创建 功能/缺陷 分支,编写完成正常 git add . 和 git commit -m '' 第二步 完成第一步后,切换到需要提PR的分支,先把 “基于主分支创建 功能/缺陷 分支” 合并到需要提PR的分支,正常 git add . 和 git commit -m '' 后,执行 git pr,就可以在云效上查看合并请求了 如何通过git-repo提交代码评审_云效(Apsara Devops)-阿里云帮助中心 (aliyun.com)
  • qqq
    环境变量 实际开发中,有多种环境,如: development 模式用于 vue-cli-service serve production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e test 模式用于 vue-cli-service test:unit ##注意点: 一个模式可以包含多个环境变量 每个模式都会将环境变量中 NODE_ENV 的值设置为模式的名称 可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量 为一个特定模式准备的环境文件(如:.env.production)将会比一般的环境文件(如:.env)拥有更高的优先级 .env # 在所有环境中被载入 .env.local # 在所有环境中被载入,但会被 git 忽略 .env.[mode] # 只在特定的模式中被载入,优先级高于 .env 和 .env.local .env.[mode].local # 只在特定的模式中被载入,但会被 git 忽略,优先级高于 .env 和 .env.local // .env.development 文件 N…
  • qqq
    简介 Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用,内置了UI组件,还有物料市场,只编写一套代码就能够适配到多端。 Tara 遵循 React 语法,集成的是 Nerv 框架。 Nerv 是一款基于 virtual dom 技术的类 React UI 框架,它基于 React 标准,拥有和 React 一致的 API 与生命周期。得益于与 React 保持一致 API 的特性,Nerv 可以无缝兼容到 React 的相关生态,例如 react-router,react-redux,以及使用 React 开发的组件,所以对于旧的 React 项目,可以无痛地将 React 替换成 Nerv。 环境准备 Taro 仅提供一种开发方式:安装 Taro 命令行工具(Taro CLI)进行开发。 在终端输入命令 npm i -g @tarojs/cli 安装 Taro CLI。 Taro CLI 依赖于 Node.js 环境(>=8.0.0)。 框架…
  • qqq
    框架环境和基本使用 Umi 是蚂蚁金服的底层前端框架, 是可扩展的企业级前端应用框架, 内置了路由、构建、部署、测试, 包含组件打包、文档工具、请求库、hooks 库、数据流等 , 通过框架的方式简化 React 开发 知识结构图 官网:https://v3.umijs.org/zh-CN 环境准备,快速上手 准备工作:由于国内网络和前端的特殊性,在安装依赖等方面可能会失败或导致无法启动,浪费大量的时间,推荐使用 yarn 作为包管理器,并且使用国内镜像,推荐 yrm 这个工具管理 yarn 镜像 # 安装 npm install -g yrm # 查看 yarn 镜像源 yrm ls # 切换源 yrm use taobao 项目初始化 新建一个空目录,在空目录里面执行命令 # 使用 yarn 安装 umi 环境 yarn create @umijs/umi-app # 安装依赖 cd 目录 yarn # 启动项目 yarn start 在浏览器里打开 http://localhost:8000,能看到以下界面: 目录结构 ├── dist // 默认的 build 输出目录 ├──…
  • qqq
    mock 的使用 安装 mockjs bower install --save mockjs 文件中导入 mockjs 返回有个 mock 对象 const Mock = require('mockjs') mock 对象中有一个 mock 函数 mock 会根据自己编写的模板自动生成模拟数据 官网:http://mockjs.com 初体验 const Mock = require('mockjs') /** * 返回的模拟数据都是对象类型 * 返回对象的 key list */ const data = Mock.mock({ // 生成的随机数组的长度是 5-10 "list|5-10": [ // 数组中的元素是对象类型 "id|+1": 1 生成的 id 是从 1 开始递增的 { "id|+1": 1 } ] }) console.log(data) /* { list: [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 } ] }…
  • qqq
    uni-app 简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码,可发布到 iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。 详细的 uni-app 官方文档,请翻阅 https://uniapp.dcloud.net.cn 开发工具 uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处: 模板丰富 完善的智能提示 一键运行 当然,你依然可以根据自己的喜好,选择使用 VS Code、Sublime、记事本… 等自己喜欢的编辑器! 安装 scss/sass 编译 为了方便编写样式(例如:<style lang="scss"></style>),建议安装 scss/sass 编译 插件:https://ext.dcloud.net.cn/plugin?name=compile-node-sass 新建 uni-app 项目 填写项目基本信息 目录结构 一个 uni-app 项目,默认包含如下目录及文件: ┌─compone…
  • qqq
    使用 npm 包 小程序对 npm 的支持与限制 目前,小程序中已经支持使用 npm 安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用 npm 包有如下 3 个限制: 不支持依赖于 Node.js 内置库的包 不支持依赖于浏览器内置对象的包 不支持依赖于 C++ 插件的包 虽然 npm 上的包有千千万,但是能供小程序使用的包却 “为数不多”。 Vant Weapp Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库,助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议,对商业使用比较友好。 官方文档地址:https://youzan.github.io/vant-weapp 扫描下方的小程序二维码,体验组件库示例: 安装 Vant 组件库 在小程序项目中,安装 Vant 组件库主要分为如下 3 步: 通过 npm 安装 构建 npm 包 修改 app.json 详细的操作步骤,可以参考 Vant 官方提供的快速上手教程:https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang 使用 V…
  • qqq
    自定义组件 创建组件 在项目的根目录中,鼠标右键,创建 components -> test 文件夹 在新建的 components -> test 文件夹上,鼠标右键,点击 “新建 Component” 键入组件的名称之后回车,会自动生成组件对应的 4 个文件,后缀名分别为 .js,.json, .wxml 和 .wxss 为了保证目录结构的清晰,建议把不同的组件,存放到单独目录中,例如: 引用组件 组件的引用方式分为 “局部引用” 和 “全局引用”,顾名思义: 局部引用:组件只能在当前被引用的页面内使用 全局引用:组件可以在每个小程序页面中使用 局部引用组件 在页面的 .json 配置文件中引用组件的方式,叫做 “局部引用”。示例代码如下: // 在页面的 .json 文件中,引入组件 { "usingComponents": { "my-test1": "/components/test1/test1" } } // 在页面的 .wxml 文件中,使用组件 <my-test1></my-test1> 全局引用组件 在 app.json 全局配置…
  • qqq
    页面导航 页面导航指的是页面之间的相互跳转。例如,浏览器中实现页面导航的方式有如下两种: <a> 链接 location.href 小程序中实现页面导航的两种方式 声明式导航 在页面上声明一个 <navigator> 导航组件 通过点击 <navigator> 组件实现页面跳转 编程式导航 调用小程序的导航 API,实现页面的跳转 声明式导航 导航到 tabBar 页面 tabBar 页面指的是被配置为 tabBar 的页面。 在使用 <navigator> 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中: url 表示要跳转的页面的地址,必须以 / 开头 open-type 表示跳转的方式,必须为 switchTab 示例代码如下: <navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator> 导航到非 tabBar 页面 非 tabBar 页面指的是没有被配置为…
  • qqq
    WXML 模板语法 数据绑定 数据绑定的基本原则 在 data 中定义数据 在页面对应的 .js 文件中,把数据定义到 data 对象中即可: // pages/index.js Page({ data: { // 字符串类型数据 info: 'init data', // 数组类型的数据 msgList: [ { msg: 'hello' }, { msg: 'world' } ], imgSrc: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg', randomNum1: Math.random() * 10 // 生成 10 以内的随机数 } }) Mustache 语法的格式 在 WXML 中使用数据 Mustache 语法的舒雅应用场景如下: 绑定内容 绑定属性 运算(三元运算、算数运算等) 把 data 中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量抱起来即可。语法格式为: <view>{{ 要绑定的数据名称 }}</view> // pages/ind…
  • qqq
    小程序简介 文档:https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/ 小程序与普通网页开发区别 1. 运行环境不同 网页运行在浏览器环境中;小程序运行在微信环境中 2. API 不同 由于运行环境的不同,所以小程序中,无法调用 DOM 和 BOM 的 API。 但是,小程序中可以调用微信环境提供的各种 API,例如: 地理定位 扫码 支付 3. 开发模式不同 网页的开发模式:浏览器 + 代码编辑器 小程序有自己的一套标准开发模式: 申请小程序开发账号 安装小程序开发者工具 创建和配置小程序项目 第一个小程序 注册开发账号 https://mp.weixin.qq.com 获取小程序 AppID 首页 --> 设置 --> 基本设置 --> 帐号信息 安装微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 微信开发者工具是官方推荐使用的小程序开发工具,它提供的主要功能如下: 快速…
  • qqq
    Pinia 官网:https://pinia.vuejs.org/zh/ 一个全新的用于 Vue 的状态管理库 介绍 pinia 最初是 一个实验,目的是在2019年11月左右重新设计 Vue 状态管理在 Composite API 上的样子,也就是下一代 Vuex 之前的 Vuex 主要服务于 Vue2,选项式 API 如果想要在 Vue3 中使用 Vuex,需要使用它的版本4 只是一个过渡的选择,还有很大缺陷 所以在 Vue3 伴随着组合式 API 诞生之后,也设计了全新的 Vuex:Pinia,也就是 Vuex5 提案链接:https://github.com/vuejs/rfcs/pull/271 Vue2 和 Vue3 都支持 处理初始化安装和 SSR 配置之外,两者的 API 都是相同的 官方文档注意针对 Vue3 进行说明,必要的时候会提供 Vue2 的注释 支持 Vue DevTools 跟踪 actions、mutations 的时间线 在使用容器的组件中就可以观察到容器本身 支持 time-travel 更容易的调试功能 在 Vue2 中 Pinia 使用 Vuex…
  • qqq
    React-Router v6快速上手 一. 简介 react-router :核心模块,包含 React 路由大部分的核心功能,包括路由匹配算法和大部分核心组件和钩子。 react-router-dom:React 应用中用于路由的软件包,包括 react-router 的所有内容,并添加了一些特定于 DOM 的 API,包括但不限于 BrowserRouter、HashRouter 和 Link。 react-router-native: 用于开发 React Native 应用,包括 react-router 的所有内容,并添加了一些特定于 React Native 的 API,包括但不限于 NativeRouter 和 Link。 二. 对比 V5 包大小对比 <Route> 特性变更 path:与当前页面对应的 URL 匹配。 element:新增,用于决定路由匹配时,渲染哪个组件。代替,v5 的 component 和 render。 <Routes> 代替了 <Switch> <Outlet> </Outlet>…
  • qqq
    十五、Mobx https://cn.mobx.js.org npm i mobx@5 1. Mobx 介绍 Mobx 是一个功能强大,上手非常容易的状态管理工具 Mobx 背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得 Mobx 利用 getter 和 setter 来收集组件的数据依赖关系,从而在数据发生变化的时候精确知道哪些组件需要重绘,在界面的规模变大的时候,往往会有很多细粒度更新 (vue类似) 2. Mobx 与 redux 的区别 Mobx 写法上更偏向于 OOP 对一份数据直接进行修改操作,不需要始终返回一个新的数据 并非单一 store,可以多 store Redux 默认以 JavaScript 原生对象形式存储数据,而 Mobx 使用可观察对象 优点: 学习成本小 面向对象编程,而且对 TS 友好 缺点: 过于自由:Mobx 提供的约定及模版代码很少,代码编写很自由,如果不做一些约定,比较容易导致团队代码风格不统一 相关的中间件很少,逻辑层业务整合是问题 3. 支持装饰器 npm i @babel/core @babel/plugin-proposal…
  • qqq
    八、React 生命周期 1. 初始化阶段 2. 运行中阶段 3. 销毁阶段 老生命周期的问题 componentWillMount,在 ssr 中这个方法将会被多次调用,所以会重复触发多遍,同时在这里如果绑定事件,将无法解绑,导致内存泄漏,变得不够安全高效逐步废弃 componentWillReceiveProps 外部组件多次频繁更新传入多次不同的 props,会导致不必要的异步请求 componetWillupdate,更新前记录 DOM 状态, 可能会做一些处理,与 componentDidUpdate 相隔时间如果过长,会导致状态不太信 新生命周期的提替代 getDerivedStateFromProps 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子),返回一个对象作为新的 state,返回 null 则说明不需要在这里更新 state // 老的生命周期的写法 componentDidMount() { if(this.props.value !== undefined){ this.setState({ current:this.props.valu…