- 博客(123)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 微信小程序请求封装
已经好久没有搞小程序的我，刚好公司来了个小程序的项目。小程序中数据请求用到的是比较多的，所以我们来封装一下1、为什么封装官方文档有api，直接用不就可以吗？为什么要封装小程序的请求呢？封装是为了方便维护和管理封装后直接传参、调用即可减少重复的请求代码，提高优雅度2、开始封装封装的时候要考虑到一些通用性和临界点，比如：没网络请求怎么办、loading效果、错误提示等等将重要的一些参数赋默认值，比如：url、method等等2-1. 根目录下新建@/utils/constant.js常量文
2022-05-13 15:43:46
2701
原创 使用vite + vue3 + pinia + ElementPlus 搭建后台管理项目
考虑到不是所有人都会ts，本文中所有的代码都是以js为主1. 环境搭建1. 默认大家都已经搭建好vite及其相关的环境如有疑问可查看官方文档：vite中文官方文档2. 使用命令行快速初始化项目：# npm 6.xnpm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线：npm init vite@latest my-vue-app -- --template vue# yarnyarn create vite m
2022-04-20 15:13:03
5198
原创 vue-cli更新至5.x初体验
前序早上刚到公司，打开浏览器准备开始学（摸）习（鱼），看到GitHub来了个通知，vue-cli已经升级至5.0.1的版本了，好奇的点进去看了下官方文档说底层已经使用上webpack5了，看样子还不错（但我还是喜欢vite~~）；node-sass也弃用了更多重大变更请查看官方文档的说明：vue-cli5重大变更说明升级至最新版这还等什么，赶快去体验一下吧首先打开终端执行npm uninstall @vue/cli -g卸载掉4.x的版本（mac版本的需要加上sudo）接着执行.
2022-02-24 10:41:07
15872
2
原创 小程序字母检索列表
先上效果没错看着界面很像黄轶老师webapp的，其实就是想用小程序实现一个，可以根据界面滚动位置字母也实时高亮，也可以点击字母索引跳转到对应的位置
2022-01-07 15:54:59
2011
2
原创 使用vite2.x + react17.x搭建项目
vite版本版本：vite：2.7.2react版本：react：17.0.2代码仓库地址：gitee地址哦今天是2022年的第一天上班，想着 摸会鱼吧 学习新东西，也好久没弄vite和react了，干脆一不二不休，一起整一个1、创建项目命令# npm 6.xnpm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线：npm init vite@latest my-vue-app -- --template vue
2022-01-04 11:56:57
1452
原创 @toast-ui/editor配置cdn
背景最近用vue3开发完成项目打包的时候，发现有些模块占用的体积很大，通过webpack-bundle-analyzer分析工具我们可以看到打包后@toast-ui/editor整整都快1M了，思索半天决定采用cdn化，减少体积vue版本：3.2.26@toast-ui/editor版本：3.0.21、在vue.config.js配置对应的js、css资源**不要从jsdelivr里面去引入，下面会说为什么**在vue.config.js中configureWebpack选项里.
2021-12-31 10:08:47
1213
原创 vue3 + element-plus组件的国际化
1、首先官网是这样说明的：vue版本：3.2.26element-plus版本：1.2.0-beta.6然后我在main.js中也这样写了于是乎在项目没生效我只能说官方的文档能不能细心点～～·2、使用ElConfigProvider全局配置组件在app.vue中使用组件<template> <el-config-provider :locale="locale"> <router-view /> </el-config-.
2021-12-25 17:41:45
2944
原创 react脚手架配置多页应用
1、暴露配置文件首先终端运行npm run eject暴露出配置文件，然后我们找到public文件夹下，新建对应的html文件2、修改默认配置在config文件夹下找到webpack.config.js这个文件，我们来修改默认配置entry修改因为配置的是多页应用，所以我们要先找到入口即entry进行修改，红框中就是修改后的HtmlWebpackPlugin修改没有修改前的是只有一个的，现在我们加上几个即可，然后写入对应的filename、template、chunks.
2021-11-03 11:52:23
792
1
原创 react脚手架配置cdn
项目是使用react脚手架搭建的，使用了customize-cra、react-app-rewired来修改脚手架默认的配置1、添加配置项安装和配置完成基本的config-overrides.js后，添加addWebpackExternals选项用来配置cdn完整的配置项请查看：官方文档，下面只展示配置cdn的代码在里面写入我们需要cdn加载的文件，我们直接把G2plot挂载到全局const {override, addLessLoader, addWebpackAlias, addWebpa
2021-09-30 16:16:13
2084
原创 vue3中使用$refs
1、在vue2中可以通过this来访问到$refs，vue3中由于没有this所以获取不到了，但是官网中提供了方法来获取知道了怎么获取后，我们结合ElementPlus来使用，因为项目中用到了ElementPlus的表单验证，官网也是醉了，还写的是vue2的写法话不多说，上代码由于我得form表单外面包了一层el-dialog，是不能在onMounted中获取到$refs的，应该在触发对应事件，让dialog绑定的v-model变为true的获取获取 label-position=
2021-09-29 11:18:33
44631
4
原创 react脚手架中使用less
前几天用react写后台的时候，想着用用less，因为之前一直都用的是sass，这次换一下，兴高采烈地使用脚手架搭建完项目，写入less的时候，run起来一看，不生效！！！啥也没有摸索了半天也没头绪，于是就在终端中npm run eject发现竟然没有less相关的loader，然后我又兴高采烈的npm安装less相关依赖，再次run一下，还是没效果，去github上看了下，原来还需要再次配置主要修改的地方如下图**添加完这个之后，再去修改下一个地方：**let preProcesso
2021-09-14 16:31:50
507
原创 vue-cli4.x中使用cdn引入vue全家桶、element、axios、map等等
使用npm安装完成的依赖打包完成后体积竟然达到了9.7MB，这才只是写了8个页面，所以考虑采用cdn引入1、在vue.config.js中添加cdn配置module.exports = { configureWebpack: { //使用cdn externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios':'axios',
2021-08-17 18:31:29
902
原创 react脚手架、webpack按需引入antd + 配置主题
使用脚手架创建完项目后，接着来安装antd：npm install antd --save按照官方说的，接着在引入样式：import 'antd/dist/antd.css'这样当然是不推荐的，默认就把他全部的样式引入了，体积增加了不少，推荐使用 customize-cra、react-app-rewired、babel-plugin-import首先安装这三个依赖：npm install customize-cra react-app-rewired babel-plugin-import --s
2021-07-20 10:59:42
954
原创 小程序自定义三级联动
小程序的picker组件中，三级联动的只有省市区、时间等等，某些自定义要求高的的就要使用picker的多列选择器了，效果图：当滑动每一列的时候，会根据每列的唯一标识去查找下一列对应的数据后台返回的数据是一个三维数组wxml代码 <picker mode="multiSelector" bindchange="bindCustomPickerChange" bindcolumnchange="bindCustomPickerCo
2021-07-17 09:40:31
801
原创 小程序图片上传formdata boundary + base64
因为小程序上传图片只能单图上产，想着上传图片的时候直接for循环搞上去，谁知后台要一个文件类型（boundary），就这样头疼的搞了一中午，直接先看效果吧module.exports = function(app) { app.use( proxy('/api1', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
2021-06-25 09:37:53
201
原创 使用函数柯里化（高阶函数）处理多个input
有这样一个添加个人信息的form表单，点击确定的时候，在控制台输出他所填写的内容（以react为例）要是按照我刚写代码的时候，肯定是一个输入框一个方法，然后在进行赋值；万一输入框多了那就真tm难受我们可以通过调用一个函数传不同的参数来进行优化函数柯里化的方式import React, { Component } from 'react'export default class Demo extends Component { state = { name: '',
2021-06-08 11:38:12
150
原创 react中refs的使用
这里介绍三种用法：回调形式、api形式、ref hooks1、回调形式使用回调会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数import React, { useRef, Component } from 'react'export default class Demo extends Component { cli = () => { //此时的handler就会被挂载到this上，即Demo组件的实例对象上
2021-06-07 15:51:08
178
原创 webpack结合vue2.x使用svg
首先去阿里巴巴下载几张svg图片，然后新建iconfont文件夹用来存放svg相关，并新建index.jsindex.js代码// 引入 svg 目录下所有文件const req = require.context('./svg', false, /\.svg$/)const requireAll = requireContext => requireContext.keys().map(requireContext)requireAll(req)然后在components目录下新
2021-06-03 13:40:49
402
1
原创 vue3中挂载全局变量
vue2.x挂载全局是使用Vue.prototype.$xxxx=xxx的形式来挂载，然后通过this.$xxx来获取挂载到全局的变量或者方法在vue3.x这种方法显然是不行了，vue3中在setup里面我们都获取不到this，官方提供了另一种方法来让我们使用，上代码首先在main.js中写入我们需要挂载的一个变量，比如一个地址吧main.jsimport { createApp } from 'vue'import App from './App'import store from '@s
2021-05-24 14:22:09
34805
9
原创 vue中使用高德地图
npm安装一下依赖：npm install vue-amap --save没有key的要去高德控制台里面去申请一个：https://lbs.amap.com这里的使用方法没有像其他文章的那样，先引入，然后再Vue.use(AMap)1、在项目的index.html中引入<script src="https://webapi.amap.com/maps?v=1.4.7&key=你申请的key写在这里&plugin=AMap.CitySearch,AMap.Autocomplete
2021-05-19 16:51:23
294
原创 在vue中结合element-ui使用nprogress
先来看下效果主要是在点击左侧menu菜单栏的时候加载进度条，并且右上角有一个小loading，当路由切换完成的时候进度条到底，loading小动画和进度条一起消失主要用到的是element-ui中的Progress组件和nprogress，首先在项目中安装nprogress：npm install --save nprogress安装nprogress的npm文档介绍：https://www.npmjs.com/package/nprogress主要通过这两个方法来控制进度条写代码之前先思考
2021-05-19 15:12:25
1065
1
原创 小程序购物车组件
全选、反选、单选、数量加减、价格和总数量计算都有；后期有时间再加入左滑删除的功能可以单独做成一个组件，只需要动态传入一个购物车的数组即可，这里就只说直接用的了shopcart.wxml1、主要利用了checkbox-group和checkbox组件来实现2、全选的时候通过一个checkbox来包裹住并设置value="all"，然后改变每一个checkbox的checked属性，这样简单点<!--pages/shopcart/shopcart.wxml--><view c.
2021-04-21 16:22:51
1155
原创 react17.x中react-redux的基本使用
使用之前安装react-redux：npm install react-redux一个项目中用到store中数据的组件有很多，所以应该把他放在App.js在App.js中引入react-redux。并将子组件使用Provider组件包裹起来子组件被Provider组件包裹起来后，每个子组件都能通过一些方法获取到store中的数据，将store传递给每个被包裹的子组件app.jsimport TodoList from './views/TodoList'import { Provider }
2021-04-16 11:00:42
640
原创 react（17.x）-redux中间件----thunk、saga的简单使用
这里的中间件指的是action和store之间redux-thunkredux-thunk这个中间件就是对dispatch方法的一个升级，如果dispatch中传递的是一个对象，会直接传递给store；如果是一个方法，会先执行这个方法1、使用之前先安装一下：npm install redux-thunk2、配置一下redux-thunkredux-thunk和redux-devtools一样都是一个中间件，需要在store中配置，可以查阅github：https://github.com/z
2021-04-15 11:20:35
242
原创 react17--redux入门
流程先看张redux工作流程图刚开始看我也有点懵，把他比喻成生活中的一个小例子就好理解了，比如图书馆借书的例子：首先简单的把components比做成借书的人当借书人(components)说：我要借书，那么说话的这个行为就是actions这时候图书管理员(Store)听见了，他来集中管理书籍的信息、数据图书管理员(Store)也不知道你要借哪一本书、有没有这本书，他要求查一下，看下手册(reducers)，最后告诉管理员(Store)关于这本书的数据信息1、首先我们的组件要访问St.
2021-04-13 15:24:22
263
原创 使用es6的class类进行模块化封装、请求
es6中的class类出来以后，es5的构造函数我都用得比较少了，虽然以前项目用到的class类也有但是很少，这次用的很普遍，记录一下一些小问题子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象ES6 的继承实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用su
2021-04-12 16:29:03
1093
原创 使用vite搭建vue3.0项目
vite和vue3已经出来有段时间了，最近一直忙着没时间搞一下，最近搞了一个还不错安装vite下载模板vite中文文档：https://cn.vitejs.dev/guide/vue3中文文档：https://vue3js.cn/docs/zh/guide/introduction.html通过在vscode中运行以下命令，可以使用 Vite 快速构建 Vue 项目1、安装一下：npm init vite-app 你的项目名字2、进入项目：cd <project-name>3、
2021-04-09 11:31:57
6330
1
原创 小程序实现按照首字母检索列表
废话不多说，先看效果布局的话是分成左右两侧，主要用到的是小程序的scroll-view组件中的scroll-into-view和bindscrollwxml代码catchscroll换成bindscroll也可以的<view class="main-container"> <!-- 左侧滚动list --> <scroll-view wx:if="{{onsearch === false}}" class='list-left'
2021-04-06 17:01:24
926
原创 对象的扩展与深、浅层拷贝
1、对象的扩展这部分只介绍开发中用的比较多的地方对象属性名的简写//当key、value相同的时候我们可以简写成这样const name = '1212'let obj = { name }现在我们有一个对象和字符串，我们怎么让这个字符串作为对象的key呢let s = 'school'let obj = { name: 1212, age: 3434, [school]: '我是学校', //es6中对象方法的简写 stydy(){ console.log(this.n
2021-03-23 11:12:19
105
原创 小程序获取公众号文章并展示
最近在忙公司的项目，正忙得要死要死的，客户又来了一个傻* 的需求：要在小程序内显示对应公众号的文章列表，点击列表中的某一个跳转到文章详情里面，当时我只想说：xxxxxxxxx，没办法搞起来吧，谁让客户就是傻* 呢！！！这里要获取的是公众号的数据。先去微信公众号开发文档看一眼：微信公众号开发文档然后我们找到素材管理-----》素材列表，这里就有我们想要的内容了1、关联公众号关联不关联小程序我是不晓得，反正我的是没有关联，有需要的关联下就好，不过打开文章的话要关联的。步骤如下：1、登录到对应的公
2021-03-19 15:14:38
5707
原创 超实用js技巧，帮你提升代码质量
**1、改写多个if else**某一天我看见了这样一段代码，看的真是心里难受。。。。。if (index === '1') { return 'index';} else if (index === '2') { return 'my';} else if (index === '3') { return 'classify';} else if (index === '4') { return 'shopcart';} else if(index === '5'){ re
2021-03-16 10:36:34
252
原创 超详细react-native开发android---环境搭建（附截图）
这里介绍的是完整的用windows开发android原生环境，官方文档：rn环境开发搭建开发和搭建环境之前提醒一下大家，电脑配置一定要好一点，不然就会向我那样，都快成功了，结果卡死机了，fuck！！！，话不多说直接上步骤1、下载安装、配置JDKRN官方提示：JDK 的版本必须是 1.8；Node 的版本应大于等于 12；而且：千万不要使用npm，重要的话说三遍：千万不要使用npm！千万不要使用npm！千万不要使用npm！，我刚开始不听，就要用cnpm，结果后面的依赖路径都错乱了，一直报错，建议网
2021-03-04 11:10:14
2245
1
转载 小程序日历组件
先看一下效果图本篇文章只是在原文的基础上进行小修改和代码的部分优化，里面注释我已经写的很清楚了，这个组件可以用来做签到，买火车票那种的组件等等；屁话不多说，直接上代码**子组件代码**组件wxml代码<view class="calendar-main-container {{isBtnShowModal===0?'calendar-transit':''}} {{isShowModal?'':'calendar-unactive'}}"> <!-- 年月份、左右箭
2021-03-03 15:54:20
1749
1
原创 小程序文字通告栏（文字向左无限滚动）
这个功能我是封装成了组件，方便以后的复用，如果用的少的可以单独在页面写先看效果。gif截图工具最近有点不太正常。。。。。。上代码notice.wxml代码图片的css样式根据个人情况修改下吧<!--components/notice/notice.wxml--><view class="notice-container"> <image style="width:30rpx;height:30rpx;margin:0 20rpx" src="{{imagePa
2021-02-25 10:24:59
1995
1
转载 小程序瀑布流
先看一下效果，gif图片不知道怎么回事，太大了，上传不了注释写的很详细就不解释了本想做成单个页面的，但是考虑到以后的复用性还是做成组件吧waterFallFlow组件wxml代码<!--component/waterfallFlow/waterfallFlow.wxml--><view class="waterfallflow-main-container"> <!-- 左侧部分 --> <view class="fallflow-left-
2021-02-23 16:23:57
582
原创 vuex简单使用、监听state值变化（设置主题色）
vuex主要是vue的状态管理，如果我们在项目中只通过传参、缓存等方式来同步data中的值，一旦项目变得大了页面多并且很复杂的时候就会变得很难维护和管理。vuex就把我们频繁使用的值进行集中管理，可以在整个项目中共同使用state：存储状态（变量）。使用：$sotre.state.xxxgetters：可以理解为state的计算属性。加工state成员给外界。使用：$sotre.getters.functionName()mutations：修改状态，并且是同步的。可以用来修改state中的状态。使
2021-02-22 15:56:26
6265
原创 webpack + react + antd + scss（scss模块化）的简单使用
本文的react项目是基于webpack搭建的，没有用脚手架搭建，可以看一下我的这篇博客：使用webpack搭建react项目到antd官网安装一下：npm install antd --save然后找到layout布局看着哪个布局顺眼copy一下代码使用sass的时候先安装以下几个依赖：node-sass：npm install node-sasssass-loader：npm install sass-loader sass webpack --save-dev我们先来新建一个scss文件
2021-02-19 16:30:47
1393
原创 Android Studio汉化教程
先去AS的官网下载一个：AS官网1、下载汉化包：AS汉化包下载地址2、找到AS安装目录，然后找到lib文件夹lib文件夹里面有一个resources_en的东东将该文件复制到桌面，并改名为resources_cn，然后用解压工具打开这个文件，里面有这些东东3、用压缩软件打开我们刚刚下载好的汉化包，千万别解压！！！，在zh_CN有这些东西，ctrl+A全选，然后复制4、用压缩工具打开刚刚复制到桌面并重命名为esources_cn的那个文件，里面有一个message的文件夹，将我们全选的东西
2021-02-08 14:34:53
18910
17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人