qq_37942845的博客

原创 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...

原创 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、三元...

原创 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：前端路由，对一个单页面来说，基本不...

原创 h5移动端使用微信picker自定义年-月-日-时选择器

日期选择器很常见，微信也原生提供的有https://weui.io/#picker，但是没有小时，所以只能使用自定义picker，git地址：https://github.com/peng20017/wx-timePicker，如果帮助到你了，别忘了给个星星哦...

原创 JavaScript 笔记整理（1）——基本概念

1、js区分大小写，命名开头首字母必须是字母、下划线（_）或美元符号（$），其他字符可以是字母、下划线、美元符号或者数字。2、定义的变量，未初始化，自动取得undefined的值/* * 定义的变量，未初始化，自动取得undefined的值 */var message; //这个变量声明后默认取得了undefined的值alter(message) //'undefi...

原创 h5单手实现图片的拖动、旋转、缩放

前一段时间做了微信小程序上的单手图片的拖动、旋转、缩放，没想到有这么多人需要这个功能，有的同学问我能不能做一个h5版的？所以就有了这篇文章前提：本文不适合vue、angular、react框架、仅适用原生开发或者jquery库，因为双向数据绑定的已经在微信上说过了。原理和微信小程序大致相同，只不过不在微信的框架下，没有了双向数据绑定，一切数据的同步展示都需要自己做效果展示。首先还是定义...

原创 H5微信分享、自定义微信分享

在一个h5页面添加微信，分享给微信好友、朋友圈、腾讯微博下面来实现 。需要：1、需要一个企业版的微信公众号（认证过的）2、一台服务器企业版的微信公众号原因：在微信公众平台的接口权限内可以看到，个人版公众号是没有权限自定义微信分享的，所以需要企业版公众号并开通认证。具体步骤：步骤一：绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS...

原创 微信小程序云开发使用方法新手初体验

今天看到微信推送了一条小程序云上线通知，作为一个前端er，满怀期待的去看了看，很不错先看看文档上怎么说的：开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力，6的一匹。云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。（就...

原创 微信小程序内拖动图片实现移动、放大、旋转

最近接到一个任务，在微信小程序内拖动图片组件实现移动、放大、旋转，并记录这些图片的移动位置，放大比例，旋转角度，在一个画布上生成一张图片，最后保存到手机相册。 我的具体实现思路是这样的： 一共三个功能，可以先把功能分为图片 拖动 和图片旋转缩放， 把图片的缩放和旋转做在了一起。 1.图片移动：可移动的图片肯定是要动态生成的，所以不能写死，应该是个数组，具备...

原创 js判断点击元素外的区域

背景：经常有点击某个元素是选择状态，点击其他位置取消这个状态。思路：可以在元素的点击的时候，给doc绑定一个点击事件来实现。

原创 elIput 输入限制

当输入值的键盘抬起时触发这个事件。this.value表示此输入框的值，/\D/g为正则表达式，用来匹配所有非数字字符；可以通过给input添加onkeyup事件来实现；

原创 后端拼在字符串中的换行符\n如何在前端显示

white-space: pre-wrap

原创 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...

转载 JavaScript 使用split 以中英文逗号、空格（一个或多个）分割字符串

var str = 'lQT,hello，world,123 6';console.log(str.split(/,|，|\s+/));

原创 echart中label怎么输出空格

1、试了直接用空格，可以的，不够美观2、&nbsp; 不识别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 +

原创 反编微信小程序源码（破解wxss样式无法恢复的问题）

背景：从17年开始为获取微信小程序源码，网上一直有大神写程序来反编微信小程序的源码，不过现在来看基本都不能用了，有的能用也不能获取样式wxss文件，经过我的不懈努力，找到一些办法，接下来我会一步步讲。工具：夜神模拟器、node环境、反编工具1、开启夜神、下载微信、RE文件管理器2、打开RE文件管理器，设置里面开启root权限3、登录微信、打开你要反编的微信小程序，开启即可，如果是带分包的小程序最好都点点，把分包也加载回来（备注：这一步会很卡，我也是登录了好几次才登录上微信、小程序更是开...

原创 vs code 设置背景图

安装插件 background-coverctrl + shift + p 打开插件添加图片https://wallhaven.cc/

转载 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;

原创 Vue项目打包上线部署的那些坑

1、跨域问题开发环境的跨域可以直接在vue cofig中设置，这个没啥说的，打包完成后就一点关系都没了解决方案：a.通过jsonp跨域b.通过修改document.domain来进行跨域c.使用window.name跨域d.使用HTML5中新引进的window.postMessage方法来跨域传送数据e.CORS最好的解决办法我觉得还是后端给设置响应头解决跨域2、打包完的版本问题如果你用的npm、或者cnpm，打完包，再上线，过半年，重新install...

原创 css选择最后一个class

选择最后一个class接点.a:last-of-type {//}选择非最后一个接点.a:not(:last-child){//}

原创 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

原创 react hook理解

React 中是通过类似单链表的形式来代替数组的。通过 next 按顺序串联所有的 hook。memoizedState，cursor 是存在哪里的？如何和每个函数组件一一对应的？我们知道，react 会生成一棵组件树（或Fiber 单链表），树中每个节点对应了一个组件，hooks 的数据就作为组件的一个信息，存储在这些节点上，伴随组件一起出生，一起死亡。hooks挂载的时候就会绑定在当前组件上useState跟useEffect的数据都是以链表的形式挂载在hook的变量上...

原创 git reset --hard 回滚以后 以后怎么再回去？

恢复的过程很简单： 通过git log -g命令来找到需要恢复的信息对应的commitid，可以通过提交的时间和日期来辨别,找到执行reset --hard之前的那个commit对应的commitid 通过git branch recover_branch commitid 来建立一个新的分支 这样，就把到commitid为止的代码、各种提交记录等信息都恢复到了recover_branch分支上了。...

转载 VUE前端界面在iOS中遇到的坑

段时间，公司用前端做了一个微型图片生成界面，通过考虑，选择使用vue多页面进行编写，在界面编写完成之后，本地浏览器进行测试，发现一切都很顺利，然后嵌入到APP端进行联合测试。前期，界面在Android上运行比较顺利，个人以为没什么问题，但是当页面嵌入到iOS中，问题暴露了出来，主要体现在三点上：1、界面使用了瀑布流滑动效果，但是在iOS上滑动效果非常的差，会出现卡顿现象；2、在界面进行点击的时候，界面响应明显要比Android上要慢很多；3、界面按钮点击之后会产生一个灰色的阴影图层；开始，在

转载 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 组件,它将渲染一个附加了.

转载 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

原创 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中新增

转载 react中优雅的使用typescript

在 react 中使用 ts 的几点原则和变化所有用到jsx语法的文件都需要以tsx后缀命名 使用组件声明时的Component<P, S>泛型参数声明，来代替PropTypes！ 全局变量或者自定义的window对象属性，统一在项目根下的global.d.ts中进行声明定义 对于项目中常用到的接口数据对象，在types/目录下定义好其结构化类型声明React组件申明分为：类组件和函数式组件类组件：class App extends Component<IPro.

原创 css同心圆

width: 15px;height: 15px;border-radius: 50%;padding: 3px;border: 1px solid $colorD;background-color: $colorD;background-clip:content-box;重点是background-clip

原创 前端加密

var str = "hello";var str64 = window.btoa("hello");console.log("字符串是:"+str);console.log("经base64编码后:"+str64);console.log("base64解码后:"+window.atob(str64));

原创 数据与对象去重

原创 vue.js实现点击按钮和弹出层其他位置弹出层消失方法

首先想到的是直接阻止按钮和弹出层的事件冒泡，然后给document绑定事件让弹出层消失。但是显然这种方法太简单粗暴了，使用的场景也很苛刻，要求页面中只有一个弹出层效果才行，虽然不建议使用，但是也提供了一种思路。然后想到可以检验事件的target，如果target不是按钮和弹出层就可以让弹出层消失，这也是用jQuery 的常用写法，那么关键点就是用vue.js定位到按钮和弹出层，vm.$refs可以解决这个问题，使用 ref 为子组件指定一个索引 ID，在 JavaScript 中就可以直接访问子组件了。

原创 优雅的写JavaScript

// 普通写法if (a == undefined) a = []if (params.success) { params.success(res) }// 优雅写法a = a || []params.success && params.success(res)

原创 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

原创 用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...

原创 小程序怎么让onLoad里拿到onLaunch里异步的数据

问题：小程序onLoad 与 onLaunch 几乎是同时执行，那么怎么在onLoad里拿到onLaunch里异步的数据解决办法：在app.js中的onLaunch中调取接口获取到值// 此处请求封装过 app.request('url',data).then(res => { this.globalData.resData = res // 此处判断app对象中有没有这个回调函数 if (this.

原创 前端图片直传阿里OSS实现方法

前端图片直传阿里OSS并不是唯一解决方法，也可以放置到后端处理，本文只探讨前端图片直传阿里OSS实现方式。# 流程：1、初始化OSS2、获取上传的图片3、长传图片# 要处理的点：1：如果用户上传的图片过大，要进行微损压缩图片2：如果苹果手机旋转拍照上传图片会造成旋转错位（兼容性处理）项目采用vant，封装一个直传阿里oss的功能，代码为：/** * Created by SongPeng on 2019-8-9 */import OSS from...

原创 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".

原创 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 > { ...

原创 next.js 引入antd

yarn add @zeit/next-css antd babel-plugin-import根目录新建.babelrc{ "presets": [ "next/babel" ], "plugins": [ [ "import", { "libra...