经验相关

[itboos]

document.querySelector("#22id"); 不能以数字开头，后面有数字可以支持
这个将导致错误：
document.getElementById('#id22') 这个则可以

VM188:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#01test' is not a valid selector.
    at <anonymous>:1:10

对于css 2:
该值在元素的主子树中的所有ID中必须是唯一的，并且必须至少包含一个字符。该值不能包含任何空格字符。

身份证可以采用什么形式没有其他限制; 特别是，ID可以只包含数字，以数字开头，以下划线开头，仅包含标点符号等。

但是，querySelector方法使用CSS3选择器来查询DOM，CSS3不支持以数字开头的ID选择器：

在CSS中，标识符（包括元素名称，类和选择器中的ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，以及连字符（ - ）和下划线_）; 他们不能以数字，两个连字符或连字符后跟数字开头。

使用类似于b22ID属性的值，并且您的代码将起作用。
原文链接:
https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document

[itboos]

微信分享问题:

微信JSSDK+nodejs 实现 微信分享API 微信授权页面->获取用户信息

  md 输入链接
  [网页标题](网页链接)

[itboos]

input 输入框默认调起数字键盘的方法:

描述: 在用户输入手机号和验证码时，我们希望仅仅是调起九宫格的数字键盘

  <input type="number" class="phone-input"   placeholder="请输入手机号" v-model="tell">

但是上面的那种写法， 安卓上是数字键盘， 但是在IOS 上，还是会看到文字（逼死强迫症）
解决办法:
方法1：
利用html 5 ，input type = 'tel' 这样写，ios和安卓调起的都是默认只有 数字键盘 输入电话号码的控件

  <input type="tel" class="phone-input"   placeholder="请输入手机号" v-model="tell">

方法2： 在type = number 的输入框上加上 正则，pattern="\d*"

  <input type="number" class="phone-input" pattern="\d*"  placeholder="请输入手机号" v-model="tell">

参考链接:
html5 input框默认调用九宫格数字键盘
论如何优雅的在手机端 input 框输入数字

上面的方式只能在IOS 上只能调起数字键盘， 没有小数点，不能输入小数， 目前还没找到既能显示数字键盘，又带有小数点输入的方法

[itboos]

关于input不同type值的样式重置 / 设置input placehoder 样式

关于input不同type值的样式重

1.设置 input 类型的输入框， placeholder 的文字颜色:
实质, input , video 内部都使用了shadow dom ，可以设置 placeholder 元素的字体颜色来设置

    / * placeholder */
<div pseudo="-webkit-input-placeholder" id="placeholder" 
style="display: block !important; text-overflow: clip;">请输入验证码</div>

通过chrome 浏览器，我们可以看到包裹 placeholder 的元素， 给它设置类名就可以了

   .user_withdraw input::-webkit-input-placeholder {
     color: red;
   }
 这时我们会发现，placeholder 的字体颜色就是红色了
  

input 样式重置

   input 样式重置

    input {
      outline: none; // 去除outline
      background: none;
      -webkit-appearance: none;  // 去除输入框的内阴影
      user-select: auto;
      &::-webkit-input-placeholder {
        font-size: 14px
        color: #999;
      }
    }

[itboos]

qrcode-js生成二维码

[itboos]

  // 阻止a 链接跳转：
 // e.preventDefault, herf = "#"
 // 带有给href 属性的a 链接阻止默认事件
 a[href="http://example.com"] {
   pointer-events: none;
 }

pointer-events
媒体Video,Audio相关事件
chrome 66自动播放策略改变-视频自动播放

[itboos]

input 输入框无法输入的问题

问题描述： Pc端可以获得焦点，移动端无法获得焦点，也无法输入
原因：
css 样式里：

  * {
     box-sizing: border-box;
    /*禁用文字选中*/
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

其中，禁止了所有元素选中的， 这使得input 也无法选中，导致无法输入

解决办法：
使input 可以选中，
设置：

   input {
       -webkit-user-select: auto;
        user-select: auto;
   }

[itboos]

禁止蒙层底部页面跟随滚动

   自己遇到的情况， 顶部 tabBar 固定, 中间内容自动滚动，没有设置高度
   当打开弹窗蒙层时，给元素添加一个类名，设置 中间内容设置成高度 100%， overflow: hidden

  当关闭蒙层时， 去除这个类
  同时，会发现 内容滚动了最顶端，我们想要关闭蒙层时， 滚动条的位置在一开始的位置
 

设置：
    点击蒙层时：  保存滚动条位置
    const scrollY = window.scrollY 
    关闭蒙层时，手动滚动到一开始的位置：
    // 回到原来的位置
    setTimeout(() => {
      window.scrollTo(0, this.state.scrollY)
    }, 100)

[itboos]

一个请求的截图：

[itboos]

单行文本和多行文本溢出显示省略号

参考：
Pure CSS for multiline truncation with ellipsis

单行文本溢出显示省略号,元素有时需要设置宽度

    .one-line{
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
    }

下面的方法对部分浏览器无效

.m-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; // 行数
  -webkit-box-orient: vertical;  
}

[itboos]

create-react-app 相关

Port端口配置

1. 在项目的根目录建立一个.env文件，里面指定端口号
   PORT=3006
2. 使用 cross-env ，在启动脚本里注入端口号
   "scripts": {
        "start": "cross-env PORT=3006 react-scripts start",
     }
  https://www.npmjs.com/package/cross-env

React中多行文本省略失效问题

<div className=" m-ellipsis" style={{"WebkitBoxOrient": "vertical"}}>{props.description}</div>

失效的原因：
Postcss to add CSS prefixes removing property (-webkit-box-orient: vertical)
原issue：
How to configure Postcss autoprefixer not to remove css property

Postcss Postcss autoprefixer 会把 -webkit-box-orient 属性给移除, 这应该是他们的一个bug.

目前解决方案就是： 在需要用到这个属性的元素上内联这个样式。

[itboos]

create-react-app 配置打包路径:

   "homepage": ".", // 使用相对路径， 即资源引入时使用 ./aaa/xxxa
    不配置的话，默认是 根路径
   还可以这样：
     "homepage": "localhost:3000/app"
     这样，打包出来的资源的路径就是：
     /myapp/static/js/2.0bbfd4a8.chunk.js

 问题： 如果想要资源使用另一个cdn 地址如何配置？
 即： https://xxx.com/myapp/static/js/2.0bbfd4a8.chunk.js

配置代理：

Create React App 通过 Proxy 在本地跨域请求 API
package.json 加：

   "proxy": "https://api-domain.com"

配置多个：

如果需要区分多个 API，我们 proxy 的值需要是个对象：

"proxy": {
  "/aapi": {
    "target": "https://a.api-domain.com",
    "secure": false,
    "changeOrigin": true
  },
  "/bapi": {
    "target": "https://b.api-domain.com",
    "secure": false,
    "changeOrigin": true
  }
}

由于我们的 API 是 HTTPS 协议的，所以我们每个 API 配置需要加这两个字段：
"secure": false,
"changeOrigin": true

然后发请求就可以直接不用跟域名直接请求接口路径了，比如 fetch('/bapi/list') 这样写来请求数据

[itboos]

React 路由 配置 子路径

• history 路由

    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

    //  使用bashname, 根据当前地址来设置 basename, 这样就可以在服务器上随意放位置了
    const positon = window.location.pathname.lastIndexOf('/');
    const relativePath = window.location.pathname.substring(0, positon);
    // https://github.com/itboos/accumulation/issues/10 -> 
    https://github.com/itboos/accumulation/issues
    // console.log('relativePath:', relativePath)
    return (
      <div className="app">
        <Router basename={relativePath}>
          <Switch>
            <Route path="/home"  exact  component={Home}/>
            <Route path="/ticket" exact component={Ticket} />
            <Route component={Home} />
          </Switch>
        </Router>
      </div>
    );

• hash 路由
  Hash-Router

   import { HashRouter, Route, Switch } from 'react-router-dom'
   <HashRouter>
          <Switch>
            <Route path="/home"  exact  component={Home}/>
            <Route path="/ticket" exact component={Ticket} />
            <Route component={Home} />
          </Switch>
    </HashRouter>

路由跳转，以及传参

    const pathObj = {
      pathname: `/ticket`,
      state: data,
    }
    // history 模式
    // this.props.history.push(pathObj.path, pathObj.state);
    console.log(' this.props.history:',  this.props.history)
    // hash 模式
    this.props.history.replace(pathObj);

[itboos]

creact-react-app 去除souce map

Production deploy - How to remove/disable webpack source-map
npm run build, how to remove webpack source map ?

1. 使用cross-env 传递 变量: cross-env GENERATE_SOURCEMAP=false npm run build
2. 在 根目录的 .env 文件里， 设置： GENERATE_SOURCEMAP=false
3. 配置一个命令，在打包后删除指定文件夹里的 .sourceap 文件

"build": "react-scripts build && rm build/static/js/*.map",

[itboos]

VScode 配置.vue 文件 自定义语法高亮块(如：config 标签)

.vue 文件使用了 vetur插件，它支持配置自定义语法高亮块
https://vuejs.github.io/vetur/highlighting.html#custom-block