- 博客(178)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue项目做微信js-sdk开发
1、微信js-sdk简介:做微信js-sdk开发,首先要了解微信js-sdk是干什么的,微信官方这里可以查看其实就是调取微信app原生的能力,让h5页面可以调用起来微信扫码、支付、分享等接口2、vue项目中安装wx-js-sdknpm i -S weixin-js-sdk安装过之后再main.js中全局注入import wx from 'weixin-js-sdk'V...
2020-04-30 17:50:10
1930
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 React——JSX、render机制、state状态、组件定义、参数传递、生命周期
vscode 安装 Reactjs code snippets 代码提示 输入rcc 自己补全1、for属性 label标签 与js for循环 冲突,需要使用htmlFor2、class属性 与js保留字class 冲突 ,需要使用className3、style属性 与js style={{color:'red'}}在jsx中只能用对象的方式表示css样式4、三元...
2019-08-10 15:40:11
1093
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue-cli3+vant+vantRem适配方案项目搭建
1、安装vue-cli3脚手架,不懂的去vue-cli官网npm install -g @vue/cli2、通过vue-cli3创建项目vue create my-project创建的过程有很多选项,我的常用选项:简单介绍一下:a、Babel:转码工具,有了它就可以开心的用es2015以上的代码,那必须有!b、Router:前端路由,对一个单页面来说,基本不...
2019-05-22 16:00:14
10428
6
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 h5移动端使用微信picker自定义年-月-日-时选择器
日期选择器很常见,微信也原生提供的有https://weui.io/#picker,但是没有小时,所以只能使用自定义picker,git地址:https://github.com/peng20017/wx-timePicker,如果帮助到你了,别忘了给个星星哦...
2019-03-28 15:16:40
4232
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 JavaScript 笔记整理(1)——基本概念
1、js区分大小写,命名开头首字母必须是字母、下划线(_)或美元符号($),其他字符可以是字母、下划线、美元符号或者数字。2、定义的变量,未初始化,自动取得undefined的值/* * 定义的变量,未初始化,自动取得undefined的值 */var message; //这个变量声明后默认取得了undefined的值alter(message) //'undefi...
2019-02-13 18:27:20
192
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 h5单手实现图片的拖动、旋转、缩放
前一段时间做了微信小程序上的单手图片的拖动、旋转、缩放,没想到有这么多人需要这个功能,有的同学问我能不能做一个h5版的?所以就有了这篇文章前提:本文不适合vue、angular、react框架、仅适用原生开发或者jquery库,因为双向数据绑定的已经在微信上说过了。原理和微信小程序大致相同,只不过不在微信的框架下,没有了双向数据绑定,一切数据的同步展示都需要自己做效果展示。首先还是定义...
2019-01-26 10:43:33
6689
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 H5微信分享、自定义微信分享
在一个h5页面添加微信,分享给微信好友、朋友圈、腾讯微博下面来实现 。需要:1、需要一个企业版的微信公众号(认证过的)2、一台服务器企业版的微信公众号原因:在微信公众平台的接口权限内可以看到,个人版公众号是没有权限自定义微信分享的,所以需要企业版公众号并开通认证。具体步骤:步骤一:绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS...
2018-11-07 17:30:50
48225
22
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 微信小程序云开发使用方法新手初体验
今天看到微信推送了一条小程序云上线通知,作为一个前端er,满怀期待的去看了看,很不错先看看文档上怎么说的:开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力,6的一匹。云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。(就...
2018-09-11 14:38:52
56994
10
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 微信小程序内拖动图片实现移动、放大、旋转
最近接到一个任务,在微信小程序内拖动图片组件实现移动、放大、旋转,并记录这些图片的移动位置,放大比例,旋转角度,在一个画布上生成一张图片,最后保存到手机相册。 我的具体实现思路是这样的: 一共三个功能,可以先把功能分为图片 拖动 和图片旋转缩放, 把图片的缩放和旋转做在了一起。 1.图片移动:可移动的图片肯定是要动态生成的,所以不能写死,应该是个数组,具备...
2018-05-02 18:41:21
42756
119
原创 js判断点击元素外的区域
背景:经常有点击某个元素是选择状态,点击其他位置取消这个状态。思路:可以在元素的点击的时候,给doc绑定一个点击事件来实现。
2023-10-16 14:49:49
388
原创 elIput 输入限制
当输入值的键盘抬起时触发这个事件。this.value表示此输入框的值,/\D/g为正则表达式,用来匹配所有非数字字符;可以通过给input添加onkeyup事件来实现;
2023-07-17 17:30:25
297
原创 vue 拖拽排序
<template> <div> <transition-group tag="div" class="container"> <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',height:'80p...
2021-12-17 09:41:24
259
转载 JavaScript 使用split 以中英文逗号、空格(一个或多个)分割字符串
var str = 'lQT,hello,world,123 6';console.log(str.split(/,|,|\s+/));
2021-09-06 16:45:17
5690
原创 echart中label怎么输出空格
1、试了直接用空格,可以的,不够美观2、 不识别3、\xa0 可以用,截取部分代码formatter: (name) => { const index = data.findIndex(item => item.name === name) const item = data[index] let space = '' for(let i = 1; i<= item.space; i++){ space +
2020-11-05 17:32:39
3464
原创 反编微信小程序源码(破解wxss样式无法恢复的问题)
背景:从17年开始为获取微信小程序源码,网上一直有大神写程序来反编微信小程序的源码,不过现在来看基本都不能用了,有的能用也不能获取样式wxss文件,经过我的不懈努力,找到一些办法,接下来我会一步步讲。工具:夜神模拟器、node环境、反编工具1、开启夜神、下载微信、RE文件管理器2、打开RE文件管理器,设置里面开启root权限3、登录微信、打开你要反编的微信小程序,开启即可,如果是带分包的小程序最好都点点,把分包也加载回来(备注:这一步会很卡,我也是登录了好几次才登录上微信、小程序更是开...
2020-10-30 16:55:18
2227
1
原创 vs code 设置背景图
安装插件 background-coverctrl + shift + p 打开插件添加图片https://wallhaven.cc/
2020-09-28 17:22:40
533
转载 CSS八种让人眼前一亮的HOVER效果
一.发送效果HTML<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>CSS#send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh;}button { background: #5f55af;
2020-09-26 09:30:39
412
1
原创 Vue项目打包上线部署的那些坑
1、跨域问题开发环境的跨域可以直接在vue cofig中设置,这个没啥说的,打包完成后就一点关系都没了解决方案:a.通过jsonp跨域b.通过修改document.domain来进行跨域c.使用window.name跨域d.使用HTML5中新引进的window.postMessage方法来跨域传送数据e.CORS最好的解决办法我觉得还是后端给设置响应头解决跨域2、打包完的版本问题如果你用的npm、或者cnpm,打完包,再上线,过半年,重新install...
2020-09-25 16:33:52
839
原创 css选择最后一个class
选择最后一个class接点.a:last-of-type {//}选择非最后一个接点.a:not(:last-child){//}
2020-09-21 16:48:27
7447
原创 vue项目上线,出现缓存问题
1、html文件加mate标签<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />https://www.cnblogs.com/zdz8207/p/vue-meta-no-c
2020-09-21 09:34:02
1812
1
原创 react hook理解
React 中是通过类似单链表的形式来代替数组的。通过 next 按顺序串联所有的 hook。memoizedState,cursor 是存在哪里的?如何和每个函数组件一一对应的?我们知道,react 会生成一棵组件树(或Fiber 单链表),树中每个节点对应了一个组件,hooks 的数据就作为组件的一个信息,存储在这些节点上,伴随组件一起出生,一起死亡。hooks挂载的时候就会绑定在当前组件上useState跟useEffect的数据都是以链表的形式挂载在hook的变量上...
2020-09-10 15:56:10
569
原创 git reset --hard 回滚以后 以后怎么再回去?
恢复的过程很简单: 通过git log -g命令来找到需要恢复的信息对应的commitid,可以通过提交的时间和日期来辨别,找到执行reset --hard之前的那个commit对应的commitid 通过git branch recover_branch commitid 来建立一个新的分支 这样,就把到commitid为止的代码、各种提交记录等信息都恢复到了recover_branch分支上了。...
2020-08-25 16:59:37
2793
转载 VUE前端界面在iOS中遇到的坑
段时间,公司用前端做了一个微型图片生成界面,通过考虑,选择使用vue多页面进行编写,在界面编写完成之后,本地浏览器进行测试,发现一切都很顺利,然后嵌入到APP端进行联合测试。前期,界面在Android上运行比较顺利,个人以为没什么问题,但是当页面嵌入到iOS中,问题暴露了出来,主要体现在三点上:1、界面使用了瀑布流滑动效果,但是在iOS上滑动效果非常的差,会出现卡顿现象;2、在界面进行点击的时候,界面响应明显要比Android上要慢很多;3、界面按钮点击之后会产生一个灰色的阴影图层;开始,在
2020-08-21 15:39:50
1437
转载 React之css解决方案Styled-Components
安装 yarn add styled-components引入 import styled from 'styled-components'先来个最基础的例子// 创建一个 Title 组件,它将渲染一个附加了样式的 <h1> 标签const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred;`;// 创建一个 Wrapper 组件,它将渲染一个附加了.
2020-08-04 18:23:07
923
转载 umi3 useRequest 配置
1,在app.ts中写入:import { RequestConfig } from 'umi';import config from "@/config"import errorHandler from "@/util/errorHandle" export const request: RequestConfig = { prefix: process.env.NODE_ENV === "production" ? config.baseurl :'api/', credenti
2020-07-23 15:45:55
3480
原创 create-react-app + Typescript脚手架搭建
1、使用create-react-app 创建ts项目yarn create react-app my-test-app --template typescrip2、配置tsconfig.json(1)在根目录下新建文件tsconfig.extend.json{ "compilerOptions": { "baseUrl": "src", "paths": { "@/*": ["./*"] } }}(2)在tsconfig.json中新增
2020-07-20 17:54:34
2231
1
转载 react中优雅的使用typescript
在 react 中使用 ts 的几点原则和变化所有用到jsx语法的文件都需要以tsx后缀命名 使用组件声明时的Component<P, S>泛型参数声明,来代替PropTypes! 全局变量或者自定义的window对象属性,统一在项目根下的global.d.ts中进行声明定义 对于项目中常用到的接口数据对象,在types/目录下定义好其结构化类型声明React组件申明分为:类组件和函数式组件类组件:class App extends Component<IPro.
2020-07-20 10:59:17
945
原创 css同心圆
width: 15px;height: 15px;border-radius: 50%;padding: 3px;border: 1px solid $colorD;background-color: $colorD;background-clip:content-box;重点是background-clip
2020-07-18 16:29:11
531
原创 前端加密
var str = "hello";var str64 = window.btoa("hello");console.log("字符串是:"+str);console.log("经base64编码后:"+str64);console.log("base64解码后:"+window.atob(str64));
2020-07-09 10:39:54
144
1
原创 vue.js实现点击按钮和弹出层其他位置弹出层消失方法
首先想到的是直接阻止按钮和弹出层的事件冒泡,然后给document绑定事件让弹出层消失。但是显然这种方法太简单粗暴了,使用的场景也很苛刻,要求页面中只有一个弹出层效果才行,虽然不建议使用,但是也提供了一种思路。然后想到可以检验事件的target,如果target不是按钮和弹出层就可以让弹出层消失,这也是用jQuery 的常用写法,那么关键点就是用vue.js定位到按钮和弹出层,vm.$refs可以解决这个问题,使用 ref 为子组件指定一个索引 ID,在 JavaScript 中就可以直接访问子组件了。
2020-06-29 14:09:00
1264
原创 优雅的写JavaScript
// 普通写法if (a == undefined) a = []if (params.success) { params.success(res) }// 优雅写法a = a || []params.success && params.success(res)
2020-06-20 12:08:14
176
原创 dvajs数据持久化存储dva-model-persist
之前写用dva写页面,发现没有什么好用的数据持久化处理,索性就自己撸一个:index.js:// 1. Initializelet allState = {}let unloadListener = !1const initialState = window.localStorage.getItem('store')if (initialState && initialState !== '{}') { // get store window.localStorag
2020-06-15 17:45:24
4031
原创 用hooks封装一个跟antd-pro效果一样的侧边导航栏
说明:antd-pro的侧边导航栏带有自动缩放、移动端适配的功能,去看了antd-pro的文档,发现是用了一个layou pro组件,算了自己写一个。效果图:使用antd4.x侧边栏组件:import React, { Fragment } from 'react'import { Menu, Drawer, Layout } from 'antd'import { UserOutlined, VideoCameraOutlined, Up...
2020-06-12 16:08:59
954
原创 小程序怎么让onLoad里拿到onLaunch里异步的数据
问题:小程序onLoad 与 onLaunch 几乎是同时执行,那么怎么在onLoad里拿到onLaunch里异步的数据解决办法:在app.js中的onLaunch中调取接口获取到值// 此处请求封装过 app.request('url',data).then(res => { this.globalData.resData = res // 此处判断app对象中有没有这个回调函数 if (this.
2020-06-05 15:35:06
1054
原创 前端图片直传阿里OSS实现方法
前端图片直传阿里OSS并不是唯一解决方法,也可以放置到后端处理,本文只探讨前端图片直传阿里OSS实现方式。# 流程:1、初始化OSS2、获取上传的图片3、长传图片# 要处理的点:1:如果用户上传的图片过大,要进行微损压缩图片2:如果苹果手机旋转拍照上传图片会造成旋转错位(兼容性处理)项目采用vant,封装一个直传阿里oss的功能,代码为:/** * Created by SongPeng on 2019-8-9 */import OSS from...
2020-05-27 17:35:49
1858
原创 windows terminal配置gif背景图
windows terminal是支持gif背景图配置的打开windows terminal标题栏=> 设置 进入配置文件修改文件 { // Make changes here to the powershell.exe profile. "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}", "name": "Windows PowerShell", "commandline": "powershell.exe".
2020-05-26 15:11:54
507
原创 Antd V4 使用iconType创建Icon,可动态设置iconType
后台数据库存的icon type是antd v4的iconimage.png前端页面应该如何使用显示icon呢解决办法如下import React from "react";import * as Icon from '@ant-design/icons';var iconType = 'MessageOutlined';export default function App() { return ( <div > { ...
2020-05-09 10:44:56
4102
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人