- 博客(83)
- 收藏
- 关注
原创 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
395
原创 微信小程序开发——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
9996
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
652
原创 小程序开发 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
796
原创 小程序eventChannel传递参数时报错
报错信息:“MiniProgramErrornthis.getOpenerEventChannel(…).on is not a functionn”原因:如果页面不是 navigateTo 跳转进入的, getOpenerEventChannel 将返回空对象。可以检查页面是否可能存在其他进入来源,如首页启动、分享卡片跳入等。处理:getOpenerEventChannel获取到对象之后做兼容处理:const eventChannel = this.getOpenerEventChannel();
2022-01-26 18:13:57
2127
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
685
原创 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
122
原创 使用 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
2371
原创 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
3533
原创 微信小程序 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
1979
原创 点击按钮复制功能
复制操作是基于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
2284
原创 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
92
原创 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
498
原创 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
141
原创 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
518
原创 Less、scss、stylus 对比
都有变量、混入、函数、嵌套、继承、颜色函数等的概念。一、关于声明变量Less使用@变量名:值Scss使用$变量名:值Stylus使用 变量名=值,$可加可不加二、关于作用域Scss没有全局作用域的概念,在Sass样式中定义变量,调用变量是没有全局变量一个概念存在,因此在Sass中定义了相同变量名时,在调用之时千万要多加小心,不然会给你的样式带来错误。Less和Styuls中的作用域和其他程序语言中的作用域非常的相同,他首先会查找局部定义的变量,如果没有找到,会像冒泡一样,一级一级往下查找,直到
2020-11-26 22:50:12
1109
原创 关于网页的基本性能优化
一、网页优化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
328
原创 通过脚手架创建 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
127
原创 console的常用方法
console.log("输出普通信息"); console.warn("输出警告信息"); console.info("输出提示信息"); console.error("输出错误信息"); console.debug("输出调试信息"); console.group("开始一组输出信息"); console.groupEnd("结束一组输出信息"); console.time("必须传入一个..
2020-11-20 22:05:33
210
转载 利用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
8498
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
830
原创 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
120
原创 使用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
133
原创 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
255
原创 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
242
原创 vue组件生命周期、vue实例的计算属性和侦听器——0807
一、实例的生命周期钩子每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。1、钩子函数触发的时间beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。created :实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数
2020-10-21 21:07:02
162
原创 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
194
原创 node.js Stream(流) 和 EJS 模板引擎——0822
node.js 中的 Stream(流)、web服务器静态文件托管、事件驱动 EventEmitter、web服务器静态文件托管+get post 路由传值、ejs模板引擎、模拟express路由封装
2020-09-03 01:07:53
343
原创 node.js express框架——0825
express框架、express框架路由、路由的模块化封装、express中使用中间件、express中使用ejs模板引擎
2020-08-28 01:12:53
228
原创 node.js 静态服务搭建 和 模块化系统——0821
http 模块和 staticWeb 静态服务搭建、url 路径解析模块、commonjs、自定义模块、第三方模块和package.json、内置模块、fs文件系统
2020-08-24 22:00:54
180
原创 vue组件——0804
一、什么是组件组件是可复用的 Vue 实例,且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用。每用一次组件,就会有一个它的新实例被创建。一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。如果 Vue 没有这条规则,组件被复用时,组件中的数据就会互相影响。data: function () { return { count: 0 }}二、组件的注册为了能在模板中使用,组件必须先注
2020-08-20 17:34:33
288
原创 vue 项目文件及相关配置——0801
1、完整版:README.md 命令文件。package-lock.json 默认配置文件,自带的包工具。package.json 项目配置文件,包含项目基本信息、安装的第三方包工具版本信息等。index.html 项目的网页入口文件,默认设置,不需要操作。.postcssrc.js 配置解析文件的,不需要操作。.gitignore 写后缀名的,不需要操作。.editorconfig 不需要操作。static 静态资源管理文件,一般用来放网页中静态的css或静态的图片,就可以用路径直接拿
2020-08-03 20:13:44
322
原创 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
158
原创 ajaxSettings 获取或设置ajax 全局配置——0725
一、什么是 $.ajaxSettings$.ajaxSettings获取或设置ajax配置,相当于获取jQuery.ajax(url,[settings])方法中的settings。$.ajaxSettings的所有属性都可以设置,设置完就是全局的。比如:要给每个请求都加一个请求头,挨个修改太麻烦,可以用以下方式。$.ajaxSettings.beforeSend= function(XMLHttpRequest) { XMLHttpRequest.setRequestHeader
2020-07-30 15:38:52
4495
原创 FormData 对象的使用——0725
一、什么是FormData对象?FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。二、从零开始创建FormData对象——发送带键数据你可以自己创建一个FormData对象,然后调用它的append()方法来添加字段,如下:
2020-07-30 15:01:00
468
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人