- 博客(42)
- 收藏
- 关注
RSS订阅原创 h5 页面返回强制退出公众号
1.首先下载npm install weixin-js-sdk2.其次引入import wx from 'weixin-js-sdk'在加载页面后，进行强制退出created() { // 不加setTimeout方法二可能失效 setTimeout(() => { wx.closeWindow() }, 5000) },...
2022-05-07 13:48:00
749
原创 h5 微信支付
调用后端接口返回payParam对象，进去取值 WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId: payParam.appId, // 公众号名称，由商户传入 timeStamp: payParam.timeStamp, // 时间戳，自1970年以来的秒数 nonceStr: payParam
2022-05-07 13:43:18
211
原创 判断扫码的客户端是微信还是支付宝
var ua = window.navigator.userAgent.toLowerCase()//判断是支付宝 if (ua.match(/AlipayClient/i) == 'alipayclient') {}
2022-05-07 13:40:46
585
原创 vue h5页面音频播放
业务：需要监听页面用户触发页面任何一处，进去播放音频if (activityInfo.musicPlay) { that.audioAutoPlay('myaudio') // 监听音乐播放完成 document.getElementById('myaudio').addEventListener( 'ended', function() {
2022-05-07 11:57:04
1323
原创 h5 分享操作
1.需要后端编写一个接口，前端传该路由过去，返回签名，时间戳这些 wx.config({ debug: false, appId: res.appId, timestamp: res.timestamp, nonceStr: res.noncestr, signature: res.signature, jsApiList: [ 'up
2022-05-07 11:53:29
590
原创 vue h5进行软键盘的换行改成搜索字眼，并进行点击搜索后收起来软键盘
1.页面 <form action="" @submit.prevent="onRefresh"> <input type="search" @keyup.13="onTextareaKeyDown" ref="searchInput" placeholder="请输入关键词" v-model="page.keyword"
2022-05-07 11:39:26
1206
原创 vue keepAlive缓存 首页-列表-详情页面 三个页面缓存与刷新处理
首先在路由上配置列表页面：meta: { title: '列表', keepAlive: true, isrefer: true }首页和详情页面：meta: { title: '详情', keepAlive: false,isrefer: false}一、首页进入列表页面需要刷新beforeRouteLeave(to, from, next) { to.meta.isrefer = true; next(); }二、列表页面一进来页面直接在监听路由进入去做处理，以及离开
2022-05-07 11:25:29
2375
1
原创 vue 复制使用方法clipboard
一、npm安装clipboardnpm install clipboard --save二、页面结构<div class="wrap" v-for="(item, index) in list" :key="item.id" @click="urlHandle(item, index)" :class="`List${index}`" > </div>三、引入Clipboardimport Clip
2022-05-07 11:06:29
831
原创 video 属性注意点以及横屏展示
1. h5展示video属性相关属性编写<div class="video-content"> <video :id="`player${index}`" :src="item.toUrl" :poster="item.img" webkit-playsinline="true" x5-playsinline="" x5-vi
2022-05-07 10:37:36
1560
原创 css旋转横屏后，左上角返回键
.back { position: absolute; transform: rotate(270deg) translateY(-100%); transform-origin: right top; right: 16px; top: 20px; z-index: 3; color: #fff; .back-center { transform: rotate(180deg); }
2022-05-07 10:31:22
180
原创 关于ios视频和音频不能一进来页面进行播放
解决方案：1.一定要有用户触摸行为2.全局的touchstart里播放document.addEventListener(‘touchstart’, play, false)离开页面document.removeEventListener(‘touchstart’, play, false)3.document.getElementById(player${index}).play();...
2022-04-25 09:47:24
291
原创 vue 实现下载pdf、导出png、打印功能
1.下载PDF引入 html2canvas 和 jspdfnpm install html2canvasnpm install jspdf --save2.在utils文件创建htmlToPdf.js// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default { install(Vue, options) { Vue.prototype.getPdf =
2021-11-19 10:46:00
1398
原创 常见电脑屏幕分辨率
1024600 （常见8.9寸电脑使用）1024768（常用10.4、12.1、14.1、15寸电脑使用）4:312801024（常用14.1、15寸电脑使用）5:41600 * 900 16:9 (非主流)14401050（常用15、16.1寸电脑使用）4:316001200（常用15、16.1寸电脑使用）4:31280800（常见10.8、12.1、15.4寸电脑使用）16:101366768（常见15.2寸电脑使用）15:10 （主流）1280854（不常见）16:91440900（
2021-10-26 10:01:22
3937
转载 vue.js 微信开发公众号，页面空白，刷新正常的缓存问题解决办法
链接https://www.darlang.com/2020/08/vue-js-weixinkaifagongzhonghaoyemiankongbaishuaxinzhengchangdehuancunwentijiejuebanfa/
2021-10-26 09:58:19
829
原创 ES6——Map和WeakMap
ES6 提供了新的数据结构 Map。它有九个常用方法：通过键检查元素是否存在 has(key)添加元素 set(key , value)通过键移除元素 delete(key)通过键获取值 get(key)清空Map clear()遍历Map元素 forEach(fun)返回一个迭代器对象 values()返回一个元素是类似 [key, value] 形式的迭代器对象 entries()返回一个迭代器对象。它包含按照顺序插入的每个元素的 key 值。keys()一个常用属性：size
2021-10-22 15:26:25
259
原创 解决vue单页返回不刷新的问题（公众号）
问题根源在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了。理想状态：点击详情页面返回列表不需要刷新
2021-06-07 16:05:17
413
原创 Vue单页面应用下IOS签名失败
Vue-router用的是history模式，在某个页面要应用jssdk，应用其中的录音等方法。Android下无任何问题，但是再IOS下会提示签名错误(invalid signature)。
2021-06-07 15:27:10
614
原创 VUE中实现点击打印功能—vue-easy-print
1.安装vue-easy-printnpm install vue-easy-print --save2.页面按需加载import vueEasyPrint from "vue-easy-print";3.html页面编写<vue-easy-print ref="printRef"></vue-easy-print>4.点击触发this.$refs.printRef.print()...
2021-04-30 17:44:58
3826
1
原创 vue使用video.js解决m3u8视频播放格式
1.在vue中安装下面这些插件npm install video.js --savenpm install videojs-contrib-hls --save2.页面中使用<video id="sosVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" styl
2021-04-30 15:13:26
473
1
原创 MediaDevices.getUserMedia` undefined 的问题
MediaDevices.getUserMedia` undefined 的问题字数：196，预计阅读时间：1min 通过MediaDevices.getUserMedia()获取用户多媒体权限时，需要注意其只工作于以下三种环境： localhost域 开启了 HTTPS 的域 使用file:///协议打开的本地文件 其他情况下，比如在一个HTTP站点上，navigator.mediaDevices的值为undefined。 如果想要H...
2021-04-20 10:30:12
252
原创 vue elemen-ui input选中光标
<el-input v-model="dataForm.content" type="textarea" :autosize="{ minRows: 4}" id="emojiInput"></el-input>// 选中光标 makeActive (item, color) { var elInput = document.getElementById
2020-10-14 10:43:31
1713
原创 使用 JavaScript 编写更好的条件语句
1. 数组方法 Array.includes我们可以通过使用Array.includes来重写上面的条件functionprintAnimals(animal){constanimals=['dog','cat','hamster','turtle'];if(animals.includes(animal)){console.log(Ihavea${animal});}}console.log(printAnimals('...
2020-08-17 09:18:39
108
原创 移动web性能优化从入门到进阶
连接：https://blog.csdn.net/weixin_33978044/article/details/91431885
2020-06-23 11:04:37
189
原创 优化vue 首屏加载过慢，减少白屏时间
1. 加速或减少HTTP请求损耗使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等；2. 延迟加载非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；2. 减少请求内容的体积开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等；3. 浏
2020-06-23 10:01:02
891
原创 Vue开发规范
定制规范目的为了提高团队开发的效率，毕竟代码是写给别人看的，好的开发规范能让一个团队其他成员方便阅读和理解你的代码 便于后期项目的维护，让后期维护人员一看代码，就能理解你的代码，而不是一头雾水 便于输出高质量规范的文档组件命名规范统一使用大驼峰（PascalCase）命名法，但切勿使用保留字 组件名应该始终为多个单词，根组件APP除外 使用有意义的名词、简短、具有可读性 公共组...
2020-05-25 18:21:33
149
原创 git版本控制
master主分支，用于部署生产，确保master分支稳定性master分支一般由develop分支以及hotfix分支合并，并且任何时间都不能直接修改代码develop开发分支，始终保持最新完成以及bug修复后的代码一般开发新功能时，feature分支都是基于develop分支创建的feature开发新功能时，以develop分支为基础创建此feature分支分支命名规...
2020-05-25 18:18:55
185
原创 css 规范
项目如无特殊情况，优先采用scss预处理语言文件命名每个页面对应一个样式文件，如果有抽离出公共的样式和单独的模块样式则添加下划线，用以标识；选择器命名统一采用英文小写命名，如果有多个单词，则使用连字符，严禁使用大写单独抽离的模块 和 公用模块需要采用单独的命名空间，避免样式覆盖和冲突css嵌套应该和html元素嵌套层级一样，保证成树状结构，并且适当的添加对应的注释选择器应该尽量避免...
2020-05-25 18:18:08
242
原创 HTML规范
文件命名单独页面文件一律采用小写命名，如果名称有多个单词或者词语组成则使用小驼峰命名法命名对于多个页面共同使用的公共部分其代码结构要单独剔出来以下划线前缀保存，方便复用代码规范每个文件顶部必须写上文档注释对当前文件进行解释说明，最少要写上本文档的作用标签应该保良好的层级顺序，保证块级元素包含行内元素，每一层级都应该对应的写好模块注释请编写具有语义化HTML文档1.语义...
2020-05-25 18:17:59
227
原创 JS规范
CSS规范基本规范1.除了基本必要的css文件以外，开发过程中可以采用css预处理器的统一使用scss2.模块化scss采用@import引入其他scss模块，非页面独有的scss命名应该以下划线前缀开头，以此减少编译次数HTML规范请编写具有语义化HTML文档语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时...
2020-05-25 18:17:37
191
原创 Vue开发规范
定制规范目的为了提高团队开发的效率，毕竟代码是写给别人看的，好的开发规范能让一个团队其他成员方便阅读和理解你的代码便于后期项目的维护，让后期维护人员一看代码，就能理解你的代码，而不是一头雾水便于输出高质量规范的文档项目目录结构组件命名规范统一使用大驼峰（PascalCase）命名法，但切勿使用保留字组件名应该始终为多个单词，根组件APP除外使用有意义的名词、简短、具有可读性...
2020-05-25 18:17:26
231
1
原创 前端工程化初始化配置
1.安装nodejs后请配置好npm全局目录(推荐安装nvm，方便随时切换node版本)参考：https://www.baidu.com/link?url=QR1-4WXPDcLmrLxBMy5uiljYdmkNft2DFJXuI2x3bDza2eTk5nXSe-HaFS5fRJDHEjQemAGWqmhKRPVwJtLi_K&wd=&eqid=9ade909500004714000000065e7036e5npm config set prefix <全局模块安装路径>n
2020-05-25 18:17:06
220
原创 vue pc端支付宝调用支付接口
请求支付宝支付，后端返回form表单处理 aliPay (res) { // 调用支付宝 this.$router.push({ path: "/alipay", query: { htmls: res.qrCode } }) /******res.qrCode,h后端返回form表单的字段*********/ }建立新页面alipay.vue&...
2020-01-20 15:59:19
1438
2
原创 input框验证总结
1.只能输入英文（不能输入中文和数字）e.target.value = e.target.value.replace(/[\u4e00-\u9fa5\d]/g, '') || "";2.邮箱验证export function isEmail (s) { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,...
2020-01-17 10:34:21
422
原创 json.stringfy()和json.parse()
使用JSON 的Stringly和Prase进行封装和解析1、将对象转换为JSON格式字符串JSON.stringify(object)2.将JSON字符串转换为对象JSON.parse(jsonString);
2020-01-14 14:43:26
261
原创 flex布局经常运用场景
flex弹性布局_等分（平均分布。在容器里面平均分配空间，需要设置项目的自动缩放。）ul{ display:-webkit-flex; display: flex;}li{ flex: 1; border:1px solid #eee;}flex弹性布局_自动换行ul{ display:-webkit-flex; display: flex; flex-w...
2020-01-14 14:02:12
182
原创 vue实现搜索功能
computed (赋值) <template> <div class="service"> <div class="search-main"> <el-input placeholder="搜索名称" v-model="query.name"> <i slot="su...
2020-01-14 11:28:30
471
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人