- 博客(34)
- 收藏
- 关注
RSS订阅
原创 vue 交互axios
首先下载npm i axios在main.js中编写import axios from 'axios';axios.defaults.baseURL = 'http://xxxx/api.php/';//数据地址公共部分axios.defaults.headers = { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'};Vue.prototype.$http=axios;get 请求t
2020-06-12 11:36:01
138
原创 vue配置路由
输入：npm i vue-router在main.js中配置//路由import VueRouter from 'vue-router';Vue.use(VueRouter);const router = new VueRouter({ routes:[ { path:'/home', name:'home', component:(resolve)=>require(['./html/home.vue'],resolve) .
2020-06-12 09:43:36
125
原创 @vue/cli脚手架创建项目
1、安装nodejs环境官网下载：https://nodejs.org/en/download/一直默认就行，路径可以改变但要记得到安装完成后打开cmd，输入node -vnpm -v如果能看到node和npm的版本号了，说明已经安装成功注：node版本最好高一点，保险的话直接安装最新版本的，因为vue运行需要基于npm一定的版本（最好是3.x.x以上），版本低了有可能会出错，而npm是随node的安装自动安装的，直接安装最新的node，npm的版本号也会变高的，不用再做更
2020-06-11 15:09:30
186
原创 vue+vant 中将px换算rem
vant rem适配，需要安装两个插件1.postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem2.lib-flexible用于设置 rem 基准值postcss-pxtorem：npm install postcss-pxtorem --save-devlib-flexible：npm i -S amfe-flexiblema...
2020-04-09 14:51:49
1069
原创 微信小程序图片上传
wx.chooseImage({ success (res) { const tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址，后台接口 filePath: tempFilePaths[0], name: 'file', //标识 formData: { //其.
2021-01-27 09:18:34
129
原创 微信小程序跳转京东小程序优惠券领取界面
1、首先微信打开京东小程序2、获取京东小程序的APPID3、获取京东接口返会的领取优惠券的链接shortURL4、let e = encodeURIComponent(this.data.shortURL); wx.navigateToMiniProgram({ appId: 'xxxxxxxxxxxxx', path: 'pages/union/proxy/proxy?spreadUrl=' + ...
2020-11-18 16:55:22
5716
5
原创 微信小程序倒计时
data: { endTime: '2018-11-22 10:40:30'//2018/11/22 10:40:30这种格式也行 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this= this; _this.countDown() },// 倒计时 countDown:function(){ var _this=this; var nowTime =.
2020-10-28 11:00:12
208
原创 微信小程序使用MD5加密
单独定义一个js文件：md5.jsfunction md5(string) { var rotateLeft = function (lValue, iShiftBits) { return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));}var addUnsigned = function (lX, lY) { var lX4, lY4, lX8, lY8, lResult;.
2020-09-11 15:54:46
2496
原创 微信小程序时间戳转为日期格式
首先在utils文件中创建time.jsfunction formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() .
2020-09-11 15:49:47
478
原创 微信小程序点击返回顶部
微信小程序有一个为 onPageScroll 的函数，可以获取到当前滑动屏幕的距离。onPageScroll: function(res) { console.log(res);},点击点击返回顶部的方法，如下：//返回顶部 goScrolltop:function(e){ if (wx.pageScrollTo) { wx.pageScrollTo({ scrollTop: 0, //滚动到页面的目标位置，单位 px
2020-09-11 15:42:55
226
原创 在微信小程序中获取某个view的信息位置
<view> <text class="title" id="nav">导航一</text></view>例如：获取这个view的信息位置wx.createSelectorQuery().select('#nav').boundingClientRect(function(res){ console.log(res)}).exec()我们得到返回结果：如图PS：selector类似于 CSS 的选择器，但仅支持下.
2020-09-11 15:28:06
3869
1
原创 微信小程序之base64地址转换本地图片地址
1.新建base64src.js文件const fsm = wx.getFileSystemManager();const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名function base64src(base64data, cb) { const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []; if (!format) { r
2020-08-19 11:09:24
2930
原创 微信小程序前端获取带参数的小程序码
1、首先我们需要判断我们获取的小程序二维码适用的场景-----官方API2、获取小程序的access_token---------官方API wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/token', data: { grant_type: 'client_credential', appid: '小程序APPID', //不能缺...
2020-08-19 11:04:30
1193
原创 vue 点击复制文本
安装依赖包：npm install clipboard --save在需要用到的vue文件导入：import Clipboard from 'clipboard';<p class="order-id" :data-clipboard-text="item.orderID" @click="copyID">{{ item.orderID }} 复制</p>//复制功能copyID () { var clipboard = new Clipboard.
2020-06-16 14:50:15
815
原创 vue 多语言切换
1.我们需要安装 vue-i18n：npm install vue-i18n也可以这样：<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>先在 main.js 中引入 vue-i18n。import VueI18n from 'vue-i
2020-06-12 14:15:06
986
1
原创 vue 解决两次访问相同路由地址报错
在main.js中输入// 解决两次访问相同路由地址报错const originalPush = VueRouter.prototype.push;VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}
2020-06-12 09:45:24
1021
原创 Vue开源项目库汇总
UI组件element★9305 - 饿了么出品的Vue2的web UI工具套件 Vux★6802 - 基于Vue和WeUI的组件库 mint-ui★4776 - Vue 2的移动UI元素 iview★4458 - 基于 Vuejs 的开源 UI 组件库 Keen-UI★2363 - 轻量级的基本UI组件合集 vue-material★2207 - 通过Vue Mater...
2019-12-13 16:04:11
354
原创 css引入的字体库
@font-face可以实现从服务器端加载字体，所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意，早在2001年时就被提出来，只不过近两年才被各浏览器广泛支持。而且各浏览器支持的字体文件格式也可能不同，一般来说如下四种格式可覆盖所有浏览器。eot：该格式仅在老版本的IE中使用ttf：(TrueTypeFont)是Apple公司和Microsoft公司共...
2019-12-05 16:28:09
532
原创 微信小程序检测版本是否有更新
当我们的小程序线上有更新时，需要弹出个提示框，告知用户更新小程序，而不是删掉旧版，再搜索小程序，点击打开后才可以看到新版，所以好的方法是给用户个提示在开发者工具上测试验证的时候，更新提示弹窗在小程序界面加载出来五六秒之后才弹出来，这是由于小程序在检测到有新版本之后，调用UpdateManager.onUpdateReady(function callback)进行版本更新监听，此时客......
2019-11-05 11:29:08
4912
4
原创 css文本超出显示...
文本只有显示一行，超出显示...overflow:hidden;text-overflow:ellipsis; white-space:nowrap;文本显示多行，超出显示...overflow: hidden;text-overflow: ellipsis;display:-webkit-box; -webkit-box-orient:vertical; -webki...
2019-10-23 09:26:16
264
原创 js 获取链接中携带的参数和删除链接中携带的参数
function GetLink(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var link= window.location.search.substr(1).match(reg); if (link != null) return unescape(link[...
2019-10-09 14:32:02
534
原创 上拉加载更多
//--------------上拉加载更多---------------//获取滚动条当前的位置function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop...
2019-10-08 10:35:06
132
原创 ajax 封装
首先将ajax封装成一个方法function request(url, data, callback) { $.ajax({ type: "POST",//使用POST或GET根据接口来定 url: url, dataType: "json", data: data, success: function...
2019-10-08 10:26:37
112
原创 当页面中图片加载失败时，显示默认图片
一、首先我们知道显示一张图片，通过访问图片的地址，如果地址正确就显示地址正确的图片，如果不正确图片就会加载失败如果想要在图片加载失败时显示我们的默认图片，只需要img标签就可以搞定这里需要了解一下img标签中的onerror ，onAbort，onLoad事件onError：当图片加载出现错误，会触发 经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉onLo...
2019-08-27 15:36:55
1780
原创 js 图片懒加载
一、什么是懒加载1、当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。2、通俗一点就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径（或者不放置图片路径）；当...
2019-08-27 11:38:33
219
原创 移动端meta标签
meta标签有很多作用，通常能够帮我们解决意想不到的问题，合理的配置meta标签很有必要！以下内容皆来自网络，仅供参考！各大网站移动端网页配置如下：一：天猫<title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> ...
2019-08-13 11:07:57
153
原创 css 圆形 半圆 弧形 三角等
首先，先规定一个div的样式div { width: 200px; height: 200px; background-color: red;}1.圆形原理：四个角都是圆角：四个角的取值为50%.circle { border-radius: 50%; /*border-radius圆角的四个值按...
2019-07-25 10:24:01
1210
原创 解决使用Vue.js，网速过慢是会暴露Vue的代码
我们在使用Vue.js时，网页刷新会先加载页面，在加载引入的Vue.js，有时网速过慢时，会暴露我们的代码等到Vue.js加载完毕后，才会显示我们的数据这个过程时间有长有短，完全取决于网速，这样就会影响用户体验，针对这一情况我们需要CSS[v-cloak]{ display: none;}HTML<p v-cloak>{{msg}}<...
2019-06-14 14:56:19
1990
1
原创 手机、PC 头像上传剪裁压缩
在线浏览地址：http://preview.binlive.cn/Mavatar/二维码浏览：第一步：引入jsjs地址：https://github.com/Hzy0913/Mavatar/blob/master/src/lib/mavatar.js此地址下载js为压缩版本或直接复制代码，这段代码本人因为需求的原因，对其进行了一定程度的修改，但并不影响正常使用；道友可放心...
2019-05-08 18:45:32
854
原创 IOS input输入时弹出键盘挤压页面，使页面失去焦点解决方法
前端在做手机适配时，通常IOS的适配很麻烦，我之前就遇到一个问题；在安卓手机上点击input是，手机弹出键盘，页面不会与任何变化；当苹果手机点击input是弹出的键盘，会将页面往上挤压一段距离，输入完成后，关闭键盘，你会发现页面会出现纵向拉条，之所以出现这个，就是因为键盘弹出使页面受到了一定程度的挤压，所以我们应该 在input失去焦点时将纵向拉条距离顶部的距离归零，但还有一个问题，就是有...
2019-05-06 14:30:09
2225
原创 js判断是否在微信浏览器中打开
js判断是否在微信浏览器中打开，如果在微信中打开，就隐藏class="header"的div，可用于手机页面头部；function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; ...
2019-05-06 14:18:42
440
原创 手机端 px 换算 rem 的 js
一般设计图宽度为750px；那么引入下面JavaScript，换算 100px = 1rem；(function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var metaEl, metaElCon; var s...
2019-05-06 14:13:14
1221
原创 PC端兼容手机端，一键复制文本内容
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="text" style=...
2019-05-05 21:27:15
809
原创 前端input file 图片压缩
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>压缩图片</title></head><body> <img id="img" src=""> <input id="file"...
2019-05-05 21:22:39
2717
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人