web前端开发中遇到的问题整理(一)
记录开发过程当中遇到的问题及经过本身摸索或查阅网上的教程整理出的解决方案，若有不全或者错误欢迎留言更正javascript
1. 如何设置输入框 input 中 placeholder的字体颜色、字号
input::-webkit-input-placeholder{
/*颜色*/
color:#fff;
/* placeholder字体大小 */
font-size: 12px;
/* placeholder位置 */
text-align: right;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
/*颜色*/
color:#fff;
/* placeholder字体大小 */
font-size: 12px;
/* placeholder位置 */
text-align: right;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
/*颜色*/
color:#fff;
/* placeholder字体大小 */
font-size: 12px;
/* placeholder位置 */
text-align: right;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
/*颜色*/
color:#fff;
/* placeholder字体大小 */
font-size: 12px;
/* placeholder位置 */
text-align: right;
}
2.js判断jios仍是android
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isAndroid){
console.log('android)
}
if (isIOS) {
//这个是ios操做系统
}
3.忽略eslint语法警告
若使整个文件范围内禁止规则出现警，将/ eslint-disable /放置于文件最顶部html
/* eslint-disable */
alert('eslint');
若在文件中临时禁止规则出现警告将须要忽略的代码块用注释包裹起来java
/* eslint-disable */
alert('eslint');
/* eslint-enable */
4.在移动端查看console
因为在移动端没法打开控制台,因此用vConsole 进行调试android
- 下载 vConsole 的最新版本，取出dist/vconsole.min.js放到本地
script引入<script src="path/vconsole.min.js" type="text/javascript"></script>
初始化var vConsole = new VConsole(); console.log('test')ios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试</title>
<script src="./vconsole.min.js" type="text/javascript"></script>
</head>
<body>
hahah
<script>
var vConsole = new VConsole();
console.log('test')
// 必定不要忘记初始化
</script>
</body>
</html>
5.三元运算符的运用技巧
基本用法git
表达式 (expr1) ? (expr2) : (expr3) 在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3。
进阶技巧点击这里github
6.wepy+weui搭建小程序框架
1.执行 wepy init wepyjs/wepy-weui-demo wepy-weui-demo命令建立项目
其中wepy-weui-demo是项目名web
$ wepy init wepyjs/wepy-weui-demo wepy-weui-demo wepy-cli · Generated "wepy-weui-demo".
2.项目建立成功后cd 进入项目目录，执行npm install安装依赖包npm
$ cd wepy-weui-demo
$ npm install ......... npm WARN wepy-weui-demo@1.0.0 No repository field. added 621 packages in 116.675s
3.开启实时编译，wepy build --watch
##执行wepy build --watch可能会有报错
以下json
$ wepy build --watch
{ Error: Cannot find module 'less'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
............
[WARNING] 找不到编译器：wepy-compiler-less。
[14:23:47] [信息] 检测到有效NPM包资源，正在尝试安装，请稍等。
npm WARN eslint-config-standard@7.1.0 requires a peer of eslint-plugin-promise@>=3.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN wepy-compiler-less@1.3.14 requires a peer of less@^3.8.1 but none is installed. You must install peer dependencies yourself.
npm WARN wepy-weui-demo@1.0.0 No repository field.
+ wepy-compiler-less@1.3.14
updated 1 package in 3.746s
[14:23:52] [完成] 已完成安装 wepy-compiler-less，从新启动编译。
[14:23:52] [编译] 入口: src\app.wpy
[14:23:53] [写入] JSON: dist\app.json
{ Error: Cannot find module 'less'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
......................
at Array.forEach (<anonymous>) code: 'MODULE_NOT_FOUND' }
[WARNING] 找不到编译器：wepy-compiler-less。
[Error] 未发现相关 less 编译器配置，请检查wepy.config.js文
解决方法
运行以下命令
npm install less --save
从新执行wepy build --watch便可
其中生成的 dist 文件夹就是小程序的内容。
能够打开微信开发者工具，新建项目，项目目录就是dist文件夹。
能够看到项目的初始化内容。
在小程序运行时，调试器中可能会有报错，不要慌张
在微信开发者工具中找到设置 》项目设置 将
ES6 转 ES5 上传代码时样式自动补全 代码上传时自动压缩
三个选项的打钩去掉
7.idea 项目设置前台html修改后当即生效
步骤太多了就不写了，给个传送门，要的自取
8.CSS控制文字，超出部分显示省略号
单行文本的溢出显示省略号
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
多行文本溢出显示省略号
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
9.清除定时器的方法
var t1=window.setTimeout(refreshCount, 1000 * 5);
function refreshCount() {
console.log("ready");
}
//去掉定时器的方法
window.clearTimeout(t1);
定时器是个很占内存的家伙，用完必定要记得清除，不然可能会形成内存泄漏
10.html中使用base64格式图片
首先将须要用到的图片转码成base64格式，以后引入以下代码
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU...........>
其中data:image/png;base64,iVBORw0KGgoA.....就是转码以后base64
将图片转化为base64编码格式，网站有不少可自行百度
11.npm源码
12.安装指定版本的ionic
更新命令 npm update -g cordova ionic 安装特定版本 npm install -g ionic cordova@5.0.0 npm install -g ionic@1.6.5 删除命令 npm uninstall cordova -g npm uninstall ionic -g
13.获取url 中的参数
假设当前页完整地址是：http://localhost:61768/Home/Index?id=2&age=18
var search = window.location.search;
var age = getSearchString('age', search); //结果：18
var id = getSearchString('id', search); //结果：2
//key(须要检索的键） url（传入的须要分割的url地址，例：?id=2&age=18）
function getSearchString(key, Url) {
var str = Url;
str = str.substring(1, str.length); // 获取URL中?以后的字符（去掉第一位的问号）
// 以&分隔字符串，得到相似name=xiaoli这样的元素数组
var arr = str.split("&");
var obj = new Object();
// 将每个数组元素以=分隔并赋给obj对象
for (var i = 0; i < arr.length; i++) {
var tmp_arr = arr[i].split("=");
obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
}
return obj[key];
}
其余详细操做点击传送门
14.js中的逻辑运算符 || &&
一、JS中的||符号：
运算方法：
只要“||”前面为false,无论“||”后面是true仍是false，都返回“||”后面的值。 只要“||”前面为true,无论“||”后面是true仍是false，都返回“||”前面的值。
总结：真前假后
二、JS中的&&符号：
运算方法：
只要“&&”前面是false，不管“&&”后面是true仍是false，结果都将返“&&”前面的值; 只要“&&”前面是true，不管“&&”后面是true仍是false，结果都将返“&&”后面的值;
总结：假前真后
弄懂了以上说的还应该知道：
在js逻辑运算中，0、" "、null、false、undefined、NaN都会判为false，其余都为true。
记录开发过程当中遇到的问题及解决方案，若有不全或者错误欢迎留言更正持续整理更新正........
相关文章
- 1. 前端开发中遇到的问题整理——2019.3
- 2. web前端开发中遇到的问题整理记录——2019-04
- 3. 在web前端开发中遇到的问题
- 4. web前端开发中常遇到的问题
- 5. 前端开发遇到的小问题
- 6. 前端开发中遇到的一些常见的小问题
- 7. H5开发遇到的问题整理
- 8. 【Web前端】Vue.js 项目中遇到的一些问题汇总
- 9. web前端开发笔记整理（一）
- 10. [整理]AngularJS移动端开发遇到的问题
- 更多相关文章...
- • Redis悲观锁解决高并发抢红包的问题 - 红包项目实战
- • Redis乐观锁解决高并发抢红包的问题 - 红包项目实战
- • PHP开发工具
- • IntelliJ IDEA中SpringBoot properties文件不能自动提示问题解决
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章