前端开发中遇到的问题整理——2019.3

2019-03-07 本文已影响14人有梦想的风筝

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

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引入<script src="path/vconsole.min.js" type="text/javascript"></script>
初始化var vConsole = new VConsole(); console.log('test')

<!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.三元运算符的运用技巧

基本用法

表达式 (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] [编译] 入口: 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
上传代码时样式自动补全
代码上传时自动压缩

三个选项的打钩去掉

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