共计 3915 个字符，预计需要花费 10 分钟才能阅读完成。
2019.3 记录开发过程中遇到的问题及通过自己摸索或查阅网上的教程整理出的解决方案，如有不全或者错误欢迎留言更正
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
上传代码时样式自动补全
代码上传时自动压缩
三个选项的打钩去掉
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 源码
npm 记录开发过程中遇到的问题及解决方案，如有不全或者错误欢迎留言更正持续整理更新正 ……..
