鹏仔工作室的秘密基地

好久没有搞过将vue项目打包成app了，这两天刚好项目需要将vue开发的H5项目打包成APP，那就简单记录一次呗（之前也写过一篇打包app，是将项目使用hbuilder打开，转为webapp什么的，就可以直接打包了，现在不一样了，现在使用HBuilderX还是有些区别）。第二步：我们下载HBuilderX，可前往官网下载 https://www.dcloud.io/hbuilderx.html 下载好以后，打开并新建项目，选择 5+App 默认模板，如下图所示。第三步，我们打开新建项目的文件，如下图所示。

大家好，我是小编鹏仔，近期给学校用uniapp开发了一款校园小程序，小程序有一些活动、咨询、公告、请假等通知，需要通过微信推送提示，用小程序自己的订阅方法有一些限制，于是需求这边想用绑定的学校公众号推送，因为小程序获取用户的openId和公众号的openId不一致，所以必须要调用公众号授权，因为项目已经基本做完，突然加这个我感觉挺麻烦的，一开始想偷懒我是拒绝修改的...emo...，后来还是妥协了，还是突破下，研发吧！（因为开发工具端原因，上图凑合的预览下吧！...

上次做了一个选择多个数据生成多个二维码并下载，当时项目催的紧，就简单写了个循环生成二维码下载，一次性会下载很多文件，特别难整理；刚好这次项目又遇到类似这种功能，需要一次性批量下载多个文件，那么就安排下打包下载吧！需要用到的是file-saver、jszip两个插件首先，我们安装这两个插件，在控制台中依次输入下方命令执行上方依赖安装完成，我们在需要实现打包下载的页面中引入这两个插件在data中，我就简单定义一个数组 fileList ，用来存放要下载的文件链接接着就是在 methods 中写

这周开会又新增一个小功能，就是需要通过身份证号/手机号在地图查询（后台返回经纬度），标记位置，想着挺麻烦，做的时候发现没啥技术，分享给大家。然后每次查询，通过调后台接口，拿到对应经纬度，赋值给longitude和latitude，那么地图就会展示对应经纬度区域，如果同时想展示定位的图标，那就按上方方式给markers赋值，可标记多个位置。（获取到数据后，最好不要直接给markers赋值，先let随便定义一个赋值，再将let定义的赋给markers，否则会出现不显示标记点现象）围观地址 un

现在很多站长都做了导航站，大多数导航站都有网站排行榜，也就是今日浏览榜，月最高浏览榜，总浏览榜等，你页面阅读量越高，那么排名越靠前，曝光的几率就更高。

经常会遇到后台反的时间是‘2020-02-02 10:00:00’，页面上需要只展示年月日或者只展示时分秒，那么最简单的方法就是返回过来的值直接截取一下即可。如何截取前几位，案例如下var date = '1996-10-22 22:55:33';var key = date.substring(0,10);console.log(key);// 打印结果：1996-10-22如何截取后几位，案例如下var date = '1996-10-22 22:5......

平时用到elementui时，经常遇到多级树形结构，但是后端往往给前端反的每一级字段不一致，如果写个遍历循环将其改为一致麻烦的，不如直接将后台发的数组转为字符串，再将字符串中不一致的字段替换成一致的即可，下放为如何替换字符串中需要替换的指定字符方法。案例如下一、替换字符串中所有为a的字符为elet str = 'abcabcabc';str = str.replace(/a/g, 'e');console.log(str);// 打印结果： ebcebcebc...

近期项目需要实现在后台管理添加一个大屏统计页面，大屏弹窗用到elementui的 对话框、选择器等ui插件，因为默认的elementui的样式与大屏样式格格不入，所以我需要强制修改他的样式，那么我就想着给当前组建的body添加一个独一无二的类名，再直接强制修改类名下的elementui样式。首先我们在mounted中写入mounted(){ document.getElementsByTagName("body")[0].className="body-class";}这样我们...

项目中用到了elementui的表格，今天开会突然说要需要欠费的用户的一行文字为红色，那么安排一下。如上图所示首先，我们在el-table标签中加入 :row-class-name="tableAddClass" ，双引号自定定义命名。<el-table :data="tableData" :row-class-name="tableAddClass"></el-table>接着在methods中写入下放代码tableAddClass({row,...

项目中，需要实现获取当前位置的经纬度，或者搜索某个位置并获取经纬度信息，我使用的的是vue，地图使用的是百度地图。默认自动获取当前位置经纬度拖动小红标 获取经纬度关键词 查询获取经纬度前期准备首先，我们需要取百度官方申请一个地图api秘钥，https://lbsyun.baidu.com/apiconsole/key进入后在应用管理，我的应用去申请即可。申请好以后，我们打开vue项目中public文件下的index.html文件，拼接百度AK值并引入&lt......

最近鹏仔刚接触uniapp，项目使用uniapp开发微信小程序，需要实现一个长按时进行语音录制，限制录制时间最大为60秒，录制完成后，可点击播放，播放时再次点击停止播放，录制完成长按实现删除功能，删除后又可重新录制（如上图所示）。视频演示https://v.qq.com/x/page/b325884hmr3.html下放为整体代码，可能不是很完美，没有想象中的那么流利，但是功能都有实现，欢迎借鉴（其中包含CSS实现语音音阶动画效果，自行复制即可获取）。HTML部分<...

上图为转换前后对比平时页面链接传参为对象，我们需要转为字符串在传值，取值时又得转为对象，所以比较常用，就整理下吧！对象转为字符串JSON.stringify(obj)json字符串转为对象JSON.parse(str)原文地址 http://www.sharedblog.cn/post/228.html...

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

上篇文章说了最近开发H5可视化编辑器，生成的H5需要嵌套在原生APP中，那么必然需要调用原生app的事件或者app调用我H5的事件。因为，H5首页内容可能会添加的丰富比较多，需求怕一次请求加载慢，所以让搞了分页，无限滚动加载，但是app把H5的滚动禁掉了，所以H5无法获取滚动事件，只能是app到底触发H5的事件，那么app如何触发H5事件。我是vue开发的，在mounted中，按下放方式定义，onScrollBottom为与app定义的事件名，this.onScrollBottom是...

最近用VUE开发的财务系统，牵扯了很多金额，金额几千上万，数字不好区分，需求需要实现金额三位一隔，每三位用逗号或者其他符号隔开，那么安排一下。// 金额三位间隔export const interval = (key) => { key += ''; let x = key.split('.'); let x1 = x[0]; let x2 = x.length > 1 ? '.' + x[1] : ''; let reg = /(\d+)(\d{3})/;...

这两天想着给网站写一个H5app玩玩，文章列表页想实现是否为当天发的文章，如果是当天那么显示一个NEW标识，后台返回的是发帖时的时间戳，我需要判断这个时间戳是否为当天时间即可。vue中直接在标签中判断如下（item.PostTime为发帖时间戳）<img class="new" src="@/assets/img/new.png" v-if="new Date(Number(item.PostTime)* 1000).toDateString() === new Date().toDat

经常用到，所以记录一下，刷新方法很多，用过这三个，所以只记录这三个，后面遇到在更新。第一种this.$router.go(0);第二种location.href = "javascript:history.go(0);";第三种window.location.reload();第一种和第二种，只支持安卓和PC第三种支持安卓、IOS、PC都支持，所以推荐第三种。原文围观地址http://www.sharedblog.cn/post/218.html个人博客..

vue 移动端实现手写签名效果，功能很完美，保存时保存为base64格式。base64转file文件格式 vue中将base64转file文件格式刚好项目用到此功能，就网上找了一下，清理了无用代码，简单方便，因为项目中多个地方需要使用，所以我将它整理为组件，通过ref和传值控制，下面代码我单独整理出来，可自行封装组件（只支持移动端，不支持pc端）。代码中，css自行修改一下宽高，背景之类即可。代码如下<template> <!-- 手写签名组件 --&g...

H5移动端看一些接口返回的参数，或者console打印的参数之类，没办法直接查看，用电脑f12切换移动端测试没有真机测试准确，所以使用Vconsole特别方便。安装麻烦，所以引入第三方cdn简单快捷。下面是bootcss提供的cdn外链<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script><scrip..

vue中如何点击返回上一页，vue判断没有上页返回首页vue中返回上一页// 返回returnBtn(){ this.$router.go(-1);},返回上一页，先判断是否有上一页，没有则返回指定页面// 返回returnBtn(){ if (window.history.length <= 1) { this.$router.push({path:'/'}); return false } else { this.$router

苹果手机new Date()时候的坑最近开发H5小游戏，有一个游戏活动倒计时，后端给我提供活动结束时间为（2021-01-13 12:00:00）这种格式，我需要获取当前本地时间，用倒计时时间减去当前时间，那么我得先转为时间戳，我先将后端返回的时间通过new Date("2021-01-13 12:00:00") 复原，在使用getTime()转为时间戳，再将我们当前时间转为时间戳，通过结束时间的时间戳减去当前时间的时间戳，获得相差的时间，在转为 时分秒（01:15:10）。在电脑端f12正常.

项目中，实现调用摄像头拍照，进行人脸识别，需要传给后端，拍照后我转的格式是base64，需要给后端传file文件格式，安排vue中，自行在assets新建js，封装如下，复制粘贴进去即可/** * dataurl: base64 * filename: 设置文件名称*/export const dataURLtoFile = (dataurl, filename) => { let arr = dataurl.split(','), mime = arr[0].match..

网上找的个案例，略加整理，简已封装，挺完美的。功能是将数字金额转为汉字金额vue中，自行在assets新建js，封装如下，复制粘贴进去即可/** * 数字金额转汉字金额 * val为字符串类型 */export const toChies = (val) => { //汉字的数字 var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); //基本单位 var cnIntR

在 utils 中自行新建文件 tool.js ，放入下放js代码/** * function: 60秒内（刚刚），60秒至60分钟（**分钟前），1小时至24小时（**小时前），1天至15天（**天前），其他为正常日期显示 * @number 時間戳 */function formatMsgTime(number) { var dateTime = new Date(number); // 将传进来的字符串或者毫秒转为标准时间 var Y = dateTime.getFullYe

话不多说，先上完整代码在utils文件下新建文件“http.js”，放入下方代码const host = 'http://www.iqzhan.com'; // 接口網址const domain = '/os_wxapi/v1/'; // 接口同樣的路徑區域// 接口地址拼接const urls = { home: host + domain + 'home', // 获取首頁接口 article: host + domain + 'article', // 获取文章詳情接口}

测试小姐姐让输入框不允许输入空格，安排。刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端和移动端事件不一样，所以如果你是pc端，可以使用下面这个方法。input上添加下方代码（我用的vant也一样,包括elemenui等）@keydown.native="keydown($event)"methods中写入下方代码methods:{ // 禁止输入空格.

iView 日期时间选择器设置开始时间至结束时间限制开始时间不能大于结束时间结束时间不能小于开始时间<DatePicker type="datetime" :options="startOption" v-model="startTime" placeholder="开始时间" format="yyyy-MM-dd HH:mm"></DatePicker><DatePicker type="datetime" :options.

项目中，有选择开始日期和结束日期的，写好了分享给大家吧！如有问题，请多多指教，谢谢。功能是开始日期可选今日或今日之后的日期，结束日期必须在开始日期之后，用的是elementui，案例分享给大家。我的效果是 报名开始时间（当日起之后）、报名结束时间（报名开始时间之后）、会议开始时间（报名结束时间之后）、会议结束时间（会议开始时间之后）。根据下图所示，选择A之后（清除B、C、D），B只能选择A之后的日期，选择B之后（清除C、D），C只能选择B之后的日期，选择C之后（清除D...

tp-watermark.js网页添加水印插件作者：鹏仔先生上周五，出差去改上个前端遗留的小问题，用到了watermark.js这个网站添加水印插件，功能很简单，就是给网页添加个水印，我看了下网上，有很多种，基本都是Canvas实现，我想要的是行与行之间交错效果，可是没有找到对应文档，看的烦的...那就自己简单写个网页添加水印插件吧， tp-watermark.js身为初级前端，写法比较low，但是功能很完善，请大家多多指导下载插件：点击下载DEMO...

query传参方式this.$router.push({ path: '/home', query: { id: '19961022' }})query取值方式mounted(){ this.id = this.$route.query.id;}param传参方式this.$router.push({ name: 'Home', params: { id: '19961022' }})param取值方式mounted.

结合之前文章，自定义子组件的使用，来实现一个子传父的功能，功能很简单，点击子级页面按钮，将值传递给父级中。首先，我们需要在子组件中，设置一个点击按钮<button @click="GetBtn()">点击按钮</button>接着在JS中，data定义一个参数ConKey,在点击事件中，使用$emit进行传参export default { name: 'childer', data () { return { ConK..

结合上篇文章，自定义子组件的使用，来实现一个父传子的功能，功能很简单，点击父级页面按钮，将值传递给子组件中。首先，我们在父级页面中，定义一个按钮标签（当然，父传子可以不需要设置点击事件，也可传值，在这里只是为了更加清晰演示）<button @click="keyBtn()">按钮</button>在JS中，我们给data中定义一个keys为传的参数，在点击事件 keyBtn()中，给keys赋值export default { name: 'app',.

首先在src下建立文件夹 components ，在里面随意创建一个子组件vue文件（我创建了一个childer.vue），创建好以后，编写子组件的内容。在父组件中，我们首先引入需要的子组件文件import childer from './components/childer';接着注册export default { name: 'app', data () { return { } }, components:{ childer: chil.

安装sass依赖npm install --save-dev sass-loadernpm install --save-dev node-sass安装完以后，在vue页面的style中添加 lang="scss"CSS<style lang="scss" scoped></style>添加后，自行写一段嵌套的css，如果有效果就OK了。如果报错，在package.json检查下sass-loader版本，可能是版本太高了，可以进行安装低版本即可。.

ello，大家好，前段时间做舔狗日记小程序，需要一键复制，看了下文档，小程序自带复制功能，那么网页js如何实现复制功能呢？首先，我查了下，貌似可以实现对input和textarea等文本输入框可以实现选中复制，针对div，p等标签不可以，那么我们需要新建一个文本框标签，不能给display:none; 我们需要怼他进行一个定位，让透明看不见找不到，点击复制，将需要复制的内容赋值给文本框，接着对文本框进行全选，在进行复制操作即可，代码如下：<p id="content">前端共享博.

在移动端开发时候，f12在电脑端（手机模式下）点击a标签，有个蓝色背景，通过苹果真机查看没有，安卓机也有，我们只需给body添加以下属性即可去除-webkit-tap-highlight-color: transparent;等同于-webkit-tap-highlight-color: rgba(0,0,0,0);详情http://sharedblog.cn/post/191.html个人博客http://sharedblog.cn/软件下载http://iqzhan.c...

JQ实时监听input的value值 jq监听input内容的变化详情http://sharedblog.cn/post/190.html$("input").bind("input propertychange",function(event){ console.log($(this).val());})原生JS实时监听input的内容变化<input type="text" oninput="OnInput(event)" value="鹏仔先生" /&...

使用js禁止鼠标右键详情http://sharedblog.cn/post/189.html// js禁止鼠标右键document.addEventListener('contextmenu',function(e){ e.preventDefault();})jquery如何禁止鼠标右键// jq阻止鼠标右键$(".btn").bind("contextmenu", function (e) { return false;});个人博客http:/...

大家自行下载引入ckeditor.js，下面给大家分享一下ckeditor 获取编辑器的内容，和定义编辑器的默认内容。<body> <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea> <button id="GetBtn">获取内容</button></body><script> CKEDIT...

layer点击自定义按钮关闭对应的弹窗，layer如何关闭弹窗首先自定义一个变量点击 Btn 按钮，弹出弹窗（将弹窗事件赋给自定义的变量名）最后点击自定义的关闭按钮 ShutDown 时，触发关闭事件，关闭对应的 LayIndex 弹窗这样就可以实现你想关闭的任何一个弹窗，只需对应变量名即可，layer.close(变量名)<script> // 定义变量名 var LayIndex; // 点击定义的弹窗按钮弹出弹窗 $("#Btn")