yw00yw-优快云博客

原创小程序使用sdk对接cos存储桶

配置地址可以找后端或者cos上传成功会返回数据中有接口地址。request合法域名、uploadFile合法域名。视频太大，分段上传，取值地址在最外面。

2023-07-28 17:10:57 1761

原创 css自定义滚动条

/内容的高度(所有子元素高度和) + padding。//滚动条高度的比例,也是滚动条top位置的比例。//需要出现滚动条,并计算滚动条的高度。//滚动条的 bar 的高度。//不需要出现滚动条。

2023-05-12 13:52:04 754

Charles抓取微信电脑版小程序1、先从微信中打开小程序2、然后打开任务管理器，找到小程序的应用3、右键点开小程序，打开文件所在位置，找到个Runtime包4、将小程序和微信都关闭掉（否则部分文件删除不掉），然后将Runtime包下的文件都删除掉5、关闭电脑防火墙，重新登陆微信6、将小程序移除后重新获取，打开Charles进行抓包7、最好将WMPFRuntime包设置成只读状态抓取电脑数据配置配置证书：Help→SSL Proxying→Install Charles

2022-05-24 18:26:22 12462 5

原创微信小程序加购动画

说明电商版加购动画，从鼠标点击位置，跳转到指定位置，抛物线wxml<view class="good-red-point" wx:if="{{busShow}}" style="--startX:{{bus.sx}}px;--startY:{{bus.sy}}px;--endX:{{bus.ex}}px;--endY:{{bus.ey}}px;animation:{{bus.animation}};"> <image src="{{bus_img}}"></i

2021-11-23 10:12:03 759

原创微信小程序websocket连接

websocket.wxml<view class="send-content"> <text>发送内容：</text> <input class="weui-input" auto-focus type="text" bindinput="handleInput"></input></view><button class="send-btn" type="primary" bindtap="handleConnec

2021-10-30 17:35:05 3669

原创微信小程序画布与涂鸦案例

canvas.wxml<view class="container"> <view class="canvas_area"> <canvas canvas-id="myCanvas" class="myCanvas" disable-scroll="{{false}}" bindtouchstart="touchStart" bind

2021-10-29 14:57:16 1251

原创 git项目使用http形式clone下来，无法安装依赖问题

报错日问题描述：其实已经开了权限，另外的库是可以通过http形式拉取安装并且推送的，但是当前的库无法安装依赖，执行npm install 报错如下（npm cnpm yarn都试过了）。权限形式解决方式需要配置ssh秘钥，然后通过ssh形式就可以安装运行...

2021-10-15 18:02:27 1618

原创微信小程序开放能力

open-data

2021-10-09 15:59:45 658

原创小程序内嵌二维码长按识别内测QA

企业微信使用方式：index.wxml<view class="page-wrapper"> <text class="title">二维码测试</text> <image style="width: 200px; height: 200px;" src="{{url}}" show-menu-by-longpress="{{true}}"></image></view>index.jsPage({ data:

2021-10-09 10:15:30 1277

原创移动端菜单点击效果，点击当前元素展示到可视区

以微信小程序为例wxml<scroll-view class="scroll-menu" scroll-left="{{scrollLeft}}" scroll-x="{{true}}" scroll-with-animation="{{true}}" enable-flex="{{true}}"> <view class="menu-item {{selectedIndex === index && 'activeMenu'}}"

2021-09-23 15:44:19 648

原创微信小程序骨架屏

骨架屏 - 官方地址骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。通常在小程序中，我们需要手工维护骨架屏的代码，当业务变更时，同样需要对骨架屏代码进行调整。为了开发的便利，开发者工具提供了自动生成骨架屏代码的能力利用小程序开发工具生成骨架屏代码点击生成骨架屏，将有弹窗提示是否允许插入骨架屏代码。确定后将在当前页面同级目录下生成 page.skeleton.wxml 和 page.skeleton.wxss 两个文件

2021-09-23 10:44:06 261

原创微信小程序-发布订阅-事件总线-页面组件通信

核心代码eventbus.js/** * new map() * clear 从映射中移除所有元素 * delete 从映射中移除指定的元素 * forEach 对映射中的每个元素执行指定操作 * get 返回映射中的指定元素 * has 如果映射包含指定元素，则返回true * set 添加一个新元素到映射 * toString 返回映射的字符串表示形式 * valueOf 返回指定对象的原始值 *//** * 需求： * 能满足页面之间的通讯 * 能满足页面和组件(co

2021-09-22 17:17:21 869

原创 chares抓包

安装包下载地址地址下载安装说明安装证书安装证书继续下一步代理设置开启winodows ProxyProxy settings默认SSL Proxy settings使用-选择对应小程序-点击打开即可效果

2021-09-17 18:32:46 298

原创反向递归，树组件常用逻辑

示例图树节点方法/** * 递归组装数据 * options 数结构 * code 最后一级的 id * parentHalfKeys 半选的父节点节点 */recursion(options, code, parentHalfKeys) { let result = [], // 递归结果 tempArry = []; // 缓存数据 // arry 数据源 code 最后一级数据 const arryMap = (arry, code) => { arr

2021-08-25 15:07:28 509

原创微前端实战-乾坤

主应用安装qiankunyarn add qiankun # 或者 npm i qiankun -Smain.jsimport Vue from "vue";import App from "./App.vue";import router from "./router";import store from "./store";Vue.config.productionTip = false;import { registerMicroApps, start } from 'qia

2021-07-19 16:42:51 361

原创小程序实现滑动吸附效果

wxml<view class="container"> <view class="header-top"></view> <view class="content-wrapper" bindtouchstart="handletouchstart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style="transform: {{coverT

2021-07-01 18:06:55 816

原创微信小程序性能优化总结

渲染性能优化

2021-06-22 14:51:43 375

原创微信小程序-海报制作（canvas）

文档https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.htmlwxml<view class="canvas-container"> <canvas canvas-id="myCanvas" class="myCanvas" style="width: {{canvasWidth}}px; height: {{canvasHeight

2021-06-20 09:36:00 1191

原创小程序map（地图）组件

文档https://developers.weixin.qq.com/miniprogram/dev/component/map.htmlwxml<view class="map-container"> <map id="map" class="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}"

2021-06-17 17:05:56 1104

原创 scrollIntoView+锚点两种方式实现页面的平滑滚动，长页面分页

scrollIntoView简介该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。语法element.scrollIntoView（）; // 等同于element.scrollIntoView(true)element.scrollIntoView（alignToTop）; //布尔参数element.scrollIntoView（scrollIntoViewOptions）; //对象参数用法// 点击菜单实现滚动 handleChildNodeCo

2021-02-04 15:11:39 980

原创 chrome pdf 打印边距问题处理

需求将网页打印成pdf,Chrome 可直接将网页保存(打印)为 PDF (无需安装 Adobe )，或者邮件点击打印，但是式样跟网页上显示的有很大不同。问题是无法选择「纸张大小」，Chrome 在保存为 PDF 文件时，默认纸张大小是 A4。若布局为纵向，显示大小为 210mm×297mm ；若布局为横向，显示大小为 297mm×210mm。打印方式地址：打印地址：https://oss.phxg.cn/download/genFileByGotenberg/%E4%BC%98%E5%B

2021-01-29 20:09:18 4280

原创 Chrome浏览器常用插件记录

WEB前端助手(FeHelper)作用：集前端各种常用工具与一体的chrome插件WhatRuns作用：可以快速检测到当前站点使用的技术书签侧边栏作用：在浏览器视图区左侧添加固定式的, 管理所有书签的侧边栏....

2021-01-29 09:11:32 345

原创 React 重难点

为什么要引入 React在写 React 的时候，你可能会写类似这样的代码：import React from 'react'function A() { // ...other code return <h1>前端桃园</h1>}你肯定疑惑过，下面的代码都没有用到 React，为什么要引入 React 呢？如果你把 import React fro...

2021-01-28 17:42:15 710 1

原创 angular7中httpClient封装get/post请求

login.component.tsimport { HttpService } from 'src/app/services/http.service';constructor(private http: HttpService) {}// ajax数据测试 get doGet() { const obj = { _userName: '...

2021-01-28 17:41:26 1138

原创 angular7中使用请求拦截和token验证

对于任何一个应用来说，安全都是必不可少的操作。一般安全验证的比较流行的方式是：token验证后台生成一个token，第一次登陆成功之后，将token从后台携带回来，然后前端每次的请求都要将token带到后台。后台验证有没有token且是否相同，并且设置token的有效期。编写拦截器interceptor.service.tsimport { Injectable } from '@ang...

2021-01-28 17:41:01 1711 2

原创 vue配置多代理服务接口地址操作

接口地址http://api.baidu.cn/ReportApi/monthAnalysisReport/monthAnalysisReport/802244685862010880直接用get请求返回一个json字符串代理配置module.exports = { // development server port 8000 port: 9999, https: true, // If you want to turn on the proxy, please rem

2021-01-28 14:06:23 1334

原创 vue-cli3.x配置babel转换node-modules，兼容chrome低版本浏览器

问题描述vue-cli3创建的项目，在低版本浏览器中运行，运行不起来，因为默认都是开启高版本浏览器。控制台会报一系列错误，特别是node_modules中的插件的es6等高级语法不识别问题。所以按照下面的配置一步解决。请注意默认情况下，babel-loader会忽略所有 node_modules 中的文件，但是我们在某一些安装包引入的时候也需要进行babel转换，那怎么办呢transpileDependencies：转换node-modules必备以vue为例核心配置：vue.conf

2021-01-25 20:23:46 4009

原创 vue集成海康威视视频监控方案采坑之路

注意问题高版本监控与低版本监控高版本监控可以在高版本浏览器上使用websocket进行解析播放，低版本监控只能在低版本浏览器上使用插件播放。针对不同的设备选择不同的集成方案即可。可以在我的资源中下载。集成方式根据demo，输入ip地址、端口、用户名、密码就可以进行预览测试，测试没问题可以根据demo进行集成。将对应的demo目录下的资源放到我们项目的静态资源中，以vue为例，在vue.config.js中进行配置，导出对应的全局变量变量，也可以直接引入使用。以vue为例谷歌版本chro

2021-01-20 09:40:11 8526 15

原创 Web浏览器基于Flash实时播放监控视频（二）

vue项目中应用vue-video-player与videojs-flash实现RTMP流播放所需插件npm install vue-video-player --savenpm install videojs-flash --save版本"videojs-flash": "^2.2.1","vue-video-player": "^5.0.2"全局使用main.jsimport VueVideoPlayer from 'vue-video-player'import 'vi.

2020-12-29 18:00:40 619

原创 Web浏览器基于Flash实时播放监控视频（一）

安装插件插件安装npm install video.js --savecnpm install --save videojs-flashcnpm install --save videojs-swfcnpm install --save vue-video-player // 使用video.js播放不安装这个插件对应版本“video.js”: “^7.10.2”,“videojs-flash”: “^2.2.1”,“videojs-swf”: “^5.4.2”,“vue-vide

2020-12-29 16:54:07 1043 2

原创前端经典问题收集

前端渲染几十万条数据不卡顿核心APIcreateDocumentFragmentrequestAnimationFrame<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>

2020-12-22 11:42:21 197

原创基于iview对table进行二次封装处理

模板<template> <div> <div class="table_box"> <Table :columns="tableColumns" :data="tableData" :height="tableHeight" v-if="tableColumns.length > 0">  <te

2020-12-22 11:01:34 1200 2

原创 echarts环状饼图默认选中且图例可点击选择二次封装

核心库echartslodashResizeListener代码<template> <div class="charts" ref="charts"></div></template><script>impor

2020-12-08 14:20:40 1215

原创可视化-svg

svg特点SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体SVG 可被非常多的工具读取和修改（比如记事本）SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地

2020-12-01 11:33:36 394

原创 iframe + postMessage 实现跨域通信

VScode安装Live Server 插件注释：上面右键即可通过服务的方式打开html格式文件postMessagepostMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。main.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont

2020-11-30 11:52:20 302 1

原创 vue-awesome-swiper的基本使用

安装安装地址：https://www.npmjs.com/package/vue-awesome-swiper引入import { swiper, swiperSlide } from "vue-awesome-swiper";import "../../../node_modules/swiper/css/swiper.css";注册组件components: { swiper, swiperSlide},组件使用<div class="banner_box

2020-11-26 16:55:31 1384

原创基于echarts对雷达图的封装

核心库echartslodashResizeListener代码<template> <div class="charts" ref="charts"></div></template><script>impor

2020-11-26 16:39:50 461

原创基于echarts对饼图的封装

核心库echartslodashResizeListener代码<template> <div class="charts" ref="charts"></div></template><script>impor

2020-11-26 16:33:59 612

原创基于echarts对折线图的封装

核心库echartslodashResizeListener代码<template><div class="charts" ref="charts"></div></template><script>import ec

2020-11-26 16:29:46 532