- 博客(40)
- 收藏
- 关注
RSS订阅原创 wechat_微信小程序分包的配置
分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。 1、可以优化小程序首次启动的下载时间。（默认情况下不会进行分包，项目所有页面是打包到一起的，体积就比较大）。 2、在多人团队共同开发时可以更好的解耦协作。（不同功能划分成不同的分包，提高开发效率）。 分包后，小程序项目由1个主包 + 多个分包构成。 主包：一般只包含启动页面或他把bar页面、以及所有分包都会用到的一些公共的资源，例如：图片、js脚本、wxs脚本、wxss样式等。
2022-06-08 16:00:25
2185
原创 uni-app_开发小程序的网络请求配置（第三方包 @escook/request-miniprogram）
由于平台的限制，小程序项目中不支持axios，而且原生的wx.request()API功能比较的简单，不支持请求拦截等全局定制的功能。因此，建议在uni-app项目中使用第三方包@escook/request-miniprogram 来发起网络数据请求。官方文档请点击链接查看→.........
2022-06-08 15:58:37
3908
1
原创 wechat_微信小程序的学习笔记
微信小程序的学习目标一、初识小程序1、小程序简介二、安装并创建小程序项目1、注册小程序开发账号（目的：获取AppID）2、安装小程序开发者工具3、创建和配置小程序项目三、学习小程序项目构成与页面构成1、项目基本组成结构2、页面由几部分组成四、学习小程序中常见的组件使用方式五、学习小程序各个模板、配置以及网络请求的使用1、WXML模板语法2、WXSS模板样式3、WXJS模板4、全局配置5、局部页面配置6、网络数据请求六、进一步学习1、页面导航2、页面事件3、生命周期4、WXS脚本七、学习小程序如何进行协同开发
2022-05-23 10:19:12
729
原创 vue2.0_vue中使用qrcodejs2生成二维码，二维码宽高如何自适应不同手机分辨率的问题
前言 今天在开发中，使用了qrcodejs2插件生成二维码图片。因为是在移动端当中，需要自适应不同分辨率。但是，发现了个问题。生成的canvas画布宽高无法自适应，并且配置项中的宽高因为是不能用px单位，也不能用百分比的，就导致不同分辨率下，宽高固定死了，没办法自适应。配置项安装qrcodejs2插件npm install qrcodejs2 --save使用html<div id="qrcode" ref="qrcode"></div>js<scri
2022-05-16 19:23:02
2621
原创 HTTP状态码(分类详解)
前言 相信很多人都知道HTTP状态对于网站维护人员来说是相当重要的，当网站出现问题的时候，我们首先要诊断一下网站的HTTP状态，从而进一步确认哪里出现的问题。接下来详细地介绍一下HTTP中的状态码。分类 HTTP状态码被详细的分为五大类： 100-199 用于指定客户端应相应的某些动作。 200-299 用于表示请求成功。 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 400-499 用于指出客户端的错误。 500-599 用
2022-05-07 16:44:28
634
原创 vue2.0_解决element-ui或vant-ui组件内置方法传参问题
前言 相信很多人都有遇到过这种问题，不管是element-ui组件库还是vant-ui组件库，其中很多组件都有自己的调用方法。并且，这些方法中都有自带参数，而我们在某些情况下调用组件的这些方法的同时，可能需要传一些自定义的参数，这时候如果我们直接传，就会有冲突。以vant-ui中气泡弹出框为例我往select方法传参数1111<van-popover v-model="popoverVal" trigger="click" :actions="actions" @se
2022-04-28 09:21:03
1412
1
原创 vue2.0_vue中配置@开头的路径
安装pathnpm install path --save在vue.config.js中进行配置let path = require('path');function resolve (dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src'))
2022-04-27 09:39:56
4928
原创 vue2.0_实现图片上传前进行压缩（约10倍）
前言1、以VantUI组件库中van-uploader文件上传为例2、本例以图片大于2M才开始压缩，压缩条件可自行调节3、压缩完成得到图片的base64格式，可转换成file文件4、读取到图片之后，上传图片base64格式编码到后台，返回对应IDHTML<van-uploader :after-read="afterReadOne"> <img class="bg_img" src="../../../../assets/images/bg-1.png" v-if="iden
2022-04-21 17:09:09
2801
原创 vue2.0_模拟聊天室，实现发送的消息始终出现在容器的最底部（this.$nextTick用法）
前言 今天闲着无聊，抽空做了一个简易的PC端聊天对话窗，模仿微信的聊天UI。本来，我以为做这个不是轻轻松松么？结果，现实狠狠的给了我一巴掌。我发现在我发送出最新消息的时候，消息展示的页面没有第一时间来到最底部最新消息位置。好，针对这个问题，我直接运用了大家都会用的方式，就是通过ref获取该设置了滚动条的元素，然后在发送消息的点击事件方法当中写：this.$ refs.div.scrollTop=this.$ refs.div.scrollHeight。本来我想着，这问题不就gameover了吗？但是一测
2022-03-10 09:25:42
1352
原创 css3_设置滚动条隐藏的样式
HTML部分<div class="chat"> <div class="chat-window"></div></div>CSS部分.chat{ width: 100%; height: 100%;}.chat-window{ width: 100%; height: calc(100% - 100px); overflow: auto;}.chat-window::-webkit-scrollbar { w
2022-03-09 09:37:14
205
原创 vue2.0_子父组件通信与兄弟组件通信的使用
vuex的基本内容vue子父组件通信的学习一、什么是子父组件通信？二、为什么要使用子父组件通信？三、子父组件通信 1、子组件向父组件传递数据（this.$emit） 2、子组件向父组件传递数据（this.$refs） 3、父组件向子组件传递数据 4、父组件向子组件传递方法兄弟组件通信的学习一、子组件与子组件的通信方式（这边我直接以一个简单的在线聊天室为例子） 1、通过让父组件充当两个子组件之间的中间件（中继）。 2、通过使用EventBus（事件总线），它允许两个子组件之间直接通讯，而不需要涉及
2022-03-07 15:27:34
600
原创 vue2.0_前端跨域解决方案之proxy代理
前言 前端跨域访问别人服务器中的某个文件时，因同源策略的问题，我们的前端拿不到别人的数据，这时候我们可以使用代理的方案来解决此问题。
2022-03-02 15:48:59
2804
原创 vue2.0_移动端自适应布局之 postcss-px-to-viewport（兼容vant-ui）
前言 一般我们在做vue的移动端项目时，为了能够自适应不同分辨率，就需要根据UI设计稿的宽高进行px与rem、em的比例换算。但是这样做非常繁琐，为了解决这个问题，我们直接使用当前比较流行的插件 postcss-px-to-viewport 去配置相应的属性来进行自适应布局的构建。关于px、em、rem的区别详解可点击此处了解postcss-px-to-viewport(将px单位自动转换成viewport单位)安装插件npm install postcss-px-to-viewport --s
2022-03-02 15:40:45
1782
原创 css3_关于px、em、rem的区别详解
前言在CSS中，尺寸单位分为两类：相对长度单位和绝对长度单位。相对长度单位：按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。字体相对单位：em、ex、ch、rem；视窗相对单位：vw、vh、vmin、vmax。绝对长度单位：则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。px单位 px是像素单位，也是绝对长度单位的一种。也就是说它的尺寸是固定的，
2022-03-02 15:38:48
319
原创 vue2.0_在vue中AES加密的封装和使用
简介 AES——高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。对称加密算法也就是加密和解密用相同的密钥。封装 在src下新建一个utils文件夹，专门用来存放封装的工具。然后在utils文件夹中新建一个AES.js文件，将封装好的函数写到里面。// 引入CryptoJSconst CryptoJS = require("crypto-js");// 偏移量const iv = Crypto
2022-03-01 09:35:56
818
原创 vue2.0_在vue中MD5加密的封装和使用
简介 md5是一种常用的哈希算法，主要用于对一些重要数据进行“签名”，得到的“签名”通常都是一个32位的十六进制字符串。nodejs中有两种md5加密方法 一、通过npm安装md5npm install md5 页面中使用import md5 from "md5";//在使用的页面引入加密插件let passWord="XXXXXXX";//设置加密字符串md5(passWord); 二、用nodejs的底层crypto 加密模块(md5)npm install crypto
2022-02-28 11:16:22
1546
原创 vue2.0_在vue中ASCII排序的封装和使用
简介 输入m个字符（可以重复）后，按各字符的ASCII码从小到大的顺序输出这m个字符。首先 我这边是统一在src下新建一个utils文件夹，而后所有封装的方法我都会放在这里面。并且在utils中新建一个index.js文件，用于加工并导出这些封装好的方法。main.js中全局引入utils文件夹import * as utils from './utils'Vue.prototype.$utils = utils;utils文件夹下新建一个ASCII.js，封装然后导出。// ASC
2022-02-28 10:23:55
1288
原创 vue2.0_vuex中自动引入当前module文件夹下的所有文件
前言 试想一下，在我们做中大型项目使用vuex的时候，我们可能会创建非常多的模块，我们就会遇到需要引入 modules 文件夹下的所有的 js 文件。通常情况下，我们可以在根目录store文件夹中的index.js文件中统一导出，但是这种方式并不是很方便。这时候，我们可以使用require.context这个方法，就不需要每次都在index文件里导出了。require.context 方法的详细介绍import Vue from 'vue'import Vuex from 'vuex'impor
2022-02-25 10:46:25
1304
原创 vue2.0_vuex的学习和使用
vuex的基本内容一、Vuex的理解 1、Vuex是什么？ 2、Vuex是用来干什么的？ 3、为什么要使用Vuex？ 4、什么情况下才去使用vuex?二、Vuex的核心内容 1、State 2、Mutation 3、Getter 4、Action 5、Module 6、辅助函数 ①、mapState ②、mapGetters ③、mapMutations ④、mapAction 7、命名空间下一节内容是vuex中如何自动引入当前modules文件夹下的所有文件。一、Vuex的理解 1、Vuex是什么？
2022-02-24 17:44:17
821
原创 vue2.0_路由懒加载的设置和重置路由实现更新路由配置
路由懒加载 前言： 我们都知道网页默认刚打开的时候，就去加载了所有的页面，首屏加载速度变得很缓慢。而路由懒加载就是只加载你当前进入的那个模块页面。按需加载路由对应的资源，可以提高首屏加载速度（ 注: 首页不用设置懒加载，而且一个页面加载过后再次访问是不会重复加载的）。 实现原理： 将路由相关的组件，不再直接导入了，而是改写成异步组件调用的方法，只有当函数被调用到的时候，才去加载对应的组件内容。 普通路由配置import Vue from 'vue'import VueRouter from
2022-02-21 10:30:36
3426
1
原创 vue2.0_路由守卫——登录权限设置（ 以vue router.beforeEach()为例 ）
前言： 什么是路由守卫？ 官方的说法： 导航守卫(路由守卫)主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的、单个路由独享的、或者组件级的。 我方的说法： 路由守卫是指对路由跳转前做一些验证或者说操作一些事儿，目的是为了实现某些效果。比如没有登录的情况下，就不能进入到首页或者其它页面，只有登录了之后才有权限进入。简单讲就是路由拦截 、设置权限。讲解前：为了方便理解，我先贴一张钩子函数的执行顺序图。先讲解一下路由守卫的组成和各个钩子的理解与应用，登录权限设置放在最后
2022-02-18 11:39:18
6283
2
原创 vue2.0_vue中Vue.use 和 Vue.prototype.xxx 的区别
共同点： Vue.use( ) 和 Vue.prototype.xxx 两种方式都可以引入插件，它们都是将 插件挂载到 Vue 的实例上，这样我们就可以在全局使用这个插件。区别：1、Vue.use ①.不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式。 ②.Vue.use()的参数是{ object || Function }，如果参数是对象则必须提供 install 方法，如果参数是函数则将参数作为 install 方法，install 方法调用时会将 Vue 作为参
2022-02-16 11:04:59
608
原创 vue2.0_在vue中使用echarts图表插件
说明：本例子基于vue-cli脚手架搭建首先，安装echarts依赖npm install echarts -S注：安装NodeJS之后，使用npm来安装包使用的是国外的地址，经常会出现超时错误，这时可以通过修改为国内的淘宝镜像来加速安装。//淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org在main.js中全局引入//引入echartsimport echarts from 'echarts'//vu
2022-02-15 15:39:32
9667
原创 vue2.0_时间与日期格式化方法的封装和使用
首先在src下新建的utils文件夹中新建一个index.js文件，用于存放封装的方法。然后将获取当前时间格式和日期格式化的方法写入：/** * @Description: 获取当前时间格式 */function getNowFormatDate() { let nowDate = {}; let dateTime = new Date(); let week; // switch判断 switch (dateTime.getDay()) { case 1:
2022-02-11 15:12:02
1081
原创 vue2.0_base64类型的数据转为Blob类型的封装和使用
首先在src下的新建的utils文件夹中新建一个index.js文件，将封装的代码写入：/** * base64数据转为Blob * @ {String} base64数据 * @return {Object} Blob */function dataURLtoBlob(base64Data) { let tmp = base64Data.split(','); if (tmp.length === 2) { // 如果base64包含头部的话，去掉base64的头 tmp.s
2022-02-11 15:02:04
1090
原创 vue2.0_节流函数（2）的封装和使用
首先在src下新建的utils文件夹中新建一个index.js文件，用于存放封装的方法。然后将节流函数（2）的方法写入：/*** * 节流函数2 连续调用，每隔wait时间后触发一次（如:wait设置为300ms，一直点击，每隔300ms执行一次当前点击） * @ func 执行函数 * @ wait 等待时间 * @ {Boolean} immediate 是否立即执行 * @return {Function} */function throttle2(func, wait, imme
2022-02-11 14:46:25
875
原创 vue2.0_节流函数（1）的封装和使用
首先在src下新建的utils文件夹中新建一个index.js文件，用于存放封装的方法。然后将节流函数（1）的方法写入：/*** * 节流函数 在wait间隔时间内不再进行任何调用时，触发一次最后的调用（如:wait设置为300ms，一直点击，该函数一直不执行，只有在间隔了300ms不做任何点击后，才执行刚才的最后一次点击） * @ func 执行函数 * @ wait 等待时间 * @ {Boolean} immediate 是否立即执行 * @return {Function} */
2022-02-11 14:41:50
1436
原创 vue2.0_在vue中深拷贝的封装和使用
在src下的新建的utils文件夹中新建index.js文件，将封装代码写入：/** * 深拷贝 * @obj {Object} 被复制的对象 * @target {Object} 目标对象,默认为空对象 * @return {Object} */function clone(obj, target) { target = target || {} for (var i in obj) { if (typeof obj[i] === 'object') { targ
2022-02-11 14:14:40
550
原创 vue2.0_在vue中axios请求的封装和使用
首先npm install axios其次在src目录下新建一个utils文件夹，我们的一些封装工具都可以放在这。然后在utils文件夹下新建一个request.js文件，将aixos请求的封装写到里面：import axios from 'axios'import Qs from 'qs'import store from '@/store'import router from '@/router'import filterPath from '@/utils/filterPath'
2022-02-11 13:23:59
2225
1
原创 vue2.0_搜索框之节流函数（解决事件频繁触发导致的频繁发起请求）
节流函数前言 在我们项目中有一个比较常见的场景，我们要在input搜索框实时输入实时发送请求查询相关数据。但是实时的事件触发会导致请求被触发多次，过于频繁。为了解决这个问题，我们通过以下节流函数的方法来加以限制，以免浪费资源。具体操作，请看一下的代码。HTML//搜索框<van-search clickable class="van-search" v-model="val" show-action placeholder="请
2022-02-09 15:51:04
1713
原创 vue2.0_在vue中使用moment.js插件格式化日期时间
前言1、相信大家平时做项目的时候经常会遇到需要操作日期，获取日期等操作，一般大家都是通过new Date()去一步一步获取，这样做反而非常麻烦。今天给大家介绍一个功能强大，代码量少，快捷又方便的日期处理插件。2、废话不多说，看代码：首先npm install moment其次在main.js中使用插件Vue.use(require('vue-moment'));然后我们只需要在需要用到的页面中通过以下形式调用即可。//比如我们想获取当前的日期，就在this.moment中加入new
2022-01-11 16:25:34
1598
2
原创 vue2.0_在vue中css样式的全局封装和引用
前言1、一处封装，处处可用。步骤①在src下的静态文件assets中新建一个css文件，在文件中按照以下写法格式，自行封装好需要的样式。记住，自定义的样式要放到html中。格式：- -样式名: 样式；html { --ThemeColor: #2e73ff; --ThemeColorDark: #2d6dca; --AidColor1: #fa7d00; --AidColor2: #ff2e2e; --AidColor3: #36c67d; --Te
2022-01-11 15:03:38
1815
原创 css3_设置文字在一行内显示，超出部分显示省略号
前言日常我们在做项目的过程中都会遇到需要给一行文字很多的情况下，设置…样式。正常情况下使用一下代码就能实现：white-space:nowrap; //段落中的文本不进行换行overflow:hidden; //超出宽度部分隐藏text-overflow:ellipsis; //当文本溢出时，要发生的事。有三个值： clip - 修剪文本；ellipsis - 显示省略号来代表被修剪的文本；string - 使用给定的字符串来代表被修剪的文本width: xxx; //宽度自己设定，一
2021-12-09 16:09:24
6488
1
原创 vue2.0_在vue中实现页面前进刷新，回退不刷新；即A进入B，B刷新，B进入C，再从C回退到B，B不刷新。
前言 相信大家都知道类于信息填写的界面，有上一步，下一步的操作，就会遇到下一步刷新上一步不刷新的问题。今天我也浅薄的学习了下相关的知识和具体实现方式，接下来直接上代码让大家借鉴参考一下。一、回退不刷新首先我们要实现的是回退不刷新，即B进入到C再从C回到B时，B不刷新。在App.vue中使用keep-alive，并根据keepAlive属性来判断是否要缓存组件，true为需要被缓存，false为不需要被缓存：注意：需要被缓存的组件，要keep-alive包裹起来。<template>
2021-11-29 17:53:42
3553
原创 vue2.0_在vue中使用VantUI 实现移动端返回顶部操作
前言 今天在做移动端项目的时候，发现vant官网并没有返回顶部的组件和相关内容。因此，今天记录一下移动端返回顶部的操作。废话不多说，直接上代码。实现html部分:<van-button color="#EABA6B" class="backTop" @click="backTop" v-show="scrollType"> <van-icon class="icon-backTop" name="arrow-up" size="25" /></van-b
2021-09-10 16:23:32
2624
原创 JavaScript_input框中失去焦点事件和点击事件冲突的解决办法
前言： 在开发的过程中，我们经常会有搜索的需求，其中就涉及到的知识点就包括了今天我们要说的两个重要“角色”，input框和展示列表的li。需求： 当我们在input框中输入内容时，展示列表能够渲染出模糊查找到对应的内容。这时，当input框失去焦点的时候，我要让展示列表隐藏或消失，而且我还想点击对应的展示列表中的li时，能够将对应li的值赋值给input。问题： 那么问题来了，当我点击li的时候，也就意味着input失去了焦点，我还没有选中并拿到li中的值给input，展示列表就先一步隐藏或
2021-09-07 16:37:18
10456
原创 vue2.0_在vue中实现input输入框的模糊查询
前言 我们要实现的一个效果是，当输入框输入值时，显示数据列表框并将检索到的数据在列表框当中做展示。模糊查询功能原理分析 其实所谓模糊查询就是不需要用户输入完整的内容就可以开始查询，也就是说用户可以在边输入的同时看到查询到的结果，百度的搜索功能就是很好的模糊查询的例子；其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况，然后每次用户只要在输入框中输入了内容就会触发事件并进行查询然后实时展示。HTML部分<input type="text" placeholder="请输入
2021-09-01 11:46:33
3910
原创 css3_实现文字两端对齐或文字在容器中平均分布
我们在做项目时，难免会遇到如下红色框中文字对齐的需求，那么具体是怎么实现的呢？1、早期老套的方法：相信很多人遇到这个需求时，脑海中闪过的第一个做法就是给文字与文字之间添加空格符"   " 或" &emsp "，然后慢慢的去调整，这个做法实在是em。。。。。。代码如下：效果如下：我心态崩了。。。。。。。。2、当下流行的方法：无意间了解到 text-align:justify 的用法，我不由的心里直呼" 我屮艸芔茻 "原来还有这种操作？？？？？我满怀期待的试一下：
2021-08-25 09:55:22
4625
原创 wechat_微信小程序中解决navigator进行页面跳转并传递参数问题
1、想要实现的效果：点击对应的热门搜索关键字实现页面跳转到想要跳转的页面，并将对应的热门搜索关键字传递过来2、传递参数的页面：给要传递的元素绑定事件在methods中声明该方法，接收形参。然后使用ES6拼接字符串 " `` ",记住一定要通过拼接字符串的方式，否则会报错，再把需要传递的参数拼接在所跳转的路径后面。3、跳转后的页面：在onload()当中接收传递参数页面传过来的参数，再取值。4、最后：感谢大家的支持与谅解，作为新人我也在不断的努力去提升。之后也会不断的创作一些更好的
2021-06-16 16:08:25
1493
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人