weixin_46351593的博客

原创 小程序笔记七——生命周期

文章目录生命周期应用生命周期示例代码onLaunch(Object object)onShow(Object object)onHide()onError(String error)onPageNotFound(Object object)onUnhandledRejection(Object object)onThemeChange(Object object)页面生命周期示例代码生命周期回调函数onLoad(Object query)onShow()onReady()onHide()onUnload()

原创 小程序笔记六——自定义组件（详细）！

文章目录自定义组件组件模板和样式组件模板模板数据绑定组件 wxml 的 slot组件样式组件样式隔离外部样式类引用页面或父组件的样式虚拟化组件节点Component构造器Component(Object object)使用 Component 构造器构造页面组件间通信与事件组件间通信监听事件触发事件获取组件实例组件的声明周期定义生命周期方法组件所在页面的生命周期behaviors组件中使用同名字段的覆盖和组合规则内置 behaviors组件间关系定义和使用组件间关系关联一类组件relations 定义段数据

原创 小程序笔记五——常用组件介绍

文章目录常用组件viewBug & TiptextBug & TipimageBug & Tipswiper与swiper-itemswiperchange事件 source 返回值Bug & Tipswiper-itemnavigator使用限制关于调试Bug & Tiprich-textnodes受信任的HTML节点及属性Bug & Tipbutton样式开发能力Bug & Tipiconradio与radio-groupradioradio-gr

原创 小程序笔记四——WXSS样式语言使用

文章目录WXSS尺寸单位样式导入内联样式选择器全局样式与局部样式WXSSWXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有：尺寸单位样式导入尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行

原创 小程序笔记三——事件系统详解

文章目录事件系统事件绑定简单案例什么是事件事件的使用方式使用WXS函数响应事件事件详解事件分类普通事件绑定绑定并阻止事件冒泡互斥事件绑定事件的捕获阶段事件对象typetimeStamptargetcurrentTargetdatasetmarktouchesTouch 对象CanvasTouch 对象changedTouchesdetail事件系统事件绑定简单案例首先需要给input标签绑定input事件，使用bindInput：<input type="text" bindinput="

原创 小程序笔记二——模板语法WXML详解

文章目录模板语法（WXML）数据绑定简单绑定内容组件属性(需要在双引号之内)控制属性(需要在双引号之内)关键字(需要在双引号之内)运算三元运算算数运算逻辑判断字符串运算数据路径运算组合数组对象列表渲染wx:forblock wx:forwx:key条件渲染wx:ifblock wx:if`wx:if` vs `hidden`模板定义模板使用模板模板的作用域引用importimport 的作用域include模板语法（WXML）WXML（WeiXin Markup Language）是框架设计的一套标

原创 小程序笔记一——介绍、环境准备、目录结构以及配置文件的介绍

文章目录微信小程序介绍为什么是微信小程序？微信小程序历史环境准备注册账号获取APPID开发工具我的第一个小程序微信开发者工具介绍小程序结构目录小程序文件结构和传统web对比目录结构允许上传的文件小程序配置文件全局配置pageswindowtabBar页面配置sitemap 配置配置项rulesmatching 取值说明微信小程序介绍微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。微信小程序，简称小程序，英文名Mini Program，是一种不需

原创 vue图片懒加载vue-lazyload的使用

文章目录介绍图片懒加载什么是懒加载？为什么要懒加载？懒加载的实现原理？使用vue-lazyload完成图片懒加载通过npm安装使用想要监听的事件介绍图片懒加载什么是懒加载？懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。为什么要懒加载？懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网

原创 vscode中定义vue模板并将name默认为文件名

配置模板代码在vscode中找到用户代码片段再新建一个vueTemplate.json文件：复制下面的代码覆盖vueTemplate.json中的默认内容：{ "vue-template": { "prefix": "", "body": [ "<template>", " $0", "</template>", "", "<script>", "ex

原创 vue项目购物车功能中vuex的运用

文章目录介绍购物车添加商品功能store文件夹下目录结构actions.js文件：mutations.js文件：mutations-type.js文件：index.js文件：购物车内商品数量显示getters.js文件：总结介绍最近在学习做vue的一个购物街商城的一个项目，其中购物车功能用到了vuex的知识，这里做一个回顾，总结下用到的功能，加深一下回顾。首先，由于项目之前的功能没有用到vuex，所以安装vuexnpm install vuex --save然后我们将商品页点击购物车，按钮

原创 vuex踩坑——Uncaught TypeError: vuex__WEBPACK_IMPORTED_MODULE_1__.default.store is not a constructor

今天做项目遇到一个问题，是使用vuex的Store首字母大写的问题，现在解决了，并记录下。这是store/index.js文件：import Vue from 'vue'import Vuex from 'vuex'// 安装插件Vue.use(Vuex)// 创建Store对象const store = new Vuex.store({ state: { cartList: [] }, mutations: { addCart(state, payload

原创 了解防抖debounce函数与节流throttle函数

文章目录作用防抖函数节流函数比较作用优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。防抖函数在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。对于函数防抖，有以下几种应用场景：给按钮加函数防抖防止表单多次提交。对于输入框连

原创 JavaScript事件循环

文章目录运行时概念可视化描述栈堆队列事件循环执行至完成添加消息零延迟多个运行时互相通信运行时概念可视化描述栈函数调用形成了一个由若干帧组成的栈。function foo(b) { let a = 10; return a + b + 11;}function bar(x) { let y = 3; return foo(x * y);}console.log(bar(7)); // 返回 42当调用 bar 时，第一个帧被创建并压入栈中，帧中包含了 bar

原创 项目中better-scroll的常用配置、插件介绍

文章目录介绍最常见的应用场景是列表滚动滚动原理安装全部安装按需安装（推荐）插件使用插件常用插件pullUpobserve-domobserve-image常用配置项clickprobeType常用注意事项在vue中使用建议用ref属性绑定scroll对象介绍BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window)的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩

原创 mint-ui框架swipe轮播图的使用

文章目录安装mint-ui引入mint-ui完整引入按需引入（推荐）Swipe - 轮播图APISlotmt-swipemt-swipe-item安装mint-ui推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。npm i mint-ui -S引入mint-ui完整引入在 main.js 中写入以下内容：import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css

原创 MAC下输出目录结构

现在你也想要输出下面的目录树层结构么，按照如下步骤操作即可：.├── App.vue├── assets│ ├── css│ ├── img│ └── logo.png├── common│ ├── const.js│ ├── mixin.js│ └── utils.js├── components│ ├── common│ └── content├── main.js├── network├── router├── store└── vi

原创 网络请求封装axios

原因：为了解除第三方网络请求模块与项目之间的强耦合，防止出现第三方网络请求模块弃用后，需要大规模修改项目源码的现象。步骤：定义一个request.js 对axios第三方HTTP库进行封装import axios from 'axios'export function request(config) { // 创建axios的实例 const instance = axios.create({ baseURL: 'http://152.136.185.210:7878/api/

原创 npm ERR! code ENOSELF npm ERR! Refusing to install package with name “axios“ under a package npm ERR

npm ERR! code ENOSELFnpm ERR! Refusing to install package with name "axios" under a packagenpm ERR! also called "axios". Did you name your project the samenpm ERR! as the dependency you're installing?npm ERR! npm ERR! For more information, see:npm E.

原创 NavigationDuplicated: Avoided redundant navigation to current location: “/xxx“.

错误：NavigationDuplicated: Avoided redundant navigation to current location: “/xxx”.原因：避免到当前位置的冗余导航，是指路由重复。虽然对项目没有太大影响，但是看到红字十分影响心情。解决方法：在router文件夹下的index.js文件中添加如下代码：// 获取原型对象中的push方法const originalPush = VueRouter.prototype.push// 修改原型对象中的push方法

原创 Vue-router知识导图

原创 Vue代码风格指南（记住并运用）——养成好习惯！！！

文章目录风格指南风格指南总结了官方推荐的代码风格指南，用Xind做了一份思维导图：