- 博客(60)
- 收藏
- 关注
RSS订阅原创 canvas的width和style.width的区别
在canvas中，有width和height两个属性，它定以的是canvas的画布和画纸的大小。如果不设定，默认是300*150；例如我们设置canvas的宽高都是300<canvas id="demo" width="300" height="300"></canvas>如下图，画布和画纸都是300，画面没有变形。通过css设置canvas的width和hei...
2020-03-30 16:54:01
4087
原创 vue组件的自调用（递归调用）
需求：封装一个树形组件，数据结构如下所示，但是层级不确定。treeData:[ {text:1,children:[ {text:2,children:[{text:5},{text:'55'}]}, {text:3}, {text:4}, ]} ]因为层级不确定，那么就存在组件递归调用的...
2020-03-13 00:38:11
5401
3
原创 vue cli 3项目打包到指定目录
平常我们使用vue-cli构建项目，直接执行npm run build打包到dist目录下，然后项目一般又部署在我们服务器的根目录下。这样正常的流程，但是需求是多样的，有时我们就会遇到需要把项目部署到服务器下某个文件夹下，例如http://testpms.timi5.cn/demo/index.html这时我们就需要以下操作：1：修改vue.config.js文件；module.export...
2020-01-08 10:45:44
7846
1
原创 css怎么实现左边高度随右边的高度变化
方案一：flex布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
2019-12-25 16:52:21
2898
原创 身份证读卡器 浏览器插件
最近在研究身份证读卡器的浏览器端插件，记录如下兼容chrome浏览器的有千景、东信。不过这俩价格都比较贵。便宜一点的网上技术比较多的就只有华视了。价格大概是1500。但是华视读卡器目前没有chrome浏览器的插件。只找到了360急速浏览器和360安全浏览器的插件。插件地址html:<input type="button" value="测试" onclick="myReadCard...
2019-12-25 14:40:28
7220
原创 微信小程序 'errcode' => 47003,'errmsg' => 'argument invalid! hint
微信小程序的订阅消息，要求要比模板消息严格。出现’errcode’ => 47003, ...
2019-12-12 18:10:02
20938
6
原创 微信小程序订阅号
人在家中坐，班从天上来一直以来，微信Api一直很强势。这次也不例外。既然模板消息不能使用了，那只能加班改为订阅消息。一、微信公众平台部分1.1 要想使用微信订阅号功能，首先你要在微信公众平台申请开启订阅号功能。1.2 开通成功后，添加订阅模板。这里的模板id是用来推送消息的。模板添加完成以后，微信公众平台的操作就已经完成了。二、前端部分微信订阅号的前端部分是很简单的，只需要用...
2019-12-12 18:00:08
1455
原创 react (二) --编写Hello world
元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。1、首先我们在一个 HTML 页面中添加一个 id=“example” 的 :<div id="example"></div>2，渲染组件方法一：使用functionfunction Clock(props) { return ( <div> <h1&g...
2019-04-22 16:27:50
234
原创 React（一）--搭建开发环境
搭建开发环境目前成熟的框架都有一套相对完备的脚手架工具，像vue的vue-cli，那么react的就是create-react-appnpm install create-react-app -g全局安装好以后，就可以创建自己的工程文件了create-react-app my-react等待几分钟。。。安装好依赖以后，进入创建好的工程文件夹cd my-react打开pac...
2019-04-22 15:05:16
107
原创 H5唤起App，本地没有则下载
H5唤起App，本地没有则下载如果只想单纯的打开app,而不去判断是否已经安装，直接使用scheme协议就行了。如果想实现没有安装就下载app的功能，代码如下：在浏览器实际上是没有能力判断手机里是否安装了某个App的，所以只能够采取一种投机取巧的方式。在JavaScript中判断页面是否进入后台来判断打开成功。Html5提供了下列事件和属性可以利用：pagehide : 页面隐藏时触发...
2019-03-29 10:15:58
1202
原创 App和H5的交互方式
一、App向H5传递数据方法1：通过url拼接参数，H5进行截取。方法2：通过脚本方式，具体如下：在H5端：把方法挂载到window对象上。 window.getConfirmOrderListParms=function(skuList){ xxxx }注意：如果是使用的vue,方法要写到created中，这样做的目的是为了防止app调用该方法的时候这个方法还没加载...
2019-03-20 17:32:10
2327
原创 移动端1px问题
项目中有个样式需要设置为：border-bottom:.01rem solid #f6f6f6; 但是在魅族手机自带浏览器上显示不出来。解决方案：在元素行内添加样式，使用1px,<div class="item" style="border-bottom:1px solid #f6f6f6;">...
2019-01-08 14:47:18
357
原创 H5在苹果手机里唤起输入框后底部出现白条
H5网页中，用户输入完成后关闭输入框后底部会出现白条，如下图：解决方案：在输入框失去焦点的时候，调用下列代码即可：$(window).scrollTop(0,0);原理：用户在输入完成以后，窗口页面可能计算出现错误，因此强制窗口重绘。...
2019-01-04 16:34:45
4198
原创 H5网页在ios系统里滑动卡顿
H5网页在安卓系统里滑动还是挺流畅的，但是在苹果手机里面会异常的卡顿，优化方案如下： overflow:auto; /* 用于 android4+，或其他设备 */ -webkit-overflow-scrolling:touch; /* 用于 ios5+ */注意：这段代码一定要加在最外层的容器里。例如webpack中常用的app，或者html,body中。...
2019-01-04 16:27:25
1200
1
原创 VUX采坑记录--Scroller
滑动是在移动端使用频率非常告的一个功能，但是vux组件不知什么原因，放弃维护了scroller这个组件。但是经过项目中的使用，发现这个组件虽然不维护了，但是基本能够满足日常的使用。以下就是在使用的过程中所踩的坑。1，在scroller组件中，一定要有一个整体的div<scroller lock-x scrollbar-y ref="scroller1"> &l...
2018-12-05 10:16:36
3712
原创 微信小程序如何实现切换主题（更改皮肤）
一：基本原理因为小程序中没有样式引入的概念，所以不能像传统的html中那样改变link标签的href值来达到切换样式文件。在小程序中，可以在类名中定义变量，通过动态改边类名，最终达到修改样式的目的。二：具体实现在wxml文件中：其中的变量theme来自welcome.js中，theme的值决定着使用哪个样式来影响页面在wxss文件中：这里需要把所有的样式文件都引入进来，因为小程序里...
2018-10-15 09:35:26
22688
原创 微信小程序----分包预加载
一，为什么要使用分包预下载小程序的分包能使小程序有更大的代码体积，承载更多的功能与服务；而对用户而言，可以更快地打开小程序，同时在不影响启动速度前提下使用更多功能。但是金无足赤，分包肯定不会只有优点没有缺点。使用分包的时候我们就会发现，虽然加载首页 的时间变短了，但是当我们打开分包的时候，会有一个明显的加载过程。而且在安卓手机里会有一个系统级别的加载loading。那么如何解决分包的这...
2018-09-13 15:18:19
10683
1
原创 微信小程序----分包
一，为什么要使用分包2017.01.09 小程序上线时，官方限制小程序代码包不能超过1MB 大小。所以小程序才能“随用随走“ ，秒开。但是时至今日，官方公布的最新的代码体积控制：整个小程序所有分包大小不超过 8M单个分包/主包大小不能超过 2M从1M到8M，变化的不只是小程序的代码体积，更是小对程序的打开速度产生极大的影响。1M的时候小程序可以做到秒开，如果8M还能这么灵活轻便吗？？...
2018-09-13 14:56:19
6231
2
原创 微信小程序----自定义组件
微信小程序充分借鉴了vue的代码风格，但是却没有像vue那样的高效的组件特性。但是这一备受诟病的地方在小程序1.6.3版本得到了解决。从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。接下来，是我参考小程序官方API总结的自定义组件的使用方法：第一步：新建一个组件微信开发者工具提供了组件的模板。点击...
2018-09-12 15:53:09
900
原创 js高级用法
1.一行代码实现数组对象深拷贝 普通数组直接使用[].concat(_test)var _test = [1,2,3];//原数组var _testCopy = [].concat(_test);//拷贝数组_testCopy[0]=4;console.log(_test);// [1,2,3]console.log(_testCopy);//[4,2,3]对象数组：[].con...
2018-08-06 20:55:49
1249
原创 前端采坑----js部分
1，通过jquery.change方法监听文本框，但在失去焦点后才会触发？？？？解决方案： 使用input事件，propertychange是为了兼容IE$('input,textarea').on('input propertychange', function(e){});…未完，待续！...
2018-08-06 17:10:04
211
原创 package.json中 npm依赖包版本前的符号的含义
问题引入：我们在使用npm下载依赖包的时候，在package.json中会出现对应包的版本号。可是我们会发现在版本号之前，一般都会有几个特殊符号。例如：“~”,”^”,”&gt;”……那么这些符号都有什么含义呢？一般来说，版本号大体分为三个部分major.minor.patch主版本号.次版本号.修补版本号1， version版本号之前不带任何标记表示必须依赖这个版本的包 ...
2018-08-06 17:06:36
814
原创 package.json中 npm依赖包版本前的符号的含义
问题引入：我们在使用npm下载依赖包的时候，在package.json中会出现对应包的版本号。可是我们会发现在版本号之前，一般都会有几个特殊符号。例如：“~”,”^”,”&gt;”……那么这些符号都有什么含义呢？一般来说，版本号大体分为三个部分major.minor.patch主版本号.次版本号.修补版本号1， version版本号之前不带任何标记表示必须依赖这个版本的包...
2018-07-14 10:54:31
2290
原创 webpack系类之代码分割和懒加载
webpack实现代码方式是主要是通过模块的引入方式1.require.ensure//进行代码分割require.ensure(['lodash'],function(){ var _ = require('lodash');//上边的require.ensure只会引入进来，但是并不会执行，再次require才会执行。},'vendor')或者：if(p...
2018-04-11 21:12:29
2618
原创 webpack系类之抽离公共模块
1.在项目里安装局部 webpacknpm install [email protected] --save-devwebpack.config.js：var webpack=require('webpack')var path=require('path')module.exports={ entry:{ 'pageA':'./src/pageA', ...
2018-04-10 20:59:32
2814
原创 webpack系列之编译typescript
1.下载tsloadernpm install webpack typescript ts-loader awesome-typescript-loader --save-dev配置webpack.config.jsmodule.exports={ entry:{ 'app':'./src/app.ts' }, output:{ ...
2018-04-07 17:08:55
1195
原创 webpack系列之编译ES6 / ES7
1.首先安装编译es6的包npm install [email protected] @babel/core @babel/preset-env webpack2.编写配置文件module.exports={ entry:{ app:'./app.js' }, output:{ filename:'[n...
2018-04-07 16:34:03
2021
原创 webpack系列之打包js
使用webpack打包js有两种方法：1，直接使用webpack 入口文件js例如： 在a.js中使用了b.js的方法。import sum from './b'console.log("2+3=",sum(2,3));那么，如果在命令行中执行 webpack a.js 则就会把a.js和b.js打包到一起 但是呢，这种方法几乎不会用到。2.使用配置文件在项...
2018-04-06 18:05:26
1500
原创 webpack系列之安装
1，首先要确保你的电脑安装了node.js，如果没有请参考我的这篇博客进行安装node.js安装教程2.全局安装webpacknpm install webpack -g如何判断是否已经安装成功了呢？验证命令如下：查看webpack都有哪些命令webpack -h 或者： 查看当前webpack的版本webpack -v注意： 由于webpack 产品...
2018-04-06 17:03:05
354
原创 前端模块规范
目前，前端js模块大体经历了以下几个步骤：命名空间COMMONJSAMD/CMD/UMDES6 module1.命名空间缺点：不能有效的避免命名空间的覆盖问题使用时必须输入完整，正确的路径。非常的不方便2.commonJS主要特点是：一个文件为一个模块通过module.exports暴露模块接口通过require引入模块同步执行示...
2018-03-17 18:19:35
294
原创 面试之css
1.超链接访问过后hover样式就不出现的问题是什么？如何解决？被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）2.什么是Css Hack？ie6,7,8的hack分别是什么？针对不同的浏览器写不同的CSS code的过程，就是CSS hack。 #test...
2018-03-06 17:28:07
2081
原创 面试之Html合集
1.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE: trident内核 Firefox：gecko内核 Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很...
2018-03-05 10:46:57
1779
原创 Angular4.0中bootstrap样式不起作用
插件的使用请参考Angular4中插件的使用如果你就是按照正常的使用步骤：先下载，再修改angular-cli.json文件，也下载安装了对应的描述文件。但是。。。。依然不起作用，那么很有可能是cnpm的锅很多人遇到第三方样式引入没效果。在搭建Angualr4时，我使用cnpm安装后发现了同样的事情，后来发现是因为使用了cnpm来安装，之后全部用npm安装，再运行后果然成功了。 ...
2018-02-26 17:27:11
1739
原创 Angular4.0 系列之第三方插件的使用
在angualr中，使用第三方插件，例如bootstrap,jquery等，大体可以分为三步；1，下载要使用的插件npm install jquery --savenpm install bootstrap--save注意：一定要在package.json文件所在的那一级执行命令。2，把要使用的插件加入到angular-cli.json 3.添加类型要使用的插件的ty...
2018-02-26 16:28:09
729
2
原创 Angular4.0 系列之使用Angular CLI 构建项目工程
1.机器必须安装node.js。如果没有安装node.js，请参考http://blog.csdn.net/css_666/article/details/78961469。2.安装angular clinpm install -g @angular/cli3.查看是否安装成功ng -v如果出现下图，则表示安装成功 4.构建项目 ng new 项目名n...
2018-02-24 17:53:16
366
原创 微信小程序 开发填坑
1，json文件里不能使用备注，否则编辑会报错2.如果图片未指定高宽，小程序会有一个默认的值。image组件默认宽度300px、高度225px3.只有使用text组件包裹的文字，才能在手机端长按选中4.缓存数据大小不能超过10M5.对swiper-item设置高宽是不起作用的，必须设置在它的父容器上swiper才可以。swiper-item自动继承父容器的宽高的100%6.在程...
2018-02-09 11:26:23
3344
1
原创 使用 js / jQuery获取iframe中的元素
1.在父页面中获取子iframe中的元素：js:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID"); jQuery:$("#iframe的ID").contents().find("#目标元素的ID")注意：在获取子页面的时候，如果子页面尚未加载完毕，上述方法会获取不到。尽量不要在...
2018-02-08 17:23:16
1460
原创 微信小程序---模板的使用
小程序中模板的使用 1，定义模板和样式， 注意：小程序只是是实现了模板的功能，但是没有实现模块的功能，所以这里不能定义js,即使有js也不会执行template name='postItem'> view class='post-container'> xxxxxx view>template>使用： 使用
2018-02-07 14:46:36
1976
原创 js实现经典算法
1.选择排序时间复杂度：O(n²)算法原理： 在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。实现代码：function sort(arry,type){ var type=type || "asc";//默认升序 for (
2018-01-31 15:46:00
211
原创 vue.js 2.0系列之 引入Elemrent UI
在Vue.js2.0+中，插件的使用步骤大体分为三步：引入要使用的插件注册一下要是用的插件正常使用ElementUI的用法同样如此一，完全使用1，引入ElementUInpm i element-ui --save2，useimport Vue from 'vue'import ElementUI from 'element-ui'import
2018-01-29 15:54:22
958
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人