Larmy Blog

## 纯前端微信小程序实战最近在学习微信小程序开发，记录一下我的第一次纯前端小程序开发（无后台操作），也可以分享给还未开发过微信小程序，想找一个微信小程序的项目练习的朋友们，附上github地址：github地址https://github.com/Larmyliu/wechat_program一、先建立一个微信小程序项目要先在微信开放平台注册，拿到AppID，不拿AppID也可以开发小程序，但是有很多接口无法调用二、下载微信开发者工具三、在项目中新建小程序项目这里我就遇到了一个坑，在勾选的时候勾选了云开发，结果在里面一脸懵逼，没有后台经验的朋友不需要勾选 四、敲代码，调api 项目描述：1.是对ofo自行车的小程序模拟开发2.对页面进行简单的逻辑处理（主要还是查找微信官方api）注意：因为里面有一个要获取单车的密码和车牌号，所以前端可以直接mock假数据，通过链接访问假数据的地址，我是在eolinker上创建的假数据同时也要在微信开放平台中添加服务器域名，添加上后要在微信开发者工具内更新配置总结：具体的代码内容可以上github上下载clone，微信其实把很多组件都已经封装好了，而 ...

表单输入延迟优化问题描述在控制台埋点管理新增数据表中，可以新建大量字段名，当字段条数较少时（少于20个左右），输入延迟感并不强烈，但一次性创建条数较多时，会出现明显延迟感 （持续输入过程） 抓包分析 （抓包分析） 抓包分析后发现在输入的过程中不断的在触发Vue_render和Vue_update 优化在原代码中，根据条目数通过v-for循环生成四个el-form-item表单列表项，因为直接挂载在组件根部，所以每次添加都需要从组件根部开始深度遍历，从而导致输入延迟 解决那么解决方案就是最小化组件，最好不要在一个vue组件上直接绑定过多的数据，如果有大量数据请分多个组件绑定，减小当前组件绑定的数据量，将上述代码提取成组件 优化结果优化后输入延迟感明显降低 总结vue提倡最小化组件，当组件数据量过大时要考虑拆分组件，减小组件数据过大而导致深度递归时间过长，造成感官上延迟

最近打开vscode，老是有这样一句提示原因是我安装了一个叫background的拓展，并且编辑器的标题栏会显示不受支持四个字那么如何解决1.下载一个叫Fix VSCode Checksums的拓展2.ctrl+shift+P打开命令面板3.输入Fix Checksums: Apply4.重启vscode即可

刚接触小程序，发现在引入iconfont图标，原来是彩色的图标变成了纯色这是引入小程序内的显示这是在iconfont上的图标我引用的方法是在iconfont上在线生成css，将里面的css复制直接粘贴到wxss就会出现这样的情况 原来小程序对应font-class不支持多色 引用方法名 支持多色 兼容性 unicode × 好 font-class × 良好 symbol √ 差 mini-program-iconfont-cli(微信小程序解决方案)把iconfont图标批量转换成多个平台小程序的组件。不依赖字体，支持多色彩。 在工作的根目录打开cmd，输入 1npm install mini-program-iconfont-cli --save-dev 2.输入命令，生成iconfont.json文件 1npx iconfont-init 3.打开json文件，将symbol_url替换成iconfont项目生成的js 4.输入命令生成icon文件夹 1npx iconfont-wechat 5.app.json中引入iconfont组件在你需要用到 ...

title: 解决跨域的方法date: 2020-11-16 13:11:11tags: - 前端 - 笔记categories: 前端## 解决跨域的方法 在讲跨域之前，应该先了解一下浏览器的同源策略 同源策略是浏览器之间的一种约定，是浏览器最基本和最核心的安全策略，如果没有同源策略，网站很容易受到XSS和CSRF等攻击。 同源策略就是指网站：协议+域名+端口号三者相同 在同源策略下限制的内容：cookie，localStorage，sessionStorage，ajax请求 有三个标签允许跨域加载资源 <img> <link> <srript> 常见跨域场景当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。 注意： 如果是因为协议造成的跨域（http和https），前端是解决不了的，愉快的丢给后端人员解决 在跨域问题上，仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配” 解决跨域的方式 J ...

思维导图链接

typora+PicGo+腾讯云COS实现图片一键上传typora应该是很多人都会使用的一个记笔记软件，支持markdown，体验感极佳 但是在分享md文件时，往往出现md内的图片裂开，这是因为引用的是md作者电脑的本地文件，所以别人无法查看到图片 所以可以使用PicGo+腾讯云COS实现图片上传功能 PicGo下载picGo下载地址 https://github.com/Molunerfinn/PicGo/releases 图床配置 目前要选择V5版本（2021-12-18） 创建存储桶 一定要选公有读私有写 存储桶的名称对应存储空间名，地域英文对应确认存储区域 设置访问管理 新建秘钥 APPID和SecretId、SecretKey都有，对应填上去 保存、设置为默认地址 typora设置 现在上传图片就会自动上传到图床，图片地址也变成图床地址

Axios见解+源码浅析​ 在前后端项目开发过程中，从前台获取后台数据是一个很基本的操作，在我最开始学习的时候，是用XMLHttpRequest用于发送数据，到后面用JQuery封装好的ajax，开始接触前端VUE框架后，用axios来请求数据 为什么使用axios而不是ajax其实一开始我也有这样的想法，既然已经有了ajax，为什么我们在VUE项目中还是推荐使用axios呢，参考一些文章得出以下结论 主要从以下几个方面来看 大小 axios的体积比ajax要小的多，因为使用ajax要使用JQuery库（性能即王道） 针对方向 axios 符合前端MVVM的浪潮 ajax 本身是针对MVC的编程 实现方法与返回值 axios 用promise技术实现对ajax技术的封装 返回值是 promise（通过then可以进行链式调用，有效避免了回调地狱的问题） ajax 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 安全 axios支持防止CSRF（跨站请求伪造） 在axios源码中有防止CSRF的字段，可以在配置的时候设置该字段起到防止 ...

在Vue项目中常使用的一个UI库就是element-ui了 注意目前element-ui只支持Vue2.6以下的版本，如果想在Vue3.0使用这个组件库，就要使用element-pluselement-plus官网 步骤在Vue3项目根目录下 12vue add element-plusnpm install vue-cli-plugin-element-plus 全局引用src/plugins/element.js 12345import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'export default (app) => { app.use(ElementPlus)} 就可以使用组件了 按需引入在下载element-plus后，会自动帮我们创建一个配置文件，放在/src/plugins/element.js，全局引入的时候代码放在这里，更能体现模块独立的思想但是按需引入需要使用 ...

此文将介绍如何搭建一个Vue3项目基于官方文档 条件 Node 8+; vue-cli 4+ npm 6.1+ 可以再cmd中输入以下指令查看当前版本 123node -vvue -Vnpm -v 对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级，你应该需要全局重新安装最新版本的 @vue/cli： 1234// 卸载npm uninstall vue-cli -g// 安装npm install @vue/cli -g 也可以使用cnpm下载，这样速度会快很多 创建项目CLI创建项目把项目创建在myproject目录下 1vue create myproject 创建完成后可以在8080端口访问 vite创建项目尤大在vue3发布的时候着重说vite，所以也可以用vite+vue3来构建项目官网讲的很详细 1234npm init vite-app <project-name>cd <project-name>npm installnpm run dev 可以再3000端口启动项目亲测证明vite启 ...