- 博客(70)
- 收藏
- 关注
RSS订阅原创 京东微服务microApp使用总结
基于现有业务门户进行微服务基础平台搭建主应用框架：vue3+vite子应用框架：vue2+webpack / vue3+vite在这里插入代码片本地调试即可：主应用+子应用进行打通（注意：两者都是vue3+vite）vite作为子应用只需要切换到iframe沙箱。
2024-04-18 15:56:16
753
原创 专有钉钉微应用埋点以及本地调试埋点总结
最近在对接浙政钉，稳定性监控、通用采集 SDK、基础埋点、基础埋点，每次发布上去，工作人员那边反馈抓取不到信息。
2024-04-01 17:03:02
561
原创 前端常用网址总结
17.ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表，跳转。中文网站：https://www.tslang.cn/docs/handbook/declaration-files/by-example.html#global-variables。
2023-10-24 10:07:33
813
原创 vue3移动端嵌入pdf的两种办法
分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数，这个函数是一个异步函数，之后会返回pdf的信息（别的信息基本没用，只有numPages比较有用。分页的逻辑是使用vue3-pdfjs中的createLoadingTask函数获取pdf的总页数，这个函数是一个异步函数，之后会返回pdf的信息（别的信息基本没用，只有numPages比较有用。使用vue-pdf-embed插件展示预览pdf（这里只能展示一页，或者不分页全部展示，就会是一长条，所以我们自己做分页。
2023-10-24 09:33:56
1050
原创 小程序长期订阅
用户订阅一次后，可长期下发多条消息。目前长期性订阅消息向政务、医疗、交通、金融、教育等线下公共服务开放，后续将综合评估行业需求和用户体验持续完善。（长期订阅消息只针对特定行业开放，所以普通开发者并无法使用）。设置setTimeout 延迟触发requestSubscribeMessage 不起作用。开发者也可在页面中添加bindtap事件(只有bindtap能触发)进行授权，::: tip 管理后台配置。功能-》订阅消息-》我的模版。申请模版：1、预约进度通知。3、业务办理进度提醒。订阅消息必须手动触发。
2023-10-12 16:24:40
625
原创 半屏小程序
有些手机会唤起失败，直接唤起了全屏的小程序，所以我们为了兼容，需要在app.config.ts加上。设置-》第三方设置-》半屏小程序管理-》我调用的。tip 管理后台配置。
2023-10-12 16:23:41
715
原创 小程序分包（普通分包、独立分包）
分包以后单独最大不能超过 2m;整个小程序可以达到 20M声明 subpackages 后，将按 subpackages 配置路径进行打包。subpackage 的根目录不能是另外一个 subpackage 内的子目录。subpackages 配置路径外的目录将被打包到 app（主包） 中。app（主包）也可以有自己的 pages（即最外层的 pages 字段）tabBar 页面必须在 app（主包）内。root：分包根目录；name：分包别名，分包预下载时可以使用；
2023-04-17 15:25:32
975
1
原创 h5跳转小程序
第一种情况、第二种情况不采用，下面介绍一下第三种方式：wx-open-launch-weapp开放标签注意：开放对象1、已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。2、已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
2023-04-03 15:37:06
485
原创 海康视频展示（web前端）
视频需要在客户那边才能展示，<template> <div class="dailog" v-if="visible"> <div class="box"> <div class="close"><a-icon type="close" @click="handleCancel" /></div> <div id="videoPlayerBox" ref="v.
2021-12-01 10:36:50
1269
1
原创 按需加载子组件
<div> <div> <div class="content"> <div style="z-index: 999"> <div :class="['left', inAnimation ? 'Animationleft' : '']" ref="left"> <component :is="currentLeft"></component&g...
2021-12-01 10:22:48
615
原创 TypeScript高级类型
TypeScript高级类型有哪些交叉类型联合类型类型别名类型索引类型约束映射类型条件类型交叉类型通过 & 将多个类型合并为一个类型，包含了所需的所有类型的特性，本质上是一种并的操作语法如下：T & U适用于对象合并场景，如下将声明一个函数，将两个对象合并成一个对象并返回：function extend<T , U>(first: T, second: U) : T & U { let result: <T & U&g
2021-09-14 15:31:29
156
原创 如何使用手机访问本地项目
第一种：通过局域网的ip地址进行调试首先电脑要打开网络热点//查看本地ipipconfig在手机端浏览器通过ip地址替换localhost就可以啦！第二种：通过使用防火墙将端口设置为不屏蔽即可具体操作参考：允许外部访问Windows本机的指定端口...
2021-03-30 10:29:40
1748
原创 查询当前Windows系统对外开放了哪些端口
1.按组合键Win+R，在运行窗口输入cmd调出命令窗口；2.在命令窗口输入netstat -aon命令回车；
2021-03-25 16:38:52
1607
转载 允许外部访问Windows本机的指定端口
1.打开控制面板2.查看网络状态和任务3.进入Windows防火墙设置：4.进入防火墙高级设置：5.创建入站规则：6.规则类型选择端口7.设置连接类型和特定端口：8.设置连接条件：9.设置该规则应用时机：10.设置规则名称，点击【完成】按钮即可：注意，一定要关闭防火墙，否则访问不了...
2021-03-25 16:35:04
5024
2
原创 git 修改分支名称
将分支名称为 oldbranch 改为 newbranch首先1.先查看一下本地分支git branch2.查看远程分支git branch -r3.在本地创建一个新分支git branch newbranch切换到新分支git branch -m oldbranch newbranch或git checkout -b newbanch2.删除远程分支 git push --delete origin oldbranch3.将本地新创建的分支推到远程分支上 git
2021-03-19 16:42:01
265
原创 解决部分安卓手机上拍出的照片被自动旋转的问题
问题：在做钉钉微应用的时候上传人脸照片时图片发生的旋转，在ios机上没有任何问题，部分安卓机拍照好处有一个自动旋转的过程。首先我们借助exif-js可以实现相机镜头的读取,不支持IE10以下,可以直接引用的js文件,也可以使用npm安装依赖npm install exif-js --saveimport EXIFfrom 'exif-js';或/index.html引入js<script src="https://cdn.jsdelivr.net/npm/exif-js"><
2021-03-08 15:17:44
1572
1
原创 判断钉钉客户端
export function comClientBrowser() { var _userAgent = navigator.userAgent; var _broMark = ''; if (/DingTalk/gi.test(_userAgent)) {//判断是否是钉钉客户端 _broMark = 'DingTalk'; return _broMark }else if (/wxWork/gi.test(_userAgent)) {//
2020-12-30 15:08:20
2099
原创 动态加载js文件
export function getScript(url, callback) { var head = document.getElementsByTagName('head')[0], js = document.createElement('script'); js.setAttribute('type', 'text/javascript'); js.setAttribute('src', url); head.appendChild(js);
2020-12-30 14:57:34
273
原创 钉钉微应用授权唤起钉钉下部门的通讯录
在这里我是把钉钉授权放在了一个单独的文件里（utils/authorization.js）下。首先我们要明白为什么要授权？因为我们需要调用钉钉业务相关的一些jsapi，需要做一个鉴权，这样才可以使用，但是钉钉提供的jsapi有很多是手机的基础能力，是不需要鉴权的，直接在dd.ready里面调用就行。在开发之前。我们要看好自己开发的钉钉业务需不需去做鉴权。（可以参考钉钉提供的jsapi总览）1、第一步：获取token2、第二步：获取jsapi中的ticket3、第三步：生成jaspi中的鉴权sagn
2020-12-30 14:52:30
1567
3
原创 钉钉H5微应用获取code
一、第一步：安装npmnpm install dingtalk-jsapi --save一、第一步：安装npmnpm install dingtalk-jsapi --save二、第二步：在项目中创建一个文件getCode.jsimport * as dd from 'dingtalk-jsapi';export function getCode(callback) { let corpId = 'dingc8f03903b3d64ce84ac5d6980864d335'; i
2020-12-30 14:01:50
2302
原创 js求百分比
/** * 求百分比 * @param num 当前数 * @param total 总数 */ getPercent(num, total){ num = parseFloat(num); total = parseFloat(total); if (isNaN(num) || isNaN(total)) { return "-"; } return total <= 0? "0%" : Math.round((num / total) * 10000) /
2020-12-10 09:25:01
2522
原创 移动端适配时对meta name=“viewport“ content=“width=device-width,initial-scale=1.0“的理解
viewport的概念viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。content属性值<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像
2020-11-16 10:28:05
2042
原创 移动端 rem自适应布局 （750的设计稿）
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) retu
2020-11-16 10:05:06
2053
原创 使用git命令行将本地仓库代码上传到github或gitlab远程仓库
我这边是使用的现有框架，直接在git上pull下来的，需要进行调框架整放到新仓库里第一步：删除.git 文件，才能初始化gitrm git -r -f第二步：建立本地仓库，cd到你本地项目根目录下，执行git init 命令cd 本地工程目录git init //这个目录就可以被管理了第三步：讲本地项目所有的文件放在暂存区git add . //.指的是所有文件第四步：将缓存区的文件放到本地仓库git commit -m '注释说明'第五步：将本地的文件关联到创建好的git仓
2020-11-11 09:26:26
170
原创 ECharts 图表Y轴数值仅整数显示设置
需求效果图如下，需求是仅需要y轴中数值显示整数。属性使用的属性：minInterval设置成1保证坐标轴分割刻度显示成整数。{ minInterval: 1} 示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
2020-10-14 15:54:12
3227
原创 Vue | Vue-ls插件
Vue插件，用于从Vue上下文中使用本地Storage，会话Storage和内存Storage一个vue封装的本地储存的方法安装Npmnpm install vue-ls --saveYarnyarn add vue-lsBowerbower install vue-ls --save使用Vue-ls Storage APIimport Storage from 'vue-ls'; options = { namespace: 'vuejs__', // key键前缀.
2020-10-13 10:27:45
677
原创 vue 组件的 scrollBehavior
浏览器对用户访问网页的记录在聊如何管理vue组件滚动行为之前，先简单说说(毕竟深入了我也很模糊o(╯□╰)o)浏览器是如何对用户访问过的页面的保持，浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存，以上是MDN对浏览器就如何跟踪用户访问过网页的解释性说明。通常我们很少会对页面回退或前进进行操作，在浏览器用户界面上提供有前进、回退按钮，页面跳转到离开页面之前的位置，而不是重新刷新页面，这个功能是由浏览器引擎(与渲染引擎、解析引擎概念不同)来完成的。当用户进入一个页面的时候，会往 history
2020-10-13 10:23:30
3114
原创 vue监听路由参数变化
今天遇到一个这样的业务场景：在同一个路由下，只改变路由后面的参数值，比如在这个页面 /aaa?id=1 ，在这个页面中点击一个按钮后 跳转到 /aaa?id=2 ，但从“/aaa?id=1”到“ /aaa?id=2”是不会触发vue的生命周期的，id变了，但页面数据不会更新，想要更新只能重新加载页面（手动刷新），但是这多么low、孬呀，作为一名追求极致用户体验的开发，怎么能容忍这种情况发生；然后就想办法监听路由参数的变化呀，在watch里监听$route和路由参数，代码如下：复制代码wa
2020-09-25 15:14:19
343
原创 Vant 实现 上拉加载更多
<template> <div> <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad" :offset="10" > //itemList换成你自己的数据 <van-cell v-for
2020-09-25 15:12:31
2004
原创 vue前端面试整理
1. 说一下Vue的双向绑定数据的原理vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。2. 解释单向数据流和双向数据绑定单向数据流： 顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的 state双向数据绑定
2020-07-23 14:56:16
250
原创 vue 路由及按钮权限控制
路由权限控制有两种方式：第一种后台返路由，第二种后台返权限相同点1、都可以实现需求，2、前端都要维护一份路由与模块文件地址的映射3、后端返回的数据一般都要遍历做第二次处理4、关于页面内的按钮元素都要重新处理5、技术点都会涉及到路由守卫和鉴权不同点1、默认路由列表：方法一：只维护home、login等无权限需求路由，其他路由需要后续通过接口和路由api：addRoutes动态添加；方法二：需要维护一个全量的路由列表，不需要额外添加路由，通过配置每个路由的access数组来做鉴权。
2020-07-14 17:45:47
2111
原创 nginx部署web项目
第一步你需要使用xtfp链接上你们的服务器找到nginx相对应的位置第二步，把你把包好的文件放到服务器上第三步修改nginx/nginx.conf，修改server 部份这样我们就可以通过访问本地的项目了，如果想通过域名或者ip访问到页面，是需要在阿里服务器上做些设置，域名的话好像需要备案，备案通过，就可以使用域名访问了...
2020-07-01 16:23:54
1254
原创 在vue中使用svg矢量图
第一步需要下载插件cnpm i svg-sprite-loader --save第二步需要写一个Svglcon的组件 （components/Svglcon）<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg></template><script>/** * 使用栗子 *
2020-06-17 10:15:18
1166
转载 钉钉原生小程序富文本解析
钉钉小程序富文本解析aParse是我们的富文本框组件index.axml<import src="/util/aParse/aParse.axml"/> <template is="aParse" data="{{aParseData:article.nodes}}"/>index.jsvar AParse = require('/util/aParse/aParse.js')Page({ data: { }, onShow() { c
2020-05-27 18:03:42
2850
1
原创 钉钉小程序不支持rich-text,怎么解析富文本框的内容呢？（uParse ）
uni-app的官方给提供了富文本解析器uParse富文本解析器uParse<template> <div> <u-parse :content="article" @preview="preview" @navigate="navigate" ></u-parse> </div></template>import uParse from '@/components/u-parse/u-parse.vue'
2020-05-27 17:46:10
1340
原创 uniapp怎么把文本框的图片做到自适应
<template> <view class='wrap'> <rich-text :nodes="information.informationContent|formatRichText"></rich-text> </view></template><script> import api from '../../server/index.js' import { ERR_OK } from '@
2020-05-09 11:28:33
1128
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人