资讯专栏INFORMATION COLUMN

web前端开发中遇到的问题整理(一)

airborne007 / 1090人阅读

摘要:完成已完成安装,重新启动编译。可以打开微信开发者工具,新建项目,项目目录就是文件夹。记录开发过程中遇到的问题及解决方案,如有不全或者错误欢迎留言更正持续整理更新正

记录开发过程中遇到的问题及通过自己摸索或查阅网上的教程整理出的解决方案,如有不全或者错误欢迎留言更正

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 /放置于文件最顶部

/* eslint-disable */
alert("eslint");

若在文件中临时禁止规则出现警告将需要忽略的代码块用注释包裹起来

/* eslint-disable */

alert("eslint");

/* eslint-enable */
4.在移动端查看console

由于在移动端无法打开控制台,所以用vConsole 进行调试

下载 vConsole 的最新版本,取出dist/vconsole.min.js放到本地

script引入
初始化var vConsole = new VConsole(); console.log("test")




    
    
    
    测试
    



    hahah
    


5.三元运算符的运用技巧

基本用法

表达式 (expr1) ? (expr2) : (expr3)

在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3。

进阶技巧点击这里

6.wepy+weui搭建小程序框架

1.执行 wepy init wepyjs/wepy-weui-demo wepy-weui-demo命令创建项目
其中wepy-weui-demo是项目名

$ wepy init wepyjs/wepy-weui-demo wepy-weui-demo

   wepy-cli · Generated "wepy-weui-demo".

2.项目创建成功后cd 进入项目目录,执行npm install安装依赖包

$ 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可能会有报错
如下

$ 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] [编译] 入口: srcapp.wpy
[14:23:53] [写入] JSON: distapp.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 () 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格式,之后引入如下代码


其他详细操作点击传送门

14.js中的逻辑运算符 || &&

1、JS中的||符号:

运算方法:

只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。

 只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。

总结:真前假后

2、JS中的&&符号:

运算方法:

 只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;

 只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;

总结:假前真后

弄懂了以上说的还应该知道:

  在js逻辑运算中,0、" "、null、false、undefined、NaN都会判为false,其他都为true。

记录开发过程中遇到的问题及解决方案,如有不全或者错误欢迎留言更正
持续整理更新正........

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102743.html

相关文章

  • 前端开发-从入门到Offer - 收藏集 - 掘金

    摘要:一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。 工欲善其事必先利其器-前端实习简历篇 - 掘金 有幸认识很多在大厂工作的学长,在春招正式开始前为我提供很多内部推荐的机会,非常感谢他们对我的帮助。现在就要去北京了,对第一份正式的实习工作也充满期待,也希望把自己遇到的一些问题和...

    sf_wangchong 评论0 收藏0
  • web前端开发遇到问题整理()

    摘要:完成已完成安装,重新启动编译。可以打开微信开发者工具,新建项目,项目目录就是文件夹。记录开发过程中遇到的问题及解决方案,如有不全或者错误欢迎留言更正持续整理更新正 记录开发过程中遇到的问题及通过自己摸索或查阅网上的教程整理出的解决方案,如有不全或者错误欢迎留言更正 1. 如何设置输入框 input 中 placeholder的字体颜色、字号 input::-we...

    zxhaaa 评论0 收藏0
  • web前端开发遇到问题整理记录——2019-04

    摘要:目录匹配下标是奇数或偶数的子元素获取屏幕高度小程序显示不出的原因小程序状态栏沉浸式小程序引用图标正文匹配下标是奇数或偶数的子元素奇数偶数获取屏幕高度获取览器显示区域的高度获取浏览器显示区域的宽度获取页面的文档高度获取页面的文 目录 1.css 匹配下标是奇数或偶数的子元素2.获取屏幕高度3.小程序tabbar显示不出的原因4.小程序状态栏沉浸式5.小程序引用iconfont图标 正文 ...

    leoperfect 评论0 收藏0
  • web前端开发遇到问题整理记录——2019-04

    摘要:目录匹配下标是奇数或偶数的子元素获取屏幕高度小程序显示不出的原因小程序状态栏沉浸式小程序引用图标正文匹配下标是奇数或偶数的子元素奇数偶数获取屏幕高度获取览器显示区域的高度获取浏览器显示区域的宽度获取页面的文档高度获取页面的文 目录 1.css 匹配下标是奇数或偶数的子元素2.获取屏幕高度3.小程序tabbar显示不出的原因4.小程序状态栏沉浸式5.小程序引用iconfont图标 正文 ...

    dendoink 评论0 收藏0
  • HTML-CSS

    摘要:但是,从字体上来说雪碧图制作,使用以及相关,图文。由于采用了编译,所以能够保证在浏览器不支持标准布局的情况下,回滚到旧版本的,保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争,但是有一件事是确定的极大的提升了移动端 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 ...

    xiaokai 评论0 收藏0

发表评论

0条评论

airborne007

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<