- 博客(28)
- 收藏
- 关注
原创 uni-app数据请求封装
1. utils文件夹-> 新建request.jsrequest.js :const baseUrl = 'http://******' //请求接口地址const httpRequest = (url, method, data) => { let meth = method.toUpperCase();//小写改为大写 if (!data) { da...
2020-03-24 17:51:38
3150
原创 vue H5与(Android、iOS)原生APP交互
一:JS调用APP1、封装公共方法:/** *js调用APP * @params {*} Obj 传给app参数 */export function JSToNativeAPP(params) { let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.i...
2019-12-23 15:03:26
2786
原创 Vue渲染富文本图片点击预览
1.渲染富文本:使用Vue提供的 v-html 进行富文本内容渲染<div v-html="content" @click="imageChgange($event)"></div>2.获取点击元素,点击图片预览绑定点击事件,传入 $event 参数 //ImagePreview Vant组件库图片预览组件 ima...
2019-10-19 16:13:45
3728
原创 js字符串插入指定字符
var str = 'abc' (例子转换后是有空格的,不需要的话转换时直接去掉空格即可:"/ $1 /" =>"/$1/")1. 'abc' => '/ a // b // c /'str.replace(/(.)/g, "/ $1 /")2. 'abc' => 'a / b / c /'str.replace(/(.)/g, " $1 ...
2019-08-20 18:16:09
12589
原创 微信小程序笔记——小程序movable-view实现左滑删除功能
一:前言movable-view(点击查看官方文档)左滑的元素高度需要是固定的,因为movable-view要求必须设置width和height;效果图:wxml:<view wx:for="{{items}}" wx:key="{{index}}"> <movable-area class='movable-area'> <mo...
2019-07-03 11:25:26
5185
2
原创 微信小程序笔记——微信小程序appjs的onLaunch执行完之后再执行Page的onLoad
一:前言小程序网络请求默认为异步请求,在appjs的onLaunch运行后进行异步请求时,程序不会停止,Page页已执行onload, 我们希望onLaunch执行完后再执行onload。解决方法:定义回调函数//app.jsApp({ onLaunch: function () { wx.request({ url: 'http://test.cn/lo...
2019-07-02 14:59:22
18904
7
原创 js防抖和节流 区别及实现方式
概念:函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。函数节流(throttle)与函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现...
2019-06-25 16:56:03
68282
17
原创 微信小程序笔记——处理小程序页面栈限制(小程序wx.navigateTo封装)
一、前言小程序中页面栈最多十层,随着页面增加路由跳转很容易在不知道的情况下就会堆栈到十层,再用navigateTo去跳转就跳不动了。这时候就需要删除当前页面栈(redirectTo)或删除所有页面栈(reLaunch)来跳转了。页面栈可以通过getCurrentPages方法获取。1、新建jsnavigateRoute.jsfunction navigateTo(url)...
2019-06-25 14:45:46
4781
原创 微信小程序笔记——微信小程序request请求封装
一、前言微信小程序提供的wx.request请求API,文档介绍的很清楚。直接使用代码未免累赘,并且处理一些返回操作不好统一处理,所以就对wx.request做了一下封装。1.新建js文件(request => index.js)// let baseUrl = 'http://******/'; //测试// let baseUrl = 'http://******/'...
2019-06-25 14:00:00
1805
5
原创 微信小程序笔记——小程序授权登录封装
一、前言产品需求:在游客模式登录下,用户做某些操作(如:评论,点赞。。。)时,需要拉起小程序授权登录,在没有单独登录页的情况下(为了方便可以让产品&UI出一个单独的登录页),封装一下小程序授权登录就比较方便了。1、组件编写新建Component => authorauthor.wxml:<!-- 未登录情况下拉起授权登录按钮 --><b...
2019-06-20 11:44:37
5444
3
原创 Vue.js结合Canvas制作二维码和图片的合成(html2canvas + Canvas2Image)--整理
之前写过一篇关于二维码和图片合成的博文,但是存在一些问题,本篇是本人整理最后在项目中使用的。建议:如果是单张背景图或者是多张背景图且二维码在同一位置的话,建议直接在后台合成分享图直接给前端返回即可,我这次项目需求是多张背景图并且二维码的位置都不同,后台不方便处理,所以直接前端来处理了。需求背景:分享图片,图片中含有自己分享链接生成的二维码!!大体思路:第一步、将自己的分享码或...
2019-03-18 20:40:40
6582
3
原创 vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码。下面直接上代码:html:<!-- 筛选demo --><template> <div> <input type="text" v-model="search"> ...
2019-01-24 17:43:13
24994
7
原创 make sure to provide the "name" option. vue循环引用组件报错问题
最近在开发项目中遇到引用组件老是报错:[Vue warn]: Unknown custom element: <is-notice> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 在我的项目中错误只发生在首页...
2019-01-15 11:59:15
20340
2
原创 vue之img标签:src地址拼接 --随记
背景:图片为本地资源,根据后台返回的icon(图片名字/标记)匹配本地图片。代码:(假数据)<template> <div> <ul class="gift_main_list" v-if="tabIndex == 1"> <li class="list_item" v-for="(it
2018-12-13 17:32:59
35814
14
原创 vue2+axios 请求拦截器及路由拦截器封装(笔记)
axios依赖安装:npm install axios -S 新建axios文件夹-> baseUrl.js & index.js & router.js main.js 引入//axios封装import './axios' js介绍:baseUrl.js:baseUrl.js 简单区分开发环境、测试环境及生产环境 ,之前有篇文章已经介绍 ...
2018-12-07 11:26:05
5238
2
转载 vue之menu弹出菜单效果
先上效果图,这个项目的github可以看一看从上图中,我们可以看出界面主要分为menu和item2块,其中menu的动画是自传,item的动画是位移,然后这里我们通过绝对布局的方式将整个控件定位在四个角落。.menu_container { position: absolute; z-index: 100; border-radius: 50%; tr...
2018-11-16 09:58:31
4833
3
原创 Vue.js结合Canvas制作二维码和图片的合成(qrcanvas + html2canvas)
(这个有问题,最近会把整理后的更新上去!!!!!!)最新最新!!!:https://blog.youkuaiyun.com/zuorishu/article/details/88632978需求背景:分享图片,图片中含有自己分享链接生成的二维码!!大体思路:第一步、根据自己的分享链接生成一张二维码; 第二步、结合一张图片合成带分享二维码的大图;开干:首先来生成二维码,之前都是使用...
2018-11-09 10:38:57
17553
11
原创 vue2结合qrcanvas生成二维码
一. npm安装 npm install qrcanvas二. 在用的页面引入import { qrcanvas } from 'qrcanvas';三. html<div id="qrcode" ></div>四.scriptthis.$nextTick(()=> { var canvas = qrcanvas({ ...
2018-11-08 18:45:33
1446
原创 js获取地址栏url参数 亲测好用
代码 : //获取地址栏参数 function GetQueryString(str) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); ...
2018-11-02 17:48:57
452
原创 时间转时间戳&时间戳转时间格式兼容ios方法封装
废话不多说,直接上代码!!!export default { //时间格式返回 方法一: //data :传过来的时间/时间戳 type:时间返回格式类型 (可自定义) formatDate: function(date, type) { if (date != undefined) { //兼容ios ...
2018-10-30 15:09:03
2009
原创 vue封装公共方法处理js计算科学记数法精度问题
声明:本文核心是很早之前参考其他大牛的文章或博客,文章出处也找不到了,如有看到请留言,会补上出处。自己稍作改动,一直保留在用。废话不多说,下面直接上在vue中自己如何使用的代码:1.新建公共方法的js文件,我为这个单独建了一个文件:calculation.js 代码:var countDecimals = function(num) { var len = 0; ...
2018-10-17 14:58:23
3697
原创 vue2+elementUI+i18n 国际化语言切换实现
vue-i18n github:https://github.com/kazupon/vue-i18nvue-i18n安装: npm install vue-i18n --save1.src目录下新建i18n文件夹>看下图2. cn.js代码import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入elem...
2018-08-15 18:29:51
13930
10
原创 vue2+axios项目简单区分开发环境、测试环境及生产环境以加载不同域名
在main.js 或者你自己配置的api.js中使用,原理:根据获取到的URL的主机名 来判断是开发环境或测试环境或正式环境,来设置不同的baseUrllet baseUrl = '';if (location.hostname == '***') { //测试环境 baseUrl = '***';} else if (location.hostname == '*****')...
2018-08-07 17:12:00
4338
1
原创 vue-cli 项目在IE内核兼容配置参考
问题一:页面内容不显示解决方法:在index.html页面添加如下代码<meta http-equiv="X-UA-Compatible" content="IE=edge" />问题二:语法错误解决办法:下载安装babel-polyfillnpm install babel-polyfill --save然后在main.js引入 import 'ba...
2018-08-07 16:07:42
1905
原创 highcharts编写交易所深度图
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-sc
2018-07-21 10:20:27
4002
3
原创 vue使用elementUI的el-input监听回车事件
由于elementUI对input进一步进行封装,直接@keyup.enter是没有响应的。使用方法是在事件后面脚上.native<el-input type="password" v-model="form.pwd" @keyup.enter.native="submitForm()" placeholder="Please enter your password"></el-...
2018-07-16 15:14:00
18202
原创 ES6 map()遍历、filter()筛选--随记
map():map和forEach等遍历方法不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,返回一个新的被改变过值之后的数组(map需return),一般用来处理需要修改某一个数组的值。let arr1 = [1,2,3];let arr2 = arr1.map((value,key,arr) => { console.l...
2018-07-08 14:59:32
69883
原创 vue+elementUI表格关键字筛选高亮
代码:<template> <div class=""> <div class="top"> <!-- 筛选 --> <div class="screen"> <div style="width:30%&
2018-07-03 15:33:34
9895
7
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人