erha blog

页面导航小程序中实现页面导航的两种方式 声明式导航 在页面上声明一个导航组件 通过点击组件实现页面跳转 编程式导航 调用小程序的导航API，实现页面的跳转 声明式导航导航到 tabBar 页面tabBar页面指的是被配置为tabBar的页面。 在使用组件跳转到指定的tabBar页面时，需要指定url属性和 open-type属性，其中: url表示要跳转的页面的地址，必须以 / 开头 open-type表示跳转的方式，必须为switchTab 示例代码如下: 1<navigator url="/pages/messsage/messsage" open-type="switchTab">导航到消息页面</navigator> 导航到非 tabBar 页面非tabBar页面指的是没有被配置为tabBar的页面。 在使用组件跳转到普通的非tabBar页面时，则需要指定 url 属性和 open-type 属性，其中: url 表示要跳转的页面的地址，必须以 / 开头 open-type 表示跳转的方 ...

小程序的模板与配置WXML 模板语法数据绑定的基本原则 在 data 中定义数据 在 WXML 中使用数据 在 data 中定义页面的数据1234567891011121314Page({ /** * 页面的初始数据 */ data: { // 字符串类型的数据 info:'init data', // 数组类型的数据 msgList:[{msg:'hello'},{msg:'world'}], imgSrc:'https://pic.imgdb.cn/item/62791e7a0947543129da29e9.jpg', randomNum: Math.random() * 10, // 生成 10 以内的随机数 randomNum2:Math.random().toFixed(2) },}) 微信开发 ...

小程序的起步创建小程序申请小程序开发账号 使用浏览器打开https://mp.weixin.qq.com/，点右上角“立即注册” 选择注册账号的类型为小程序 填写账号信息，邮箱激活，信息登记 获取小程序的 AppID登录小程序管理后台 点击左侧开发菜单->开发设置 就可以看到小程序的AppID了 安装小程序开发者工具登录小程序管理后台 点击左侧开发菜单->开发工具 下载安装 创建小程序项目 打开微信开发者工具扫码登录 选择小程序菜单，点击+号，新建项目 填写项目信息（此时需要小程序的AppID）后端服务选择不使用云服务 语言选择JavaScript 确定完成创建 微信开发者工具的注意点代理默认使用系统代理建议改成不使用任何代理（防止用科学上网时影响到程序正常运行） 菜单栏的帮助里面可以快速的访问小程序的组件文档和API文档 调试器机型建议设置为iPhone6/7/8 小程序的目录结构 pages文件夹 用来存放所有小程序的页面 utils文件夹 用来存放工具性质的模块（例如：格式化时间的自定义模块） app.js 小程序项目的 入口文件 app.json 小程序项目的 ...

Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% …… 2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking …… 3.拥抱TypeScript Vue3可以更好的支持TypeScript 4.新的特性 Composition API（组合API） setup配置 ref与reactive watch与watchEffect provide与inject …… 新的内置组件 Fragment Teleport Suspense 其他改变 新的生命周期钩子 data 选项应始终被声明为一 ...

TypeScript是什么TypeScript（简称:ts） 是JavaScript的超集（js有的ts都有）。 TypeScript = Type + JavaScript （在js基础之上，为js添加了类型支持）。 TypeScript是微软开发的开源编程语言，设计目标是开发大型应用。可以在任何运行JavaScript的地方运行。 TypeScript为什么要为JS添加类型支持？js的类型系统存在“先天缺陷”，js代码中绝大部分错误都是类型错误 优势一：类型化思维方式，使得开发更加严谨，提前发现错误，减少改 Bug 时间。 优势二：类型系统提高了代码可读性，并使维护和重构代码更加容易。 优势三：补充了接口、枚举等开发大型应用时 JS 缺失的功能。 Vue 3 源码使用 TS 重写，释放出重要信号：TS 是趋势。 安装解析 TS 的工具包typescript：就是用来解析 TS 的工具包。提供了 tsc 命令，实现了 TS -> JS 的转化。 1npm i -g typescript 简化执行TS的步骤简化方式：使用 ts-node 包，“直接”在 Node.js ...

Vue 项目打包vue3 + vue-router + element-plus 开发模式配置123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149// webpack.dev.jsconst path = require("path");const {DefinePlugin} = require('webpack&#x ...

loader 原理loader 概念帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 loader 执行顺序 分类 pre： 前置 loader normal： 普通 loader inline： 内联 loader post： 后置 loader 执行顺序 4 类 loader 的执行优级为：pre > normal > inline > post 。 相同优先级的 loader 执行顺序为：从右到左，从下到上。 例如： 1234567891011121314151617// 此时loader执行顺序：loader3 - loader2 - loader1module: { rules: [ { test: /\.js$/, loader: "loader1", }, { test: /\.js$/, loader: "loader2", }, { ...

提升开发体验SourceMap为什么开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子： 12345678910111213141516171819202122/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or dis ...

生产模式介绍生产模式是开发完成代码后，我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化，让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度 基本配置1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192// config/webpack.prod.jsconst path = require("path"); // Node.js的核心模块，专门用来处理文件路径const ESLintWebpackPlugin = require("eslint-webpack-plugin"); // 使用 eslint 来查找和修复 JavaScript 代码中的问题的插件const HtmlWebpackPlugin ...

开发模式开发模式顾名思义就是开发代码时使用的模式。 这个模式下主要做两件事： 编译代码，使浏览器能识别运行 开发时有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以要加载配置来编译这些资源 代码质量检查，树立代码规范 提前检查代码的一些隐患，让代码运行时能更加健壮。 提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。 基本配置123456789101112131415161718192021222324// config/webpack.dev.js// Node.js的核心模块，专门用来处理文件路径const path = require("path");module.exports = { // 入口 // 相对路径和绝对路径都行 entry: "./src/main.js", // 输出 output: { path: undefined,// 开发模式没有输出，不需要指定输出目录 // filename: 输出文件名 filena ...