- 博客(47)
- 收藏
- 关注
RSS订阅
原创 百度地图在vue中的使用
在vue文件中在style中给map设置高度，否则地图不会显示说明baidu-map的常用属性min-zoom：最小层级center：地图的中心定位 可以是文字 也可以是对象，如{lng: 116.404, lat: 39.915}zoom: 缩放的等级scroll-wheel-zoom：是否允许鼠标滚轮缩放 默认是false事件ready：地图加载开始执行的函数 他有两个参数一个是BMap一个是map 如果想在组件中使用他们，可以通过赋值zoomend：地图更改缩放级
2022-06-22 17:53:14
2709
原创 Taro 实现app调起小程序后 小程序支付 并返回app
首先详细阅读这些文档 ！！！获取code 获取openid小程序调起支付API步骤使用Taro.login获取用户登录凭证 code属性通过https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code接口获取openid和session_key调用后端给的支付信息接口 将用户要支付的金额和商品属性还有
2021-01-16 17:13:51
2011
2
原创 NextJs 请求数据 （fetch axios）
NextJs 请求数据 （fetch axios）在使用nextJs请求数据之前 首先我们来说一下 nextJsnextJs是一个轻量级的react服务端渲染应用框架，所以他不用考虑前端经常要涉及到的跨域nextJs不用写router即路由的配置 只需在pages下创建js文件 即生成路由路径 例如 创建about.js 就可以用过localhost: 3000/about访问的到请求数据官方推荐的是fetch 注意 fetch中的路径应是完整的路径function About({ res
2020-09-10 18:12:14
8740
1
原创 element-ui upload组件中将file文件数据转成二进制流数据格式
【代码】element-ui upload组件中将file文件数据转成二进制流数据格式。
2023-12-04 16:25:01
2098
原创 桌面端后台项目笔记 electron+ ts + vue + pinia + vue3 + vite
通过defineStore()定义，他的第一个参数要求是一个独一无二的名字这个名字 也被用作id，是必须传入的，pinia将用它来连接store和devtools// 写法一export const noteStore = defineStore('note', { // 参数getters: {},actions: {})// 写法二const count = ref(0) // 相当于定义state})
2023-08-29 15:42:54
883
原创 HTMl5初学笔记---新元素
现代的浏览器都支持 HTML5。此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:// 实例header, section, footer, aside, nav, main, article, figure { display: block; }vanvas.
2023-04-03 18:05:25
409
原创 taro react 图表开发
使用的插件 echarts-taro3-react文档demo：其余插件可看taro物料集合物料最重要的： 添加样式 否则图标不显示
2022-06-14 10:53:58
994
原创 如何判断两张网络图片是否相同
可以通过比较两张图片的二进制流或者base64base64比较axios({ method: 'get', url: 'url路径', responseType: 'blob'}) .then(res => { const reader = new FileReader() reader.onload = function (e) { base = e.srcElement.result } reader.rea
2022-04-27 16:35:44
949
原创 微信小程序拒绝定位之后 如何再次开启以及判断是否打开了系统定位功能
Taro.getSystemInfo({ success: function (res) { if (!res.locationEnabled || !res.locationAuthorized) { Taro.showToast({ title: '请开启手机定位功能' }) } else { Taro.getLocation({ type: "...
2022-03-25 09:58:59
3058
原创 js 实现将网络媒体资源url转为二进制数据 并上传到数据库
首先说一下什么是binarybinary 二进制数据 通常用0和1来表示BlobBlob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取 表示「二进制大对象」FormDataFormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式 它会使用和表单一样的格式 可以通过append方法添加对象 可以用来上传二进制数据如何实现首先将媒体url转为二进制数据通过formdata上传数据axios({ method: 'g.
2022-02-08 16:02:43
2685
原创 使用iview中form表单验证时表单loading加载 但是并没显示错误警告的bug
最近在开发项目的时候遇到了一个问题 就是iview form表单使用的时候表单没有显示错误提示 只是不符合规则的表单loading中 且不能执行其他的操作代码原始是这样的data () { const validateForm = (rule, value, callback) => { if (!this.form.address.length && rule.field === 'address' ) { // 省略了其他的条件 console.log(11)
2021-11-24 16:58:31
994
原创 React项目插件总结(1)
react-document-title根据路由动态设置页面的title安装npm install react-document-title使用import DocumentTitle from "react-document-title"import { withRouter } from "react-router-dom";class Main extends React.Component { getPageTitle = () => { // 可根据相关需求
2021-07-27 14:25:37
166
原创 taro实现订阅消息推送
文档： https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html获取模板 IDhttps://mp.weixin.qq.com 获取订阅消息的权限Taro.requestSubscribeMessage({ tmplIds: [模板id], success: function (res) { console.log(res) }, fail:
2021-07-06 11:05:03
2238
原创 dva-taro 数据流方案 基于redux、redux-saga、react-router、fetch开发
链接: https://dvajs.com/knowledgemap/#effects构成——通过model把一个领域的模型管理起来namespace 表示在全局state上的keystate 初始值reducers 同步更新stateeffects 处理异步逻辑 常见数据请求subscriptions 订阅数据源数据流向通常通过交互行为 或者浏览器行为（比如路由跳转）触发 。当想通过此类行为改变数据的时候 首先可以通过dispatch发起一个action，如果是同步会直接通过redu
2021-05-07 11:37:09
181
原创 react性能优化——react-virtualized
插件文档作用： 用于渲染渲染大型 列表和表格的react插件 虚拟化长列表 这种技术在任何给定的时间只渲染一小部分的行，并且可以显著减少重新渲染组件的时间以及创建的DOM节点的数量。组件Collectionimport React from 'react';import {Collection} from 'react-virtualized';import 'react-virtualized/styles.css'; // only needs to be imported once
2021-04-28 15:33:54
3271
原创 调用api生成小程序二维码
access_token 获取get https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=小程序的app_secret获取小程序码post https://api.weixin.qq.com/wxa/getwxacode?access_token=assess_token&scene=参数可能会报的错 { "errcode": 440
2021-04-09 14:14:48
466
原创 npm和yarn命令行总结
功能npmyarn开发环境下载npm i 插件 --save-dev / npm i 插件 -Dyarn add 插件 --save-dev / yarn add 插件 --D生产环境下载npm i 插件 --save / npm i 插件 --Syarn add 插件 --save / yarn add 插件 --S全局环境下载npm i 插件 -gyarn global add 插件卸载npm uninstall 插件 环境代码 ...
2021-03-31 16:05:22
188
原创 eslint使用
在vscode的配置下载eslint插件下载eslint全局插件npm install -g eslint// 执行命令esllint --init // 根据需要选择即可配置eslint"eslint.enable": true, // 启用/禁用ESLint。 "eslint.alwaysShowStatus": true, "eslint.debug": true, // 启用ESLint的调试模式 "eslint.format.enable":.
2021-03-30 09:46:44
634
原创 react ref 使用
import React from 'react'import Child from './child'export default class UseRef extends React.Component { /** * 第一种ref使用方式 */ // componentDidMount() { // console.log(this.refs.div) // } // render() { // return ( // <div ref="div">1
2021-02-23 20:42:48
128
1
原创 实现上传图片的功能
<template> <div> <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div> <el-dialog :title="title" :visible.sync="open" width="800px" appe
2020-12-08 15:19:21
260
原创 自我总结 vue3.0新更新的内容
createApp 创建应用的apivue2.x中 vue通过new Vue({}) 创建一个vue实例 vue3.0 则使用createApp来创建vue实例 实例提供了一个应用上下文 该上下文和vue2.x的配置相同import { createApp } from 'vue' const app = createApp({ //该函数接受两个参数 第一个参数是 根组件选项对象 第二个参数是根propsdata() { return { }},methods: {}... },
2020-11-27 17:40:27
603
原创 node项目中的js文件通过require引入图片
webApp 项目实现 vux ui框架结合require引入图片路径首先引入alert弹框组件全局引入// 在入口文件全局引入 node中是src下的main.jsimport Vue from 'vue'import { Alert } from 'vux'Vue.component('alert', Alert)局部引入import { Alert } from 'vux'export default { components: { Alert }}
2020-11-27 10:10:40
866
2
原创 vue+element ui中messageBox结合createElement搭配使用
今天项目中需要实现一个弹窗的功能 为了代码的美观性 我便决定使用messagebox的这个element ui组件 由于之前没有好好了解过create Element 所以现在做了笔记记录一下首先 设置触发事件的方法 然后在方法中进行相关操作 methods: { showVideo(index,data) { const h = this.$createElement; //vue中创建元素的方法 this.$msgbox({ title: 'messa
2020-11-14 16:27:15
1564
原创 vue的服务端渲染框架-nuxt之asyncdata
最近项目中用到了nuxt这款服务端框架，由于对框架的了解不多，因此在使用是遇到了关于asyncData的坑 现在做一个笔记记录一下我所遇到的问题首先我们先来了解一下asyncData的作用asyncData是nuxt中 在服务器或者路由更新之前被调用 可以直接向服务器请求数据asyncData 仅限于在当前的页面组件中请求数据 即只可以在父组件请求数据 不可以在子组件请求数据asyncData 可以通过return 返回数据 ，并且返回的数据就是 data中的数据 可以直接在组件中使用asy
2020-10-23 18:00:53
1936
原创 厉害的标签-svg
svg是什么svg 意为可缩放矢量图形 使用xml格式定义图像 可用于生成图表 流程图 等用来定义网络的基于矢量的图形svg图像在放大或者改变尺寸的情况下器图形质量不会有所损失使用xml格式定义图形svg标签属性width,height代表svg的宽高version代表使用的svg版本xmlns代表svg命名空间形状标签矩形rect 标签 可用来创建矩形 <svg width="100%" height="100%" version="1.1"
2020-09-22 11:13:27
301
原创 vue 基于 element-ui表格的二次封装
由于后台管理系统中常常会用到表格的使用 因此封装了进行了表格的二次封装 有基本的功能 另一些特殊的功能还没有添加本文用到了slot 如不了解slot 可先了解一下slot 理解起来更容易封装组件<template> <div> <!-- 二次封装表格 --> <el-table v-loading="loading" :data="dataList" :height="tabelHeight"
2020-09-16 17:13:39
818
原创 javascript中的NaN
NaNNot a Number 是一个特殊的数值 用来表示一个本来要返回数值但未返回数值的情况 例如在其他编程语言中 任何数字除以0都会导致错误 ，从而停止代码，但是在ECMAScript中 会返回NaN 不会阻断代码的运行...
2020-09-05 17:41:50
105
原创 vue-property-decorator的使用
这个插件主要依赖于vue-class-component，是vue-typescript的一个简写代码插件安装插件npm i -S vue-property-decorator使用主要是script的使用发生的改变 其余没有差别@component — 引入组件<script> import { Component } from 'vue-property-decorator' //首先要引入插件用到的装饰器 import AdminDashboard from './adm
2020-08-25 18:29:33
513
1
原创 js中的深克隆和浅克隆
说深拷贝与浅拷贝之前要说一下栈和堆栈和堆是js中必须要了解的一个知识首先栈中存放的是基本数据类型，堆中存放的是引用数据类型其次使用时基本数据类型直接从栈中取值，而引用数据类型，先从栈中读取地址，再到堆中根据地址得到数据而浅克隆对于引用数据来说 只是复制了数据的地址 深克隆实现了数据的完全拷贝那么该如何实现深拷贝 如何实现浅拷贝呢浅拷贝的实现方式1、通过赋值2、通过Object.assignconst target = { a: 1, b: 2 };const source = { b
2020-08-19 17:51:51
180
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人