2021年04月_热爱°可抵岁月漫长

原创 vue项目封装模块之使用jsencrypt对数据加密解密

vue项目对数据加密解密的模块封装import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'// 密钥对生成 http://web.chacuo.net/netrsakeypairconst publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' + 'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9.

2021-04-24 18:48:30 389

原创 vue项目移动端Rem布局适配

Rem 布局适配如果需要使用rem单位进行适配，推荐使用以下两个工具：postcss-pxtorem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位（https://github.com/cuth/postcss-pxtorem） lib-flexible用于设置 rem 基准值【设置html的字体大小】（https://github.com/amfe/lib-flexible）PostCSS 示例配置下面提供了一份基本的 PostCSS 示例配置，可以在此配置的...

2021-04-24 17:05:09 532

原创微信小程序配置自定义组件代码按需注入 lazyCodeLoading

lazyCodeLoading基础库 2.11.1 及以上版本支持，2.11.1 以下兼容但无优化效果通常情况下，在小程序启动期间，所有页面及自定义组件的代码都会进行注入，当前页面没有使用到的自定义组件和页面在注入后其实并没有被使用。自基础库版本 2.11.1 起，小程序支持有选择地注入必要的代码，以降低小程序的启动时间和运行时内存。{ "lazyCodeLoading": "requiredComponents"}当配置了这一项时，小程序仅注入当前页面需要的自定义组件和页

2021-04-30 11:52:55 15674 8

原创微信小程序 lazy-load lazy-load-margin=“0.5“

https://developers.weixin.qq.com/community/develop/doc/0004ae841f0ea84cfd8872f0b5b800?highLine=aspectFill&jumpto=reply&commentid=000a6cc85f8858021598bb45a510&parent_commentid=0000ea2e304a281cff887b0dd518

2021-04-30 11:31:38 468

原创微信小程序数据预拉取

官方链接：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/pre-fetch.html数据预拉取预拉取能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据，当代码包加载完时可以更快地渲染页面，减少用户等待时间，从而提升小程序的打开速度。...

2021-04-30 11:12:28 944

原创发现：微信小程序开发自定义tabBar记录收藏

微信小程序开发---自定义tabBarhttps://segmentfault.com/a/1190000016283268

2021-04-30 11:02:52 94

原创微信小程序检测更新

检测更新 async checkPackage() { if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) { updateManager.onU

2021-04-29 17:36:30 182

原创微信小程序记录websocket用法

// 获取用户认证字符串发起长链接 courseAuth() { cloudClassApi .courseAuth() .then((res) => { // console.log(res, '用户认证字符串') this.setData({ authrization: res, }) if (!res) { return this.courseAuth(.

2021-04-29 17:15:48 174

原创微信小程序监听网络状态变化事件

wx.onNetworkStatusChange((res) => { let msg = '' if (!res.isConnected) { msg = '当前网络不可用，请检查你的网络设置' } else if (res.networkType === 'none') { msg = '网络开小差了,请网络良好后重试' } if (msg) { wx.showToast({ .

2021-04-25 18:06:24 808

原创 vue vant组件库下拉刷新组件 van-pull-refresh

<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh" success-duration='1500'> <p>刷新次数: {{ count }}</p></van-pull-refresh>onRefresh(){ //1、请求最新的数据 //2、将数据追加到列表的顶部 //3、关闭下拉刷新loding状.

2021-04-25 18:04:50 3666

原创微信小程序网络请求request封装

import { getAccessToken, getServer } from '/store/mutations'declare namespace Api { type Prefix = string /** 请求选项 */ interface Options { /** 请求方式 */ method?: 'GET' | 'POST' | 'PUT' | 'DELETE' /** 请求头 */ header?: object /** 请求 .

2021-04-25 18:03:44 224

原创 vue vant组件库 tab样式调整

<template> <div> <van-tabs v-model="active" class="vant-tab-wrap" swipeable animated sticky> <van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 2">内容 2</van-tab> <van-tab title="标签 .

2021-04-24 20:25:59 5843

原创 vue项目 watch之 $route

vue登录页面使用立即监听$route的方式，得到登录后跳转会的路径 watch: { $route: { handler: function (route) { console.log("跳转回参数页面", route.query.redirect); this.redirect = route.query && route.query.redirect; }, immediate: true, ..

2021-04-24 19:09:26 9950

原创 vue项目登录方法记录

vue项目登录方法记录 handleLogin() { this.$refs.loginForm.validate((valid) => { if (valid) { this.loading = true; if (this.loginForm.rememberMe) { Cookies.set("username", this.loginForm.username, { expires: 30 }.

2021-04-24 19:07:38 380

原创 vue项目登录页面从取数据回显在登录表单中

vue项目登录页面从取数据回显在登录表单中由于登录密码在存储时是做了加密操作，所求取数据时需要解密//页面需引入加密解密的方法created() { this.getCookie(); },methods: { getCookie() { const username = Cookies.get("username"); const password = Cookies.get("password"); const rememberMe...

2021-04-24 19:06:19 466 1

原创 vue项目 vuex的getters模块

getters.jsconst getters = { sidebar: state => state.app.sidebar, size: state => state.app.size, device: state => state.app.device, visitedViews: state => state.tagsView.visitedViews, cachedViews: state => state.tagsView.cach...

2021-04-24 18:57:59 780

原创 vue项目 user相关的vuex模块

vue项目user相关的vuex模块import { login, logout, getInfo } from '@/api/login'//引入封装相关的接口import { getToken, setToken, removeToken } from '@/utils/auth'//引入Token存储相关操作import { Notification, MessageBox, Message } from 'element-ui'const user = { state: {

2021-04-24 18:55:41 396

转载 vue项目使用cookie进行token存储的模块封装

vue项目使用cookie进行token存储的模块封装utils/auth.jsimport Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() { return Cookies.get(TokenKey)}export function setToken(token) { return Cookies.set(TokenKey, token)}export .

2021-04-24 18:47:26 260

原创 vue项目网络请求拦截器

config.headers['Authorization'] = 'Bearer ' + getToken()// 请求拦截器service.interceptors.request.use(config => { // 是否需要设置 token const isToken = (config.headers || {}).isToken === false if (getToken() && !isToken) { confi...

2021-04-23 21:48:57 824 1

原创 vue项目路由导航守卫控制访问权限

理解版router.beforeEach((to, from, next) => { // 如果用户访问登录页，直接放行 if (to.path === '/login') return next() if (getToken()) { next() } else { next(`/login?redirect=${to.fullPath}`) }})企业版import router from './router'import store fr

2021-04-23 21:02:23 549

原创 throttle示例应用

<!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"> <title>D.

2021-04-20 22:12:42 123

原创 debounce应用示例

<!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"> <title>D.

2021-04-20 21:50:19 107

原创封装图片预加载

imagesPreLoad(imgPaths,callback){ let returnImages={} let num=0; for(let key in imgPaths){ num++ let imgObj=new Image(); imgObj.src=imgPaths[key]; returnImages[key]=imgObj; returnImages[ke..

2021-04-14 23:22:52 47

原创微信小程序面试题整理（自用）

1、微信的小程序的主要文件wxml、js、json、wxssapp.json：配置文件入口，整个小程序的全局配置app.js：做了什么：1、引入工具js文件importutilfrom'./utils/util.js';引入config文件varconfig=require('./utils/config.js')、接入友盟注册小程序每个小程序都需要在app.js中调用App方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。// app....

2021-04-14 16:15:29 8659

原创 vue项目 Cookie的使用（js-cookie插件）

https://blog.csdn.net/pengjunlee/article/details/105687272?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-4&spm=1001.2101.3001.4242

2021-04-13 21:49:44 198

原创 vue项目 pc端网站使用nprogress

纳米级的进度条，涓涓细流动画告诉你的用户，一些事情正在发生！链接。https://madewith.cn/23安装NPMnpm install --save nprogress使用直接调用start()或者done()来控制进度条。NProgress.start();NProgress.done();可以通过调用.set(n)来设置进度，n是0-1的数字。NProgress.set(0.0); // Sorta same as .start(...

2021-04-13 21:47:59 53

原创 vue项目路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明

https://blog.csdn.net/qq_41912398/article/details/109231418

2021-04-13 21:46:22 390

原创 vue项目 webpack4下import()模块按需加载,打包按需切割模块，减少包体积，加快首页请求速度

https://www.cnblogs.com/both-eyes/p/10873155.html

2021-04-13 21:45:43 179

原创 vue项目使用jsencrypt.js对数据进行加密传输

https://www.jb51.net/article/159904.htm

2021-04-13 21:44:33 142

原创 https://zhuanlan.zhihu.com/p/195539197

https://zhuanlan.zhihu.com/p/195539197

2021-04-13 21:43:31 2999

原创 2021-04-13

使用到webpack require()动态加载模块 { path: '/user', component: Layout, hidden: true, redirect: 'noredirect', children: [{ path: 'profile', component: (resolve) => require(['@/views/system/user/

2021-04-13 14:08:52 55

原创 webpack的require.context()实现组件的引入和注册

require.context(directory,useSubdirectories,regExp)directory:表示检索的目录 useSubdirectories：表示是否检索子文件夹 regExp:匹配文件的正则表达式,一般是文件名例如require.context("@/views/components",false,/\.vue$/)1、常常用来在组件内引入多个组件。const path = require('path')const files = require..

2021-04-13 13:47:43 193

原创微信小程序 wx.getUserProfile()

外号外号：不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息<view class="container"> <view class="userinfo"> <block wx:if="{{!hasUserInfo}}"> <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserP...

2021-04-07 12:37:01 1045

weixin_46337813的博客