幸福了，然后呢-优快云博客

原创 uni-app实现页面通信EventChannel

之前使用了EventBus的方法实现不同页面组件之间的一个通信，在uni-app中，我们也可以使用uni-app API —— uni.navigateTo来实现页面间的通信。注：2.8.9+ 支持页面间事件通信通道。

2024-05-30 17:06:30 1192

原创 vue2与vue3使用EventBus

【代码】vue2与vue3使用EventBus。

2024-05-29 16:04:11 294

原创 eslint 报错 ‘getCurrentPages‘ is not defined no-undef

ESLint 报错 ‘getCurrentPages’ is not defined no-undef 表示在当前的代码作用域中没有找到。getCurrentPages 的定义，因为它不是 JavaScript 或 ESLint 的内置方法。来局部禁用规则，使用完毕后通过。使用微信小程序开发时用到了。在特定的函数作用域内通过。

2024-05-21 11:07:27 508

原创 uniapp小程序位置信息配置

【代码】uniapp小程序位置信息配置。

2023-08-25 14:21:48 2497

原创随手记——前端安全策略 Content-Security-Policy – CSP

前端meta标签中配置了CSP安全策略，导致使用第三方地图插件的时间报错不展示。

2023-07-19 14:53:08 2945

ref 几种情况下的使用(1) <Form>组件中：ref={ref => (FormRef = ref)}import React, { useRef } from 'react';import { Input, Form, Row, Col } from 'antd';const { TextArea } = Input;const Delete = props => { let FormRef = useRef(); const saveData

2022-03-29 16:05:02 1147

原创 JS 分割url参数

JS 分割url参数url地址示例：http://pages/index/index?id=12&name=zhangsan&age=18js 分割：let url = "http://pages/index/index?id=12&name=zhangsan&age=18";let obj = {};let str = url.split("?")[1].split("&");for (let i = 0; i < str.length; i++)

2021-10-22 15:07:04 3279

转载 Object.keys() 和 Object.values()、ES6中some和every的使用方法

Object.keys() 和 Object.values()、ES6中some和every的使用方法项目代码：let flag = Object.values(values).some(item => item);内容讲解：一、Object.keys()1.Object.keys()处理对象数据时:返回可枚举的属性数组 let obj = { name:'张', age:16, sex:'nan' } console.log(O

2021-10-12 14:18:48 1552

原创 uniapp实现可滑动顶部选项卡

uniapp实现可滑动顶部选项卡利用<scroll-view>和<swiper>实现可滑动顶部选项卡，实现效果类似下图：这里，简单模拟一下，实现一个大致效果一、构建顶部tab选项按钮步骤使用<scroll-view>组件布局，横向滑动需要使scroll-x="true"设置选项按钮的初始数据barNameList及当前默认第一个tab所在位置tabIndex点击选项按钮获取当前下标值@click="ontabtap"，切换状态<scroll-vi

2021-09-22 11:23:00 13940 5

原创 uni-app小知识点记录

uni-app开发中的一些小知识点记录require.context( )vuex中 actions方法HTML5+ 之 plus在代码热更新中的使用一、require.context( )const modulesFiles = require.context('./modules', true, /\.js$/)文件结构示例：语法: require.context(directory, useSubdirectories = false, regExp = /^.//);d

2021-09-14 15:28:23 3407 2

原创 taro启动微信小程序报错Error: Cannot find module ‘@tarojs/plugin-platform-weapp‘ from...

taro启动微信小程序报错Error: Cannot find module ‘@tarojs/plugin-platform-weapp’ from…报错提示如下图：问题原因：项目使用的cli版本与本地使用的版本不一致解决办法：找到项目的package.json文件，查看taro版本，安装对应版本修改版本：npm install @tarojs/cli@3.0.5再次运行：npm run dev:weapp项目启动成功：...

2021-07-29 11:13:22 21717 5

原创 uni-app图片高度自适应及无法设置背景颜色

一、图片高度自适应图片自适应本身的高度mode="widthFix"<view class="ad"> <image class="img_style" src="../../static/images/adpage.jpg" mode="widthFix"></image> </view>mode的其它取值：二、无法设置背景颜色<style scoped lang='scss'> </style>//在

2021-06-16 10:46:01 775

原创 uni-app父子组件间的方法调用及传值

uni-app父子组件间的方法调用及传值方法调用：一、父组件调用子组件里的方法先准备一个子组件<template> <view></view></template><script> export default { data(){ return {} }, methods:{ childMethod() { // 子组

2021-06-04 18:33:37 2370

原创 main.js中Vue.prototype用于全局页面的变量

main.js中的Vue.prototype可用于全局页面的变量(store为例)uni-app项目，在main.js文件中使用Vue.prototype方法挂载一个可用于全局页面的变量import Vue from 'vue'import App from './App'import store from './store'Vue.prototype.$store = store通过这个方法，可以在其他页面直接进行使用：let TMSids = [];// 对TMSids变量进行一系列

2021-05-27 11:19:34 2359

原创初识 /deep/ 和＞＞＞

初识 /deep/ 和 >>>前提场景：在开发vue或者uni-app的时候，我们会用到一些第三方的ui组件库，例如element ui，我们的需求可能在这些ui组件库里找不到完全适合的样式，需要我们在此基础上修改样式以来实现自己的需求。此时，我们就可能会遇见这样一个问题，找到了组件库元素对应的标签名，修改此标签样式，但是并不生效，这可能是实际上就没有找到这个元素，这时我们就需要一个选择器能深度的帮助我们找到这个元素，比如>>>解决办法：使用深度作用器<sty

2021-05-19 15:26:01 494

原创 view标签自定义属性传参

view标签自定义属性传参功能描述：顶部Tab栏切换，点击tab标签获取对应的下标值，完成底部列表数据的切换代码示例：循环tab栏数据渲染，自定义属性data-current，取的是每一个tab对应的它自己的下标值，分别为0，1，2<view v-for="(tab,tabIndex) in tabBars" :key="tab.status" :class="tabIndex==currnetTabIndex ? 'tab-item active': 'tab-item'" :id=

2021-04-27 10:34:11 718

原创使用vm.$nextTick更新视图

使用vm.$nextTick更新视图选择一个文件后，想要将文件名及文件路径显示出来，直接使用this.filePath修改不生效，vue中有vm.$nextTick( [callback] )方法可以更新视图数据：可参考官方文档：https://vuejs.bootcss.com/api/#vm-nextTickchooseFile: function() { // 选择文件 uni.chooseFile({ count: 1, success: function(res) { th

2021-04-06 11:04:04 238

原创 uni-app无法运行到微信开发者工具

uni-app无法运行到微信开发者工具uni-app在微信开发者工具里运行：注：首次运行需要配置微信开发者工具IDE的路径：按照官网说的配置完成后运行，还是无法运行，需要配置微信开发者工具，打开服务端口：配置完成后成功运行：...

2021-03-29 10:51:53 3179

原创 uni-app Canvas中解决文本颜色被背景色覆盖问题

uni-app Canvas中解决文本颜色被背景色覆盖问题步骤1：用uni-app中的canvas绘制一矩形，边框设置为红色，背景色设置为黄色： draw: function() { context.beginPath() context.rect(25, 25, 50, 50); context.setFillStyle('yellow'); context.setStrokeStyle('red'); context.stroke(); contex

2021-03-19 15:06:23 5060

原创 Vue中@click.stop与@click.prevent

Vue中@click.stop与@click.prevent一、@click.stop问题：父元素中添加了一个click事件，其下面的子元素中也添加了click事件，此时，我想点击子元素获取子元素的点击事件，但却触发的是父元素的事件：<view class="footer-box" @click="clickCard"> <view @click="footerClick('喜欢')"><text class="footer-box__item">喜欢</

2021-03-12 11:29:35 31857 1

原创 HbuilderX运行报错:‘代码使用了scss/sass语言,但未安装相应的编译器插件...‘

一、问题打开Hbuilder运行项目，报错：二、解决方法：点击工具–>插件安装–>安装新插件，列表中如果未找到scss/sass编译插件，可选择前往插件市场安装

2021-03-10 10:02:04 2051

转载 ES6 new Set用法小记(转载)

一、什么是Set()Set是es6新增的数据结构，似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合。Set本身是一个构造函数，用来生成 Set 数据结构二、增删改查1.添加元素 add添加某个值，返回 Set 结构本身，当添加实例中已经存在的元素，set不会进行处理添加(重复的只会添加一次)let list=new Set();list.add(1)list.add(2).add(3).add(3) // 2只被添加了一次2.删除元素 delet

2021-03-04 18:33:35 357 1

原创 vue-cli安装及项目初始化

一、安装vue-cli打开cmd进入D盘(我自己的文件在D盘)C:\Users\Admin>D:安装vue-cli脚手架npm install -g @vue/cliTip：npm安装可能会很慢，我们可以使用cnpm进行安装：先安装淘宝镜像npm install -g cnpm -registry=https://registry.npm.taobao.org使用cnpm查看版本，验证cpn是否安装成功cnpm进行安装vue-clicnpm install

2021-03-03 15:43:22 318 1

原创 react 报错：There are multiple modules with names that only differ in casing.

react 报错：There are multiple modules with names that only differ in casing.这是因为引入文件的时候路径中大小写不匹配问题：我们就改一下文件名称大小写就可以啦~

2020-09-30 15:22:50 972

原创 antd+FileSaver实现浏览器文件下载

antd+FileSaver实现浏览器文件下载一、antd绘制下载文件按钮<Button loading={this.state.downLoading} type="primary" onClick={() => { this.downLoadExcel(); }}> <DownloadOutlined /> 模板下载{' '}</Button>二、FileSaver实现文件下载安装：npm i

2020-09-23 13:27:01 997

原创 Ant-Design Upload实现文件上传

Ant-Design Upload实现文件上传const [form] = Form.useForm();const [fileList, setFileList] = useState([]); // 点击保存const okHandle = () => { form.validateFields().then(fieldsValue => { let data = new FormData(); //通过FormData将文件转成二进制数据 let

2020-09-16 10:47:35 5443

原创 findDOMNode is deprecated in StrictMode报错解决方法

findDOMNode is deprecated in StrictMode报错解决方法报错：findDOMNode is deprecated in StrictMode......这是因为在开始创建项目得时候，我们在/src/index.js下使用了严格模式得代码：这时，我们把这个代码删除掉就可以了。...

2020-08-26 20:56:42 4307

原创 react中yarn eject报错的解决办法

react中yarn eject报错的解决办法前情：react官方脚手架创建项目的时候没有webpack的一些相关配置，这时候我们可以通过yarn eject命令将webpack的相关配置属性暴露出来。报错：解决方法：提交git文件，再重新执行即可git add .git commit -m 'xxx'yarn eject命令成功运行后会发现暴露出许多新文件，例如：在这里就可以找到webpack.config.js文件进行修改了。...

2020-08-24 21:24:33 1793

原创 jQuery删除数组中指定的元素

jQuery删除数组中指定的元素方法：arr.splice($.inArray(元素, 数组), 删除的个数);var arr = ['a','b','c','d'];arr.splice($.inArray('a', arr), 1);console.log(arr);结果： [“b”, “c”, “d”]注：这里有一个坑，如果要删除的元素在原数组中不存在，会将原数组的最后一个元素删除掉：var arr = ['a','b','c','d'];arr.splice($.inArray('

2020-07-14 21:17:17 10021

转载 call与apply的区别

call与apply的区别call与apply都可以修改this指向，属于function.prototype的一个方法，所以每个function对象实例(就是每个方法)都有call和apply属性无参数的时候，this指向window；有参数的时候，this指向第一个参数注：call与apply的参数传递是有区别的：call：参数分别作为自己的多个参数传递；apply：要将参数合并成一个数组person.sayHobby.call(person1, 'swimming', 'hiking')

2020-07-10 11:35:14 139

原创 ES6 Symbol

ES6 Symbol之前，本人记忆中关于js原始数据类型有五种，分别是：undefined、Boolean、null、Number、String，但是偶然间看见发现，现在又多增加了一种Symbol，那就先简单了解一下吧~一、Symbol是什么Symbol是es6引入得一种新的原始数据类型，表示独一无二的值二、Symbol的声明方法let s = Symbol();typeof s // “symbol”，变量s是Symbol数据类型，而不是字符串之类的其他类型。注：Symbol不能

2020-07-07 13:59:18 130

原创 react引入报错Import in body of module reorder to top import/first

react引入报错：Import in body of module; reorder to top import/first一、问题情形想引入模块：import { CSSTransition } from 'react-transition-group';import React, { Component } from 'react';const logo = require("./images/logo.png");const icon_beta = require("./images/ic

2020-06-19 10:05:35 4619 1

空空如也

空空如也