weixin_44284981的博客

原创 百度地图在vue中的使用

在vue文件中在style中给map设置高度，否则地图不会显示说明baidu-map的常用属性min-zoom：最小层级center：地图的中心定位 可以是文字 也可以是对象，如{lng: 116.404, lat: 39.915}zoom: 缩放的等级scroll-wheel-zoom：是否允许鼠标滚轮缩放 默认是false事件ready：地图加载开始执行的函数 他有两个参数一个是BMap一个是map 如果想在组件中使用他们，可以通过赋值zoomend：地图更改缩放级

原创 JavaScript数据类型——数组详解

js数组

原创 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调用后端给的支付信息接口 将用户要支付的金额和商品属性还有

原创 nuxt 性能优化——服务端缓存的实现

何为服务端缓存

原创 NextJs 请求数据 （fetch axios）

NextJs 请求数据 （fetch axios）在使用nextJs请求数据之前 首先我们来说一下 nextJsnextJs是一个轻量级的react服务端渲染应用框架，所以他不用考虑前端经常要涉及到的跨域nextJs不用写router即路由的配置 只需在pages下创建js文件 即生成路由路径 例如 创建about.js 就可以用过localhost: 3000/about访问的到请求数据官方推荐的是fetch 注意 fetch中的路径应是完整的路径function About({ res

原创 vue引入deepseek

使用vue-markdown解析md文本内容。

原创 CSS图片垂直居中问题解决方案

在 CSS 中，使用导致图片略微向下偏移的现象，本质上是由于和共同作用的结果。

原创 Highcharts在vue2中的使用

【代码】Highcharts在vue2中的使用。

原创 项目难点-内存泄漏

原创 前端使用腾讯地图api实现定位功能

申请地址： https://lbs.qq.com/dev/console/key/manage使用腾讯地图提供了三种调用方式，我用的是第三种，如果想试试其他两种的小伙伴可以自己研读一下哦，附链接地址https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation

原创 canvas常见api总结

canvas.width = 1140 设置canvas元素的宽canvas.height = 1400 设置canvas元素的高。

原创 总结小程序的坑

遇到的报错：Can’t find variable: TextDecoder。

原创 解决element ui 表格添加合计（show-summary）属性后最后一行被遮挡的问题

【代码】解决element ui 表格添加合计（show-summary）属性后最后一行被遮挡的问题。

原创 element-ui upload组件中将file文件数据转成二进制流数据格式

【代码】element-ui upload组件中将file文件数据转成二进制流数据格式。

原创 关于前端地图笔记

【代码】关于前端地图笔记。

原创 解决electron-builder制作的安装包在安装过程中出现“安装中止”的问题

electron打包问题

原创 桌面端后台项目笔记 electron+ ts + vue + pinia + vue3 + vite

通过defineStore()定义，他的第一个参数要求是一个独一无二的名字这个名字 也被用作id，是必须传入的，pinia将用它来连接store和devtools// 写法一export const noteStore = defineStore('note', { // 参数getters: {},actions: {})// 写法二const count = ref(0) // 相当于定义state})

原创 记录一次electron打包提示文件找不到的解决方法

electron打包可能会遇到的问题

原创 按照要求打印文字

【代码】按照要求打印文字。

原创 HTMl5初学笔记---新元素

现代的浏览器都支持 HTML5。此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:// 实例header, section, footer, aside, nav, main, article, figure { display: block; }vanvas.

原创 taro分包

src/module/详细文件。

原创 分享一些项目中会用到的插件——vue

vue-cropper ： 用于上传图片 地址.

原创 通过canvas实现视频截图并且生成图片上传到网络

通过canvas实现视频截图并且生成图片上传到网络

原创 根据网址下载视频

根据网络链接下载视频

原创 taro react 图表开发

使用的插件 echarts-taro3-react文档demo：其余插件可看taro物料集合物料最重要的： 添加样式 否则图标不显示

原创 如何判断两张网络图片是否相同

可以通过比较两张图片的二进制流或者base64base64比较axios({ method: 'get', url: 'url路径', responseType: 'blob'}) .then(res => { const reader = new FileReader() reader.onload = function (e) { base = e.srcElement.result } reader.rea

原创 微信小程序拒绝定位之后 如何再次开启以及判断是否打开了系统定位功能

Taro.getSystemInfo({ success: function (res) { if (!res.locationEnabled || !res.locationAuthorized) { Taro.showToast({ title: '请开启手机定位功能' }) } else { Taro.getLocation({ type: "...

原创 js 实现将网络媒体资源url转为二进制数据 并上传到数据库

首先说一下什么是binarybinary 二进制数据 通常用0和1来表示BlobBlob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取 表示「二进制大对象」FormDataFormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式 它会使用和表单一样的格式 可以通过append方法添加对象 可以用来上传二进制数据如何实现首先将媒体url转为二进制数据通过formdata上传数据axios({ method: 'g.

原创 使用iview中form表单验证时表单loading加载 但是并没显示错误警告的bug

最近在开发项目的时候遇到了一个问题 就是iview form表单使用的时候表单没有显示错误提示 只是不符合规则的表单loading中 且不能执行其他的操作代码原始是这样的data () { const validateForm = (rule, value, callback) => { if (!this.form.address.length && rule.field === 'address' ) { // 省略了其他的条件 console.log(11)

原创 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 = () => { // 可根据相关需求

原创 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:

原创 dva-taro 数据流方案 基于redux、redux-saga、react-router、fetch开发

链接: https://dvajs.com/knowledgemap/#effects构成——通过model把一个领域的模型管理起来namespace 表示在全局state上的keystate 初始值reducers 同步更新stateeffects 处理异步逻辑 常见数据请求subscriptions 订阅数据源数据流向通常通过交互行为 或者浏览器行为（比如路由跳转）触发 。当想通过此类行为改变数据的时候 首先可以通过dispatch发起一个action，如果是同步会直接通过redu

原创 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

原创 调用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

原创 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 插件 环境代码 ...

原创 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":.

原创 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

原创 实现上传图片的功能

<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

原创 自我总结 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: {}... },

原创 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 }}