搜索到
102
篇与
的结果
-
关闭vscode目录的收缩 用vscode时间长了的朋友应该会发现，如果我们的一层目录下面只有一个目录的时候，我左侧目录树上，目录层级就只会显示一层，并通过 fold-a/fold-b 的形式展示，如下图有时候我们并不喜欢vscode这样，第一影响了我们目录层级结构的直观性。第二想在SnapshotIndex下面或者上层目录新建文件或者目录时也没有那么方便。可以通过下面的设置，禁止掉vscode的这个功能打开 preferences->settings 在搜索栏搜索Compact FoldersExplorer: Compact Folders???? Controls whether the explorer should render folders in a compact form. In such a form, single child folders will be compressed in a combined tree element. Useful for Java package structures, for example.取消掉前面的勾选即可我们目录就会恢复成正常的树形结构了 -
gitbook出现TypeError: cb.apply is not a function解决办法 执行gitbook serve的时候出现如下错误> fastmock-doc@1.0.0 serve /Users/gongminghua/Public/03private/fastmock-docs > gitbook serve Live reload server started on port: 35729 Press CTRL+C to quit ... /usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js:287 if (cb) cb.apply(this, arguments) ^ TypeError: cb.apply is not a function at /usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js:287:18 at FSReqCallback.oncomplete (fs.js:169:5) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! fastmock-doc@1.0.0 serve: `gitbook serve` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the fastmock-doc@1.0.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/gongminghua/.npm/_logs/2020-12-23T02_00_45_660Z-debug.log 按照提示中的路径，/usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js 打开polyfills.js文件，找到这个函数function statFix (orig) { if (!orig) return orig // Older versions of Node erroneously returned signed integers for // uid + gid. return function (target, cb) { return orig.call(fs, target, function (er, stats) { if (!stats) return cb.apply(this, arguments) if (stats.uid < 0) stats.uid += 0x100000000 if (stats.gid < 0) stats.gid += 0x100000000 if (cb) cb.apply(this, arguments) }) } }在第62-64行调用了这个函数fs.stat = statFix(fs.stat) fs.fstat = statFix(fs.fstat) fs.lstat = statFix(fs.lstat)把这三行代码注释掉就解决报错了
-
react 使用 useEffect 方法替代生命周期API componentDidMount，componentDidUpdate 和 componentWillUnmount useEffect 是react 新版本推出的一个特别常用的 hooks 功能之一，useEffect 可以在组件渲染后实现各种不同的副作用，它使得函数式组件同样具备编写类似类组件生命周期函数的功能.因为useEffect只在渲染后执行，所以useEffect只能替代render后的生命周期函数。即componentDidMount，componentDidUpdate 和 componentWillUnmount1、只传入回调函数的useEffect -> componentDidUpdate。只为useEffect传入回调函数一个参数时，回调函数会在每次组件重新渲染后执行，即对应于componentDidUpdate。使用方法如下useEffect(() => console.log('updated...'));在使用这个方式的useEffect时，要特别注意在回调函数内部避免循环调用的问题，比如useEffect回调函数内部改变了state，state的更新又触发了useEffect。2、传入第二个数组类型的参数指定要响应的state数据为useEffect传入第二个参数，第二个参数是一个包含了state对象的数组，useEffect只会在数组内的一个或多个state发生变化并且重新渲染了组件后执行传入的回调函数const [count, setCount] = useState(0); useEffect(()=>{ console.log(count); }, [count])如上代码，只有在count的值发生更改时，回调函数才会执行，或者会跳过。用这个方法可以减少不必要的操作。3、传入第二个参数[]这个方式依托于上面的方式理解说简单也简单说不简单也不简单。官方的解释是如果你传入了一个空数组（[]），effect 内部的 props 和 state 就会一直拥有其初始值。这样理解就相对简单了，意思就是只会在组件初始化时执行一次，后面的state和props的改变都不会执行了。这就会让我们很自然想到我们用得几乎最多的componentDidMount钩子函数了。代码如下const [count, setCount] = useState(0); useEffect(()=>{ console.log(count); }, [])4、在useEffect的回调函数中return一个匿名函数实现componentWillUnmount这个使用方法是固定用法，就不做过多说明，示例也粘贴至官网示例，这里大概提一下：结合上面的方法，如果在示例中传入和不传入第二个参数的区别不传第二个参数：return函数中的清除操作发生在下一次effect之前传入第二个参数：return函数中的清除操作发生在下一次effect之前，只是下个effect多了一个state控制。传入空数组，相当于useEffect回调函数=>componentDidMount - return的函数=>componentWillUnmountfunction FriendStatus(props) { // ... useEffect(() => { // ... ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; });
-
react Cannot find module 'node_modules/_react-scripts/config/webpack.config.dev 原来运行得好好的react项目，突然运行不成功了，提示如下错误$ npm start > react-app-rewired start internal/modules/cjs/loader.js:589 throw err; ^ Error: Cannot find module 'D:\my_project\node_modules\react-scripts/config/webpack.config.dev.js' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15) at Function.Module._load (internal/modules/cjs/loader.js:513:25) at Module.require (internal/modules/cjs/loader.js:643:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (D:\my_project\node_modules\react-app-rewired\scripts\start.js:18:23) at Module._compile (internal/modules/cjs/loader.js:707:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10) at Module.load (internal/modules/cjs/loader.js:605:32) at tryModuleLoad (internal/modules/cjs/loader.js:544:12) at Function.Module._load (internal/modules/cjs/loader.js:536:3) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my_project@0.1.0 start: `react-app-rewired start --scripts-version react-scripts-ts` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the my_project@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\...\AppData\Roaming\npm-cache\_logs\2019-01-19T10_56_58_751Z-debug.log经过四处寻找，在github找到了原因解释，只不过他的解释是针对使用了ts下的react项目，但是原理相同内容如下This has been caused by recent changes to CRA (2.1.2) where they merged the webpack.config.dev.js and webpack.config.prod.js into a single file webpack.config.js. See #343 and #345 for more details on the change.The adjustment to paths made in react-app-rewired in order to continue to be able to be used with CRA looks for a react-scripts version number greater than or equal to 2.1.2. The react-scripts-ts version number has been higher than that for the last ~18 months, so react-app-rewired is treating it according to the merged webpack config instead of the split one.To solve it, you'll need to install an older version of react-app-rewired that doesn't have this change. I believe the last version of react-app-rewired that will be compatible with react-scripts-ts is version 1.6.2. The versions for 2.x have the breaking change to support CRA 2.1.2 and beyond that is misfiring on react-scripts-ts.Use yarn add react-app-rewired@1.6.2 or npm install react-app-rewired@1.6.2 to step back to the last of the 1.x versions of react-app-rewired - it will install the older version and lock the version number to exactly that version so that it doesn't get upgraded to a newer version accidentally in future.大致意思就是react-app-rewired这个插件升级导致了不会单独生成dev和prod配置文件了，所以导致文件找不到。需要将react-app-rewired版本固定在1.6.2，这样处理能解决上面的问题，但是又出现了一个新问题，大致内容是can not find module react_script/package.json 分析应该也是版本问题导致的，所以通过git版本回退找到了以前的代码的package.json中react_script的使用版本是2.0.3，所以将版本也固定在了2.0.3删掉node_modules目录，重新执行npm install npm start 启动项目，成功启动并打开浏览器tab页。
-
微信公众平台、微信公众平台.小程序、微信.开放平台三者关系及unionid 一、微信公众平台、微信公众平台.小程序、微信.开放平台登录地址 项目 微信公众平台 微信公众平台.小程序 微信。开放平台 登录地址 https://mp.weixin.qq.com https://mp.weixin.qq.com https://open.weixin.qq.com 登录账号 xxx@**** xxx**** xxx**** 简称 公众号平台 小程序平台 开放平台 这三个平台必须使用不同的账号申请，因为账号是邮箱地址，所以，必须使用3个不同的邮箱地址作为账号，如果某个邮箱地址已经是微信公众平台的账号，则这个邮箱地址就不能用于另外的两个平台。事实上，微信公众平台为了和微信公众平台.小程序区分开来，也可以称作微信公众平台.公众号。以下简称：公众号平台、小程序平台、开放平台。二、三者之间的关系如果需要搞清楚三者之间的关系，就涉及到unionid。关于unionid，在【微信官方文档.公众号】是这样描述的：开发者可通过OpenID来获取用户基本信息。特别需要注意的是，如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号，用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。综上：1、公众号平台负责管理公众号；2、小程序平台负责管理小程序；3、每个平台对于某个用户都会产生一个OpenID,在单独的平台上这个OpenID是唯一的，但是如果某个用户既要使用公众号，又有小程序，那么在公众号和小程序平台上OpenID是分别不一样的。4、此时就需要开放平台，凡是在开放平台登记的应用，对于这个开放平台都将使用一个统一的unionID。这样就可以在不同的平台上唯一确定某个用户了。这么理解，公众号平台和小程序平台是相互独立的平台，可以各自开发各自的应用，如果是一个独立的应用，那么只需要使用OpenID就可以区别用户，例如如果只是使用公众号，不使用小程序，那么直接使用公众号的OpenID就可以了，繁殖对于小程序来说也是一样的。同一个用户在公众号平台和在小程序平台上的OpenID是不一样的，但是实际应用是经常会需要公众号和小程序同时使用，这样就需要使用开放平台来统一OpenID，最终出现了unionid。这个是唯一的，不变的！三、小程序开发中关于使用Session_Key可以解开得到unionid问题按照官方文档的说明，前端是可以通过 wx.login 获取到 code 登录凭证，然后在后台通过 auth.code2Session 换取openid,session_key,unionid，需要说明的是，unionid是用户在开放平台的唯一标识符，在满足 UnionID 下发条件的情况下会返回。那么满足什么样的条件会直接返回unionid呢？答案是注册认证微信开放平台，注意一定要认证，也就是说要交300元通过认证，这样后台就会直接返回unionid。否则，按照官方说的如果没有返回unionid，也可以通过session_key在后台进行解密，解密需要的相关参数需要前端通过wx.getUserInfo调用获取到userInfo，rawData，signature，encryptedData，iv，cloudID参数。后台通过加密算法解密，最终可以得到unionid。 我测试的时候，如果没有通过开放平台认证，密文数据中始终没有返回unionid，不知道不认证的情况下满足什么样的条件才会返回。————————————————版权声明：本文为CSDN博主「sensor_WU」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/sensor_WU/java/article/details/103976716
-
vscode常用插件和设置 常用设置打开新文件不替换当前未修改的文件 "workbench.editor.enablePreview": false常用插件vue-helper vue开发增强工具 按ctrl和左键跳转定义vscode-elm-jump 跳转常规定义Auto Close Tag html标签自动关闭Auto Rename Tag 修改html开始标签，结束标签自动修改Eslint eslint检测和修复工具Git History git查看提交历史工具HTML CSS Support html css自动补全HTML SnippetsMarkdown All in One markdown增强工具Path Autocomplete / Path Intellisense 图片，样式，js引入路径提示Vetur vue开发基本工具Vue 2 Snippets vue2.x代码提示Element UI Snippets vue element-ui代码提示Surround 生成包围选中内容的代码，如ifelse 等Power Mode vscode输入特效Output Colorizer 日志，控制台代码颜色标识Todo Tree 可以在左侧菜单生成特定注释的树，方便定位GitLens — Git supercharged 可以直接看到当前光标所在行的代码被哪个改过TypeScript Importer ts对象或者方法自动生成import（已经有export）code runner 在vscode里面直接运行代码。Live Server 增加一个快速预览html文件并能实时更新的右键菜单。方便本地调试htmlPrettier - Code formatter 代码自动检测并格式化工具Code Runner Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, Typescript ...
-
-
HTTP缓存优先级问题 HTTP缓存主要有两种缓存：强缓存和对比缓存（也叫协商缓存）。强缓存：只要请求了一次，在有效时间内，不会再请求服务器（请求都不会发起），直接从浏览器本地缓存中获取资源。主要字段有（expires：date（过期日期）、cache-control： max-age=time（毫秒数，多久之后过期） |no-cache|no-store）。如果expires和cache-control同时存在，cache-control会覆盖expires。建议两个都写，cache-control是http1.1的头字段，expires是http1.0的头字段，都写兼容会好点。对比缓存：无论是否变化，是否过期都会发起请求，如果内容没过期，直接返回304，从浏览器缓存中拉取文件，否则直接返回更新后的内容。主要字 段有：服务器端返回字段 Etag： xxxx (一般为md5值) 对应客户端匹 配字段为， If-None-Match: w/xxx(xxx的值和上面的etag的xxx一样则返 回304，否则返回修改后的资源)。服务器端返回字段：Last-Modifieddate(日期),对应客户端匹配字段If-Modified-Since:date（如果服务器date小于等于客户端请求date则返回304，否则返回修改后的资源））。同时存在各种缓存头时，各缓存头优先级及生效情况:强缓存和对比缓存同时存在，如果强缓存还在生效期则强制缓存覆盖对比缓存，对比缓存不生效；如果强缓存不在有效期，对比缓存生效。即：强缓存优先级 > 对比缓存优先级强缓存expires和cache-control同时存在时，则cache-control会覆盖expires，expires无论有没有过期，都无效。 即：cache-control优先级 > expires优先级。对比缓存Etag和Last-Modified同时存在时，则Etag会覆盖Last-Modified，Last-Modified不会生效。即：ETag优先级 > Last-Modified优先级。当然还有一种缓存pragma，和cache-control类似，前者是http1.0内容后者是http1.1内容，并且pragma优先级 > cache-control优先级，不过前者目前基本不使用。针对不同的项目，如果css和js在打包时加了md5值，建议直接使用强缓存，并且expires和cache-control同时使用，建议设置时长为7天较为妥当。图片文件如果没有加md5值，建议采用对比缓存，html文件也建议采用对比缓存。ps: 当我们不设置cache-control，只设置对比缓存，在不同浏览器下会有不同的表现。chrome会直接从本地缓存获取，其他会请求服务器返回304.这时候有两种方式让他们的响应一致。1、设置cache-control: public, max-age=0;记住，这里的public是关键。因为默认值是private，表示其他代理都不要缓存，只有服务器缓存，而max-age又为0，所以每次都会发起200的请求。设置public的意思就是允许其他各级代理缓存资源，因此如果资源没改变会返回304。 2、直接设置max-age=1000。即是一秒之后内容过期，目的是触发浏览器缓存。也能达到想要304的效果。本文转载自：https://www.imooc.com/article/details/id/22841
-
Chrome inspect 绕过翻墙 有过基于WebView的混合式开发经验的人，大概都知道借用Chrome就可以调试真机（或模拟器）里面的WebView应用，只要手机开启【开发者选项】，数据线连接设备后，在Chrome地址栏输入以下地址回车即可进入调试界面：chrome://inspect/#devices点击要调试的设备的超链接，即可打开新的页面，里面会显示应用的UI，而这个页面第一次打开是需要翻墙的因为打开的实际是chrome的页面。有些时候我们不具备翻墙条件，或者政策限制了我们不能翻墙。其实不用翻墙也可以，Github上有一个开源项目，持续更新hosts文件：通过本地dns可以绕过翻墙，打开https://github.com/googlehosts/hosts/blob/master/hosts-files/hosts复制# GoogleHosts Start 。。。 # GoogleHosts End中间部分的hosts配置到自己的hosts文件中。最新的可用google hosts# inspect 185.200.34.198 185-200-34-198.googlehosts.org 185.200.34.198 tg-2.googlehosts.org 107.174.205.58 107-174-205-58.googlehosts.org 107.174.205.58 tg-3.googlehosts.org 185.200.34.209 185-200-34-209.googlehosts.org 185.200.34.209 tg-4.googlehosts.org 107.174.203.60 107-174-203-60.googlehosts.org 107.174.203.60 tg-5.googlehosts.org 117.50.61.150 117-50-61-150.googlehosts.org 117.50.61.150 tg-7.googlehosts.org 106.75.2.132 106-75-2-132.googlehosts.org 106.75.2.132 tg-7-b.googlehosts.org 103.105.48.234 103-105-48-234.googlehosts.org 103.105.48.234 tg-9.googlehosts.org 2.56.240.163 2-56-240-163.googlehosts.org 2.56.240.163 tg-10.googlehosts.org 45.89.228.109 45-89-228-109.googlehosts.org 45.89.228.109 ss-3.googlehosts.org
-
vue-cli构建的项目 CDN引入框架文件的问题 vue-cli2.x中用法1、 index.html中引入相关的js<!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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>我是标题</title> <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> </head> <body> <noscript> <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <script src="/map/map_loader.js"></script> <!-- built files will be auto injected --> </body> </html>2、 修改build/webpack.base.conf.js文件，通过externals选项加载外部扩展，引入依赖库，不需要webpack处理module.exports = { ... externals: { 'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的作者定义的，是固定值，不同的库的这个值需要到相应的库的开发文档中获取，其实这个值最终就是绑定到window对象上的全局变量。 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios' } ... }通过上面的配置后使用就还是跟以前一样使用就行了，vue-cli3.x 使用方法1、同上面的步骤1.2、在vue.config.js configureWebpack选项中通过externals选项加载外部扩展，引入依赖库，不需要webpack处理// ... module.exports = { // ... configureWebpack: { // webpack配置，值位对象时会合并配置，为方法时会改写配置 // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ], externals: { 'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的主人定义的不能修改 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', // 'element-ui': 'ELEMENT' } }, // ... };在使用的过程中遇到了一个问题，就是通过cdn引入压缩的vue文件，启动项目后，google浏览器vue开发插件无法工作，也是纠结了很久才找到是这个原因导致的。把上面的vue的cdn地址改成//cdn.bootcss.com/vue/2.5.2/vue.js就行了。那么问题就来了，我不可能在生产环境使用未被压缩的库文件吧？上面的问题就引出了另一个问题。”怎么在vue的html文件里根据不同的环境加载不同的文件？“稍微注意点我们就会发现在vue-cli生成的项目，index.html里面有这样一句代码<link rel="icon" href="<%= BASE_URL %>favicon.ico">代码里面动态输出了一个变量，我猜测这个语法是ejs模板语法，所以我大胆地尝试了一下<% if(1 === 1) { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.js"></script> <% } else { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <% } %>发现能正常加载输出script标签并加载vue文件。这是因为vue-cli-service内部使用html-webpack-plugin处理的html文件，而html-webpack-plugin内部使用了ejs模板。来到node_modules 的 html-webpack-plugin，在index.js里就能看到他的逻辑了class HtmlWebpackPlugin { constructor (options) { // Default options this.options = _.extend({ template: path.join(__dirname, 'default_index.ejs'), templateParameters: templateParametersGenerator, filename: 'index.html', hash: false, inject: true, compile: true, favicon: false, minify: false, cache: true, showErrors: true, chunks: 'all', excludeChunks: [], chunksSortMode: 'auto', meta: {}, title: 'Webpack App', xhtml: false }, options); } }上面的代码肯定不陌生，就是我们在写插件或者库的时候接收对象类型参数时，用来做传入参数和默认值的合并用的。上面有个template参数，用来指定编译时的模板文件，根据他的默认值就能看出是用了ejs模板引擎了。default_index.ejs内容如下：// html-webpack-plugin/default_index.ejs <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body> </html>有了上面的理解，我们需要做的就是把1===1换成我们想要的逻辑就行了，就是获取环境变量来来判断是生产环境还是开发环境。既然是webpack处理的html文件，那么在上下文中就肯定能访问到webpack在运行时的node环境变量process.env最终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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>我是标题</title> <% if(process.env.VUE_APP_NODE_ENV === 'development') { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.js"></script> <% } else { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <% } %> <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> </head> <body> <noscript> <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <script src="/map/map_loader.js"></script> <!-- built files will be auto injected --> </body> </html>通过上面的调整，就能同时使用cdn引入库文件而不影响我们原来的调试了
