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: {} }

✨ 在介绍功能之前，先看看这款插件解决了哪些实际开发痛点： 批量操作效率：一次性完成多个数据项的增删改查，告别重复劳动 复杂JSON处理：内置强大编辑器，轻松处理嵌套对象和数组 现代化界面：直观易用的UI设计，降低学习成本 ✨ 核心功能亮点 📊 存储支持 Storage Manager支持localStorage存储类型： 持久化存储：完整管理localStorage数据，支持页面刷新后的数据保留 自动检测：打开插件即自动读取当前页面的所有存储数据，无需手动刷新 🔍 强大数据操作，得心应手 插件提供了全方位的数据管理功能，满足日常开发的各种需求： 实时搜索过滤：支持按键名或值内容快速定位数据，支持模糊匹配 直观编辑界面：点击即编辑，无需复杂操作，修改立即生效 批量管理：一键清空所有数据，或批量编辑多个数据项 安全操作：所有修改都有即时反馈，防止误操作导致的数据丢失 📝 JSON编辑，复杂数据轻松应对 针对开发中常见的复杂JSON数据，Storage Manager内置了编辑器： 多模式编辑：支持树形、代码、表单、文本和预览五种编辑模式 智能格式化：自动格式化JSON数据，缩进清晰…

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)： 你…

[文档](快速开始 – 阿里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)

环境变量 实际开发中，有多种环境，如： 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…

简介 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）。 框架…

框架环境和基本使用 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 输出目录 ├──…

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 } ] }…

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…

使用 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…

自定义组件 创建组件 在项目的根目录中，鼠标右键，创建 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 全局配置…

页面导航 页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种： <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 页面指的是没有被配置为…

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…

小程序简介 文档：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 微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下： 快速…

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…

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>…

十五、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…

八、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…

一、React 介绍 1. React 起源与发展 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 2. React 与传统 MVC 的关系 轻量级的视图层库！A JavaScript library for building user interfaces React 不是一个完整的 MVC 框架，最多可以认为是 MVC 中的 V（View），甚至 React 并不非常认可 MVC 开发模式；React 构建页面 UI 的库。可以简单地理解为，React 将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。 3. React 的特性 4. 虚拟DOM 二、create-react-app 全局安装 create-react-app npm install -g create-react-app 创建一个项目 create-react-app 项目名称 如果不想…

使用 CRA 创建支持 TS 的项目 React 脚手架工具 create-react-app（简称：CRA）默认支持 TypeScript 创建支持 TS 的项目命令：npx create-react-app 项目名称 --template typescript 当看到以下提示时，表示支持 TS 的项目创建成功： 更多：在已有项目中使用 TS 相当于非 TS 项目 目录结构主要以下三个变化： 项目根目录中增加了 tsconfig.json 配置文件：指定 TS 的编译选项（比如，编译时是否移除注释） React 组件的文件扩展名变为：*.tsx src 目录中增加了 react-app-env.d.ts React 项目中默认的类型声明文件 React 项目默认的类型声明文件 react-app-env.d.ts 三斜线指令：指定依赖的其他类型声明文件，types 表示依赖的类型声明文件包的名称 告诉 TS 帮我加载 react-scripts 这个包提供的类型声明 react-scripts 的类型声明文件包含了两部分类型： react、react-dom、node 的类型 图片、…