- 博客(62)
- 收藏
- 关注
RSS订阅原创 webpack5 运用(持续更新。。。)
1.局部webpack打包进入指定文件夹的目录下运行webpack命令2.配置webpack打包入口文件名称npx webpack --entry ./src/main.js3.指定输入目录3.1方法一npx webpack --entry ./src/main.js --output-path ./build3.2方法二package.json文件中，进行配置3.3方法三新增文件webpack.config.js文件融入入口以及输出package.json文件中，将
2022-02-16 15:53:54
1062
2
原创 antd From的系列用法
1.表单赋值（表单回显）方法一定义 const [formSetting] = Form.useForm();赋值useEffect(() => { if (editNowData) { formSetting.setFieldsValue( { id: editNowData.id, description: editNowData.description, link: editNowData
2021-07-29 10:59:14
563
原创 11 ---＞提取css成单独文件
1.新建文件夹2.文件内容a.css#box1 { width: 100px; height: 100px; background-color: pink;}b.css#box2 { width: 200px; height: 200px; background-color: deeppink;}index.js/* * @Author: zyl * @Date: 2021-07-29 10:13:40 * @LastEditors: zyl * @L
2021-07-29 10:50:45
351
原创 10 ---＞ 构建环境介绍
处理流程是：开发环境：源代码–>webpack+自动化–>bundle源代码通过webpack编译成浏览器识别的语法，输出bundle，资源就会被浏览器识别运行生产环境：1.比如我们的样式资源css,打包之后会因为css-loader打包到js中，这样会导致我们的js包变得很大，加载速度会变得很慢，同时，因为是先加载js,同时通过创建style标签去插入到页面中，这样会出现闪屏现象，因此我们需要将js中css的部分提取出来2.对于代码，我们都需要进行统一的压缩，我们的样式代码和js.
2021-07-29 10:12:29
199
原创 creact-react-app的打包相关事宜
1. 关于build之后的路径问题2. 关于build之后的代理问题当前项目路径：相关配置：1.config里的env.js在config里的env.js的92行添加 API_URL: process.env.API_URL || '/'添加在getClientEnvironment方法里面的**.reduce**后方一些列的相关配置位置2.config/webpack.config.js添加生产环境的配置代码A：const shouldUseSourceMap
2021-07-14 15:52:22
172
原创 9 ---＞ 开发环境的搭建
处理less资源{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },处理css资源{ test: /\.css$/, use: ['style-loader', 'css-loader',] },处理样式中的图片资源{ //处理样式中的图片资源 test: /\.(jpg|png|gi
2021-07-14 15:35:36
365
原创 8 --- ＞devServer
webpack-dev-server 可用于快速开发应用程序热更新直接使用6中的代码修改src/index.js的代码function add(x,y) { return x+y}console.log(add(1,2));这是刷新打印结果并没有，这是因为我们构建后的代码是之前构建的，然后新输入的内容没有在之前构造的里面因此，需要查看最新的JS代码，需要重新打包一次才能看到打印信息3devServer可以帮助我们打包webpack配置devServer: { cont
2021-07-13 17:17:47
142
原创 7 --- ＞ webpack打包其他资源
其他资源：不需要任何处理，原封不动的输出，也不需要做优化、压缩等等比如：字体1.前往https://www.iconfont.cn/选择图标2.购物车中 下载代码3.将字体文件引入到src下面其中引入ttf是因为查看iconfont.css中引入了ttf文件@font-face { font-family: "iconfont"; /* Project id */ src: url('iconfont.ttf?t=1625729950853') format('truetype');
2021-07-09 09:55:44
135
原创 6 ---＞ webpack打包图片资源
新建文件夹下载三张图片分别大小为：0.jpg为55kb,1.jpg为28kb，2.jpg为2.49kbindex.html<!-- * @Author: zyl * @Date: 2021-06-23 14:30:40 * @LastEditors: zyl * @LastEditTime: 2021-06-24 09:58:53--><!DOCTYPE html><html lang="en"><head> <meta
2021-06-24 13:14:58
286
2
原创 5 ---＞ webpack打包html文件
1.新建文件index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
2021-06-23 14:01:30
310
原创 4 ---＞ webpack打包样式资源
处理css文件1.新建index.css和index.js文件index.css文件html,body { margin: 0; padding: 0; background-color: pink; height: 100%;}index.js文件引入css文件import './index.css';2.新建配置文件webpack.config.js编写最基本的配置/* * @Author: zyl * @Date: 2021-06-22 14:40:29
2021-06-23 10:23:29
163
1
原创 3 ---＞ webpack初体验
1.搭建1.创建文件夹：webpack初体验F:\study\webpack\webpack初体验>npm initpackage name: (webpack初体验) webpack_testIs this OK? (yes) yF:\study\webpack\webpack初体验>npm i webpack webpack-cli -gF:\study\webpack\webpack初体验>npm i webpack webpack-cli -D //开发依赖2.新建
2021-06-22 13:09:33
153
1
原创 2 ----＞ webpack五个核心概念
1.Entry入口(Entry)指示 Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图。2.Output输出(Output)指示Webpack打包后的资源 bundles 输出到哪里去,以及如何命名。3.Loader（翻译官）Loader让 webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)比如less，img等4.Plungins（插件）插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直
2021-06-21 16:09:36
156
原创 1---＞ 初识webpack
Webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 Webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。前端资源构建工具新建文件进入文件夹对项目进行初始化F:\study\webpack\webpack简介>npm initpackage name: (webpack简介) webpack_testIs this OK?
2021-06-21 15:35:48
135
原创 Generator、yield用法
Generator1.用于异步编程2.最大的特点是交出函数耳钉执行权（暂停执行）写法：funcation关键字与函数名之间有一个 星号可以结合yield语句，定义不同的内部状态（状态，就是数据。内部的额状态，就是函数内部的值，它在不同的时候，是不一样的）本质上，Generator函数就是一个封装的异步的任务。异步容器需要使用.next()的方法进行启动，作用是分阶段执行Generator函数每次调用.next()会返回一个对象表示当前阶段的信息，value属性done属性1
2021-06-10 13:10:04
844
3
原创 react实现列表向上自动滚动（二：hooks写法）
import React, { useState, useEffect, useRef } from 'react'const MarqueeBox = (props) => { const [data, setData] = useState([]); //滚动的数据 const [step, setStep] = useState(1) //滚动距离 const [top, setTop] = useState(0) //滚动距离 const [scro...
2021-05-31 17:26:15
1852
原创 react--模板字符串的应用
1.变量名作为属性值：使用中括号var selected_item = { [type[0]]:true, [type[1]]:false, };2.属性值嵌套模板字符串 var selected_item = { [`type[${key}]`]:true [type[1]]:false, };打印结果:3.模板字符串嵌套三元运算符 let rge = `历年${props.range[0]}月${props.range[0] !== props
2021-05-14 14:50:30
1670
原创 echar图形使用双Y轴（散点+折线）
option = { backgroundColor: 'pink', title: { text: '全国6月销售统计', textStyle: { fontSize: 12, fontWeight: 400, color:'#000' }, top: '5%', left:'10%', }, legend: {
2021-05-12 14:22:11
485
原创 react项目中防抖应用
使用场景：使用antd design的slider滑动输入条时，需要在滑动停止时发起请求，挪动过程中不请求，这里使用防抖进行处理let itemout=null changeSlider(e){ if (timeout) clearTimeout(timeout) timeout = setTimeout(() => { //在这里调用请求的方法 }, 300) }也可以使用单独写出来的防抖方法export function debounc
2021-05-12 13:36:48
724
原创 react实现列表向上自动滚动（一：class写法）
1.给列表最外层添加一个区分标志，比如classname或者id.这里设置一个className=‘zyl-tBody’2.给页面增加监听，保证一进来就可以执行这个向上滚动在生命周期componentDidMount中调用滚动的方法componentDidMount() { clearInterval(timer) //因为后续第6步会使用timer,我们需要定时清理 this.addScroll() }3.在addScroll这个方法里：1.首先是获取到我们
2021-04-09 16:13:13
1865
原创 react hooks常用方法
1.useStatefunction Example01(){ const [ count, setCount ] = useState(0) //声明 return( <div> <p>{count}</p> //读取 <button onClick={()=>setCount(count+1)}>计数</button> // 使用（修改）
2021-04-01 09:39:30
1127
原创 events.js:174，throw er； //Unhandled ‘error‘ event
配置环境变量此电脑–>属性–>控制面板\所有控制面板项\系统–>高级系统设置–>环境变量找到path新增C:\Windows\System32C:\Program Files\Git\binC:\Program Files\Git\mingw64\libexec\git-core第4点和第五点是你电脑配置git的对应路径...
2021-03-16 11:58:09
833
原创 微信小程序wx.getUserProfile
很多开发者在打开小程序时就通过组件方式唤起 getUserInfo 弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。详情可以点击官方调整链接微信官方链接前提：开发者工具版本不低于 1.05.2103022基础库版本不低于 2.10.4基础库查看再微信开发工具的详情–>本地设置—>调用基础库本次使用2.15.0使用：公用一个登录注册接口：import http from '../utils/http'// 主
2021-03-09 11:17:40
7807
7
原创 canvas绘制文字换行
1.创建画布 <canvas style="width: 360px;height: 300px;position:fixed;top:9999px" canvas-id="mycanvas"/>2.绘制 let str='数据交互上海耳朵接口欧式恰饭饿含防腐剂冃由于钱' let canvasWidth = 300;//计算canvas的宽度 let initHeight=100;//绘制的文字距离canvas顶部初始的高度 let lineWidth =
2021-03-03 16:10:55
712
1
原创 微信小程序扫描小程序码进入，模拟器模拟进入
1.生成小程序码的操作请移步此链接生成小程序码2.生成之后1.扫描进入的页面接收参数 onLoad: function (options) { let that = this console.log(options) console.log(options.id,'对局id') //判断是否为扫码进入 if (options.scene){ let scene = decodeURIComponent(options.scene); c
2021-03-02 15:58:43
1511
原创 微信小程序实现直尺以及量角器
直接上效果图1.直尺直尺的校准功能点击确定之后每个直尺的每个毫米之间的单位将以刚刚校准的来衡量，并且一次校准之后数据将进行保存2.量角器打开摄像头之后直接附上gitee的链接https://gitee.com/z_yulin/roundstright...
2021-02-25 11:50:27
5296
原创 微信小程序生成当前页面的小程序码（eyJlcnJjb2RlIjo0MTAzMCwiZXJybXNnIjoiaW52YWxpZCBwYWdlIHJpZDogNjAzNDlhYzgtNWVkOGVjYj）
生成当前页面的小程序码1获取access_token getaccesstoken(){ let that =this wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/token? grant_type=client_credential&appid=APPID &secret=密钥', method:"GET", success (res) {
2021-02-23 14:20:18
3077
原创 React 三大仓库（Dva 、mobx 、Redux）
Dva:数据状态管理库mobx：响应式管理Redux:函数式管理1.Dva详解1.使用dva脚手架（dva-cli）快速构建React项目npm install -g dva-cli2.定义model先设计 model设计 component连接两者（model 和 component）2.1dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的effects，订阅数据源的 subscriptions 。.
2021-02-20 18:05:14
2129
原创 小程序分包以及分包页面的分享
1.分包为什么使用分包小程序第一版 推出 小程序代码包不能超过1MB 大小，所以，小程序可以秒开，但是随着业务的发展，又推出整个小程序所有分包大小不超过 8M，而8M不能秒开，于是就推出分包加载。对于小程序而言整个小程序所有分包大小不超过 8M单个分包/主包大小不能超过 2M在小程序启动时，默认会下载主包并启动主包内页面当用户用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。分包支持的版本微信客户端6.6.0，基础库 1.7.3 及以上版本开始支持。开发者
2021-02-20 17:39:26
948
原创 React useRef useEffect
useRef是一个方法，且useRef返回一个可变的ref对象最传统的用法：首先通过useRef创建一个对象叫h3Dom,并且赋值给button的ref上，这样在获取节点打印处，我们可以打印出对应的DOMimport {useState,useRef} from "react";export const ShowDiv =()=>{ const [ color,serColor] = useState('red') const h3Dom =useRef() .
2021-01-05 18:35:51
622
原创 小程序使用canvas合并两张网络图片并保存到相册
wxml:事件触发：<button class="saoBtn" bindtap='savePhoto'>保存图片</button>画布显示： <view class="placeHoder"></view> <canvas hidden='{{isShow}}' style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;" canvas-id="myCanvas"/&g
2021-01-05 17:28:00
646
原创 log appendFile err fs_appendFile:fail no such file or directory, open “http://usr/miniprogramLog/log
抛错原因时因为获取用户权限出错解决办法：在对应获取用户信息按钮上添加一下两个属性：open-type=“getUserInfo” lang=“zh_CN”并且对于点击的按钮的点击事件设置点击时：bindgetuserinfo=“点击的方法名”然后在这个方法里面：设置一下代码，问题应该能得到解决 let that =this let info = e.detail const res = await getApp().login(info); if (!res) r
2020-12-31 10:47:13
2256
原创 小程序各种小问题持续更新（图片上传服务器，特殊分享，base64绘制canvas）
1.关于图片自适应使用line-height不起作用<image mode="aspectFit" class="chuanImg" src="{{img_url}}"/>可以使用 mode="aspectFit"来控制图片自适应，设置高度，图片宽度将根据高度自适应2.上传图片到服务器的demo以及从手机上选择图片 // 上传代码demo uploadFile(files) { const that = this; return new Promise((r
2020-12-23 17:43:56
1554
原创 关于小程序带个人头像以及识别信息的特殊转发分享
分享需要的效果：代码部分：1.触发绘制函数savePoster() { var that = this; this.drawCanvas(); //调用绘制函数 wx.showLoading({ title: '努力生成中...' }); },关于绘制函数 drawCanvas() { var that = this; //得到背景图片 let promise1 = new Promise(function (resol
2020-12-23 17:14:56
395
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人