- 博客(83)
- 收藏
- 关注
RSS订阅原创 linear-gradient 绘制不规则四边形
.box { width: vw(100); height: vw(40); background: linear-gradient(120deg, #dfe2ef, #dfe2ef vw(80), transparent vw(82), transparent);}效果：注意：两个色衔接处需要间隔1个像素，否则衔接处会呈锯齿状。
2022-04-21 15:51:38
377
原创 微信小程序开发——scroll-view里边放fixed元素后样式错乱
问题描述：scroll-view,里面的自定义组件中包含一个fixed弹框，但这个弹框无论怎么设置层级，只能显示在当前scroll-view的有效宽度内。安卓、开发工具都正常。ios不行。原因：因为 iOS 下加了 -webkit-overflow-scrolling: touch，这个会产生滚动惯性，体验更好，但会改变 fixed 的行为，建议不在 scroll-view 里有 fixed 元素解决：将scroll-view标签改为view，并设置样式： overflow-x: hidden
2022-03-14 10:24:31
9914
1
原创 git commit 强行终止后如何操作
执行 git add somefile 的时候，出现 如下 错误：If no other git process is currently running, this probably means agit process crashed in this repository earlier. Make sure no other gitprocess is running and remove the file manually to continue.解决方法：rm -f ./.git/i
2022-01-27 10:00:02
625
原创 小程序开发 tips——2
1、getCurrentPages 获取到某一个页面后，可以直接 setData 更新页面数据：let currentPages = getCurrentPages();let prevPage = currentPages[currentPages.length - 2]; //上一个页面// 直接调用上一个页面的setData()方法，把数据存到上一个页面中去prevPage.setData({ newCustomerCoupon,});2、image onload 时获取图片宽高：
2022-01-26 18:28:40
779
原创 小程序eventChannel传递参数时报错
报错信息：“MiniProgramErrornthis.getOpenerEventChannel(…).on is not a functionn”原因：如果页面不是 navigateTo 跳转进入的， getOpenerEventChannel 将返回空对象。可以检查页面是否可能存在其他进入来源，如首页启动、分享卡片跳入等。处理：getOpenerEventChannel获取到对象之后做兼容处理：const eventChannel = this.getOpenerEventChannel();
2022-01-26 18:13:57
1912
1
原创 小程序订阅消息报错
报错信息：requestSubscribeMessage:fail can only be invoked by user TAP gesture低版本订阅消息api必须在点击事件中触发（直接调用订阅消息api就会出现以上报错），也可在提交表单时弹出确认弹框再调用订阅消息：wx.showModal({ title: '提示', content: '这是一个模态弹窗', success: function (res) { if (res.confirm) {
2022-01-12 17:09:08
626
原创 tips-one——2021-06-24
1、flex-1由于子元素过宽超出父元素宽度，给flex-1元素设置overflow：hidden。2、连续的数字字母不会换行——word-wrap: break-word;word-break: break-all;3、微信小程序component里边监听属性值的变化：property 里边定义property时添加observer属性：properties: { show: { // 属性名 type: Boolean, value: false
2021-06-24 16:52:09
114
原创 使用 sortablejs 实现拖拽排序
sortable.js 官网——配置项：点击查看举例：el-table 拖拽排序js 代码：//引入 sortablejsimport Sortable from "sortablejs"; data() { return { list: [] // 列表数据 }; },methods:{ //排序 async listSort() { let ids = []; //排序好的id集合 this.list.forEach
2021-03-02 00:38:26
2316
原创 Element UI —— el-form 自定义验证规则
自定义验证规则：金额不能超过两位小数html代码： <el-form :model="formData" :rules="rules" ref="msgForm" label-width="120px" > <el-form-item label="商品名称:" prop="name"> <el-input v-model="formData.name"
2021-03-02 00:10:59
3342
原创 微信小程序 input 数据双向绑定
原理：给input的data-prop绑定一个字符串，和value绑定的变量名一致，给input绑定change事件，事件触发时获取input的value值，赋值给对应的变量（通过该input上data-prop绑定的字符串确定）wxml页面：<input value="{{address_detail}}" data-prop="address_detail" bind:change="onChange" type="text"></input><input valu
2021-01-31 21:14:59
1914
原创 点击按钮复制功能
复制操作是基于input输入框的，所以得事先生成一个输入框来存放需要复制的文本数据。举例：el-table 中点击按钮复制商品链接：<el-table-column label="商品链接" min-width="120"> <template slot-scope="scope"> <el-button @click="copyUrl(scope.row.goodsurl)" round>复制链接</el-button> </te
2021-01-19 18:00:57
2269
原创 React Hooks 的使用
官方文档：https://react.docschina.org/docs/hooks-overview.htmlHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 。1、useState()通过在函数组件里调用useState()来给组件添加一些内部 state。React 会在重
2020-12-01 00:49:32
82
原创 React 实现数据双向
一、手动实现数据双向React中的数据绑定是单项的。可以通过表单元素标签 onchange事件实现数据双向。<input type="text" value={this.state.txt} onChange={this.changeData} /> // react 当中手动实现数据双向 changeData = (e) => { //获取当前的目标元素 let ele = e.target; //获取目标元素的v
2020-11-29 23:18:57
479
原创 React 事件 和 方法
一、方法的声明方法声明的位置和constructor同级。1、普通方法 //普通方法 this指针undefined sendMsg = function () { console.log("事件执行", this); }this指针undefined。要想this指向当前组件，需要在调用事件方法时绑定this。<button onClick={this.sendMsg.bind(this)}>按钮普通方法</button&g
2020-11-29 22:39:15
119
原创 React 组件、数据渲染
一、声明组件，创建组件文件下面是使用es6的 class 类来声明组件，也可以使用函数式创建（这里不做介绍，见官方文档）import React, { Component } from 'react';//组件的类声明class Home extends Component{ render(){ return <div>我是组件</div>; }}//组件暴露export default Home;组件里面有多个元素的时候注意：在
2020-11-29 20:29:43
498
原创 Less、scss、stylus 对比
都有变量、混入、函数、嵌套、继承、颜色函数等的概念。一、关于声明变量Less使用@变量名：值Scss使用$变量名：值Stylus使用 变量名=值，$可加可不加二、关于作用域Scss没有全局作用域的概念，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。Less和Styuls中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到
2020-11-26 22:50:12
1067
原创 关于网页的基本性能优化
一、网页优化1、静态资源压缩借助构建工具（webpack、gulp）适当压缩图片、脚本及样式等网页静态资源。2、CSS雪碧图、base64内联图片将站内小图标合并成一张图，使用css定位截取对应图标；适当使用内联图片。3、样式置顶、脚本置底页面是一个逐步呈现的过程，样式置顶能更快呈现页面给用户；4、使用外链的css和js多个页面引用公共静态资源，资源复用减少额外的http请求。5、避免空src的img标签空src的图片依然会发起http请求。6、避免在HTML中缩放图片图片尽量按需求使
2020-11-26 18:04:26
311
原创 通过脚手架创建 React 项目
一、yarnyarn 类似于 npm/cnpm ，都是包管理工具，但是 yarn 是崭新的，经过重新设计的 npm 客户端，于2016年10月发布，相比于 npm，yarn 在运行速度上有显著的提升，安装时间变少，功能上也有很多改进。yarn 安装：cnpm install -g yarn安装完成之后检测版本号：yarn -v二、react 环境搭建1、安装脚手架：cnpm install -g create-react-app2、通过脚手架创建项目：项目创建完成之后会在项目目
2020-11-23 02:00:01
121
原创 console的常用方法
console.log("输出普通信息"); console.warn("输出警告信息"); console.info("输出提示信息"); console.error("输出错误信息"); console.debug("输出调试信息"); console.group("开始一组输出信息"); console.groupEnd("结束一组输出信息"); console.time("必须传入一个..
2020-11-20 22:05:33
197
转载 利用v-model实现父子组件传值——子父组件同步更新
v-model介绍v-model 是Vue的一个很大的特色，可以实现双向数据绑定。v-model本质上是语法糖，它负责监听用户的输入事件以更新数据。v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：text 和 textarea 使用 value 属性和 input 事件；checkbox 和 radio 使用 checked 属性和 change 事件；select 字段将 value 作为 prop 并将 change 作为事件。如何巧妙利用 v-model实现父子组
2020-11-20 21:25:18
6954
1
原创 Vue使用 Element UI 和 mint-UI——0808
一、Element UI——PC端1、 安装2、 引入element UI，并给vue使用——下边是全部引入，也可以按需引入3、 引入css文件4、 配置 element UI 的字体解析规则5、使用插件二、mint-UI ——手机端1、安装2、引入mint-ui——可以全局引入、可以按需引入下边是全局引入：3、 引入css文件4、 使用在当前组件里边注册，之后就可以使用了...
2020-10-24 12:19:41
815
原创 Vuex ——0808
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（全局数据状态管理）。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。1、安装vuex：cnpm install --save-dev vuex2、在src 根目录下新建Vuex文件夹，该文件夹下新建 vuex.js 文件，做全局状态管理。内容如下：import vue from 'vue';import Vuex from 'vuex';vue.use(Vuex);let CONST_
2020-10-24 01:57:03
112
原创 使用mockjs——0808
mockjs官方文档1、安装mockjscnpm install --save-dev mockjs2、在src根目录下新建 mock.js 文件，内容如下：//引入import MockData, { Random } from 'mockjs';//可以设置超时时间 可选MockData.setup({ timeout: 1000});const url = "http://www.maodou.com";//拦截ajax后，返回固定的数据MockData.mo
2020-10-22 21:56:15
123
原创 Axios、axios拦截器、fetch-jsonp ——0807
一、axios——vue数据请求插件用来请求 cross 跨域的 api 接口的插件。1、axios的使用1、安装axios：cnpm install --save-dev axios2、引入并使用全局引入并关联、使用main.js里边：import Axios from 'axios'Vue.prototype.$axios=Axios;组件里边使用：//组件挂载完成之后进行数据请求mounted(){ this.$axios .get("") //
2020-10-22 19:16:57
234
原创 vue-router——08.07
Vue Router 是Vue.js的官方路由器。学习Vue Router之前，先了解路由中的三个基本的概念 route, routes, router。1、 route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。2、 routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 =&
2020-10-22 16:34:34
212
原创 vue组件生命周期、vue实例的计算属性和侦听器——0807
一、实例的生命周期钩子每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。1、钩子函数触发的时间beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。created ：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数
2020-10-21 21:07:02
158
原创 vue 过滤器、自定义指令——0805
一、过滤器过滤器的作用： 处理数据。过滤器可以用在两个地方： 双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由 “|”（管道符）指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>过滤器是 JavaSc
2020-10-20 20:22:52
185
原创 node.js Stream(流) 和 EJS 模板引擎——0822
node.js 中的 Stream（流）、web服务器静态文件托管、事件驱动 EventEmitter、web服务器静态文件托管+get post 路由传值、ejs模板引擎、模拟express路由封装
2020-09-03 01:07:53
323
原创 node.js express框架——0825
express框架、express框架路由、路由的模块化封装、express中使用中间件、express中使用ejs模板引擎
2020-08-28 01:12:53
199
原创 node.js 静态服务搭建 和 模块化系统——0821
http 模块和 staticWeb 静态服务搭建、url 路径解析模块、commonjs、自定义模块、第三方模块和package.json、内置模块、fs文件系统
2020-08-24 22:00:54
171
原创 vue组件——0804
一、什么是组件组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。每用一次组件，就会有一个它的新实例被创建。一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。如果 Vue 没有这条规则，组件被复用时，组件中的数据就会互相影响。data: function () { return { count: 0 }}二、组件的注册为了能在模板中使用，组件必须先注
2020-08-20 17:34:33
274
原创 vue 项目文件及相关配置——0801
1、完整版：README.md 命令文件。package-lock.json 默认配置文件，自带的包工具。package.json 项目配置文件，包含项目基本信息、安装的第三方包工具版本信息等。index.html 项目的网页入口文件，默认设置，不需要操作。.postcssrc.js 配置解析文件的，不需要操作。.gitignore 写后缀名的，不需要操作。.editorconfig 不需要操作。static 静态资源管理文件，一般用来放网页中静态的css或静态的图片，就可以用路径直接拿
2020-08-03 20:13:44
310
原创 vue 项目环境安装——0801
安装Nodejs地址：http://nodejs.cn/检测Nodejs是否安装成功：cmd (在电脑上直接搜索) 里边输入 node –v 检测版本号，如果检测不出来，并且电脑是第一次安装Nodejs ，需要在控制面板配置环境变量。vue 集成开发环境必须借助npm 远程下载包 https://www.npmjs.com/ ， 开发不使用npm ，使用的cnpm。可以在淘宝镜像查找cnpm安装命令（百度搜索 淘宝镜像），在cmd里边输入安装命令下载。registry=https:..
2020-08-02 15:45:53
150
原创 ajaxSettings 获取或设置ajax 全局配置——0725
一、什么是 $.ajaxSettings$.ajaxSettings获取或设置ajax配置，相当于获取jQuery.ajax(url,[settings])方法中的settings。$.ajaxSettings的所有属性都可以设置，设置完就是全局的。比如：要给每个请求都加一个请求头，挨个修改太麻烦，可以用以下方式。$.ajaxSettings.beforeSend= function(XMLHttpRequest) { XMLHttpRequest.setRequestHeader
2020-07-30 15:38:52
4391
原创 FormData 对象的使用——0725
一、什么是FormData对象？FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。二、从零开始创建FormData对象——发送带键数据你可以自己创建一个FormData对象，然后调用它的append()方法来添加字段，如下：
2020-07-30 15:01:00
442
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人