静修-个人博客


  • 首页

  • 分类

  • 归档

  • 标签

  • 搜索

08-React中setState修改深层对象

发表于 2019-03-27 | 分类于 前端-05-react

方案一(作用于对象中的深层级和第一层级):

1
2
3
4
5
6
7
8
9
10
this.setState({
list: {
...this.state.list,
objA: {
...this.state.list.objA,
name: 'A1'
}
}
})
}

方案二(作用对象中的第一层级):

1
2
3
4
let data = Object.assign({}, this.state.list, {objD: 'D1'})
this.setState({
list: data
})

方案三(作用于对象中的深层级和第一层级):

1
2
3
4
5
6
let data = this.state.list;
data.objA.name = 'A1';
data.objD = 'D1';
this.setState({
list: data
})

11-centos7安装git

发表于 2019-03-27 | 分类于 前端-13-Linux

1.查看系统是否已经安装git

1
git --version

2.CentOS7 yum 安装git

1
yum install git

3.安装成功

1
git --version

卸载git

1
yum remove git

4. 配置用户和邮箱

1
2
git config  --global user.name "jingxiu"
git config --global user.email "Java_http@163.com"

5. 生成密钥

查看是否有密钥文件:

1
ls -al ~/.ssh/

添加密钥:

1
ssh-keygen -C 'Java_http@163.com' -t rsa

密钥类型可以用 -t 选项指定。如果没有指定则默认生成用于SSH-2的RSA密钥。这里使用的是rsa。

同时在密钥中有一个注释字段,用-C来指定所指定的注释,可以方便用户标识这个密钥,指出密钥的用途或其他有用的信息。所以在这里输入自己的邮箱或者其他都行。

输入完毕后程序同时要求输入一个密语字符串(passphrase),空表示没有密语。接着会让输入2次口令(password),空表示没有口令。3次回车即可完成当前步骤,此时~/.ssh/目录下已经生成好了。

参考链接
博客园-Git 中 SSH key 生成步骤

26-vue-cli3小试

发表于 2019-02-23 | 分类于 前端-08-vue

Vue CLI 有几个独立的部分

  1. CLI
  2. CLI 服务 (@vue/cli-service)
  3. CLI 插件

简单的配置方式

下面的代码 演示了如何全局引用jquery,以及使用dllPlugin将其单独打包出来

webpack_dll.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const path = require('path')
const webpack = require('webpack')
const CleanWebpaclPlugin = require('clean-webpack-plugin')
const FirendlyErrorePlugin = require('friendly-errors-webpack-plugin')

module.exports = {
mode: 'production',
entry: {
// 将 lodash 模块作为入口编译成动态链接库
jquery: ['jquery']
},
output: {
// 指定生成文件所在目录
// 由于每次打包生产环境时会清空 dist 文件夹,因此这里我将它们存放在了 public 文件夹下
path: path.resolve(__dirname, 'static'),
// 指定文件名
filename: '[name].dll.js',
// 存放动态链接库的全局变量名称,例如对应 lodash 来说就是 lodash_dll_lib
// 这个名称需要与 DllPlugin 插件中的 name 属性值对应起来
// 之所以在前面 _dll_lib 是为了防止全局变量冲突
library: '[name]_dll_lib'
},
plugins: [
new CleanWebpaclPlugin(['static']),
new FirendlyErrorePlugin(),

// 接入 DllPlugin
new webpack.DllPlugin({
// 描述动态链接库的 manifest.json 文件输出时的文件名称
// 由于每次打包生产环境时会清空 dist 文件夹,因此这里我将它们存放在了 public 文件夹下
path: path.join(__dirname, 'static', '[name].manifest.json'),
// 动态链接库的全局变量名称,需要和 output.library 中保持一致
// 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
// 例如 lodash.manifest.json 中就有 "name": "lodash_dll_lib"
name: '[name]_dll_lib'
})
]
}

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const path = require('path')

module.exports = {
publicPath: './',
chainWebpack: config => {
config
.plugin('ProvidePlugin')
.use(require.resolve('webpack/lib/ProvidePlugin'), [
{
$: 'jquery',
jQuery: 'jquery'
}
])

config
.plugin('DllReferencePlugin')
.use(require.resolve('webpack/lib/DllReferencePlugin'), [
{
// 描述 jquery 动态链接库的文件内容
manifest: require('./static/jquery.manifest.json')
}
])

// 该插件将把给定的 JS 或 CSS 文件添加到 webpack 配置的文件中,并将其放入资源列表 html webpack插件注入到生成的 html 中。
config
.plugin('AddAssetHtmlPlugin')
.use(require.resolve('add-asset-html-webpack-plugin'), [
{
// 要添加到编译中的文件的绝对路径,以及生成的HTML文件。支持globby字符串
filepath: require.resolve(path.resolve(__dirname, 'static/jquery.dll.js')),
// 文件输出目录
outputPath: 'static',
// 脚本或链接标记的公共路径
publicPath: 'static'
}
])
}
}

.eslintrc.js 注意加上全局变量,globals不能加双引号,语法较为严格

1
2
3
4
globals:{
"$":false,
"jQuery":false
}

参考链接
github项目文件

使用cdn引用jquery

此方法更为简单,

  1. 按往常一样,npm i jquery -S,引入jquery
  2. 新建vue.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    module.exports = {
    publicPath: './',
    chainWebpack: config => {
    config
    .plugin('ProvidePlugin')
    .use(require.resolve('webpack/lib/ProvidePlugin'), [
    {
    $: 'jquery',
    jQuery: 'jquery'
    }
    ])

    config.externals({
    jquery: 'jQuery'
    })
    }
    }
  3. 在public/index.html中引入cdn资源

    1
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  4. 注意.eslintrc文件添加 jquery为全局变量

1
2
3
4
globals:{
"$":false,
"jQuery":false
}

中文文档
参考链接

86-webpack中的tree shaking

发表于 2019-02-23 | 分类于 前端-02-js基础复习

webpack中的tree shaking

webpack 2 正式版本内置支持 ES2015 模块(也叫做 harmony 模块)和未引用模块检测能力。新的 webpack 4 正式版本,扩展了这个检测能力,通过 package.json 的 "sideEffects" 属性作为标记,向 compiler 提供提示,表明项目中的哪些文件是 "pure(纯的 ES2015 模块)",由此可以安全地删除文件中未使用的部分。

为了学会使用 tree shaking,你必须……

  • 使用 ES2015 模块语法(即 import 和 export)。
  • 在项目 package.json 文件中,添加一个 “sideEffects” 属性。
  • 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如 UglifyJSPlugin)。

03-微信小程序踩坑

发表于 2019-02-23 | 分类于 前端-12-微信小程序

小程序踩坑

01 cover-view的坑

1.不支持边框样式

比如我要给一个cover-view设置底部边框,我会在下面再添加一个cover-view,给第二个cover-view设置宽度百分之百,高度为1个像素,说白了就是模拟边框

2 滚动问题

tip: 基础库 1.9.90 起 cover-view 支持 overflow-y: scroll,但不支持动态更新 overflow

暂不支持 overflow-x: scroll

3 控制显示

使用 hidden 代替 wx:if

自定义组件嵌套 cover-view 时,自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐,否则会导致 cover-view 不显示

04 绑定事件

1
<button bindtap='toFixInfoPage' data-NO='{{NO}}>Click Me</button>
1
console.log(event.currentTarget.dataset.no);

在绑定事件处理函数的时候,也就是在wxml页面中,data-设置变量的时候是不分大小写的,但是在js里event的dataset就全部转换成了小写,我们在JS页面也只能用小写才能用它!!!

> 传过来的值都是字符串,需注意!!

05 set-Data key值动态设置

这个不算小程序的坑,一个注意点,加上[]中括号:

1
2
3
4
5
6
7
8
const arr=['showProvince','showCity','showArea'];
arr.forEach(item=>{
if(item===type){
this.setData({[type]:true})
}else{
this.setData({[item]:false})
}
})

另外一个例子:

1
2
3
var index=event.currentTarget.dataset.index;
var flag=!this.data.categories[index].active;
this.setData({['categories['+index+'].active']:flag});

06 函数防抖的问题

函数防抖这里引用underscore的debounce

this 绑定不需要更改

例子:

1
2
3
4
getCode:debounce(function(event){
console.log(this);
console.log('提交事件');
},5000,true),

07 input 绑定事件

由于小程序input组件没有提供双向绑定的功能,需要简单加上绑定事件监听

wxml部分

1
2
3
4
5
6
7
8
<input 
bindblur="handleInput" // 防止用户手写获取不到input值
bindinput="handleInput" // 绑定事件
data-inputkey="phone" // 通过inputkey标记
value="{{phone}}"
type="number"
class="yx-input"
placeholder="请输入您的手机号" />

js部分

第一种方案:(只适用单向绑定情况)

1
2
3
4
5
6
/**
* input 绑定事件
*/
handleInput(event){
this.setData({[event.currentTarget.dataset.inputkey]:event.detail. value})
}

第一种方案存在input和textarea在输入内容时,如果在bindinput事件时,通过调用setData保存输入的内容,光标就会自动跑到最后去,这也是个大坑。

第二种方案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* input 绑定事件
*/
handleInput(event){
var keyName=event.currentTarget.dataset.inputkey;
var arr=keyName.split(".");
var obj={}
if(arr.length==1){
this.data[keyName]=event.detail.value;
}else{
for(var i=0;i<arr.length;i++){
if(i==0){
obj=this.data[arr[i]]
}else if(i==arr.length-1){
obj[arr[i]]=event.detail.value;
}else{
obj=obj[arr[i]]
}
}
}
}

08 async/await 引入

注意: 小程序于20190508更新了微信开发者工具,增强编译功能已经支持 async ,不再需要引入 regenerator-runtime.js

经过微信开发者工具的不断升级,它的“ES6转ES5”的功能也渐渐有了加强,所以要用async/await的话,只需要引入regenerator runtime就可以了。

需要熟悉async api,特别是报错的处理上!
需要熟悉async api,特别是报错的处理上!!
需要熟悉async api,特别是报错的处理上!!!

把 regenerator-runtime.js 放到 libs 目录下,在页面引入

1
import regeneratorRuntime from "../../libs/regenerator-runtime"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
* 注意:这里用了resolve返回布尔值出去,所以在上面不需要 catch promise
* @returns {Promise [boolean]}
*/
verify(){
return new Promise((resolve,reject)=>{
if(this.data.phone===''){
wx.showToast({
title: '请输入手机号码', //提示的内容,
icon: 'none', //图标,
duration: 2000, //延迟时间,
mask: true, //显示透明蒙层,防止触摸穿透,
});
resolve(false);
}
if(!/1[0-9]{10}/.test(this.data.phone)){
wx.showToast({
title: '请输入正确的手机号码', //提示的内容,
icon: 'none', //图标,
duration: 2000, //延迟时间,
mask: true, //显示透明蒙层,防止触摸穿透,
});
resolve(false);
}
resolve(true);
})
},

注意:data数据的获取用 this.data.xx 获取

09 微信小程序里Promise不支持finally

引入 promise-finally.js,放在libs目录下

1
import '../../libs/promise-finally'
1
2
3
4
5
6
7
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
);
};

10 wxss不能设置本地背景图片

wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用标签。请参考文档:https://developers.weixin.qq.com/miniprogram/dev/qa.html#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87-wxss-%E8%8E%B7%E5%8F%96

采用 image 标签 + 绝对定位

1
2
3
4
5
6
7
8
9
10
.image-section{
position: relative;
}
.image__bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
<view class="dots__item image-section">
<image
class="image__bg"
src="/img/index-bg.png">
</image>
<view class="image__bg">
<view class="dots__name">xxx维修点</view>
<view class="dots__distance">454米</view>
<view class="dots__neast">距离最近</view>
</view>
</view>

11 关于小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题

参考链接

  1. scroll-view 中的需要滑动的元素不可以用 float 浮动;
  2. scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex;是没有作用的;

  3. scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排;

  4. 包裹 scroll-view 的大盒子有明确的宽和加上样式–>overflow:hidden;white-space:nowrap;

12 关于小程序UI组件库

这里引用了部分有赞的小程序组件库 vant-weapp

13 textarea使用注意点

13.1 小程序textarea遮挡键盘

设置cursor-spacing, 文档属性说明:

指定光标与键盘的距离,单位px或rpx,默认为px。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

13.2 获取textarea的值

input和textarea都有一个共同的问题,用户使用手写输入法时,bindinput无法获取到用户输入的内容。

解决办法:

再添加一个bindblur事件,可以获取到手写输入法的内容。

参考文章

1
2
3
4
5
6
7
8
9
10
11
<textarea 
bindblur="handleInput"
bindinput="handleInput"
bindconfirm="handleInput"
data-inputkey="installForm.describe"
cursor-spacing="80"
class="textarea-info"
placeholder="请输入服务描述"
name=""
id="">
</textarea>
当键盘输入时,触发 input 事件,event.detail = {value, cursor},bindinput 处理函数的返回值并不会反映到 textarea 上

13.3 textatea在actionsheet隐藏时刻还显示字体

在actionsheet隐藏时刻,通过动态修改 textarea class 解决

1
{{showActionSheet?'':'hide'}}

1
2
3
.hide{
display: none!important;
}
1
2
3
4
5
6
<textarea
cursor-spacing="80"
class="textarea-info {{showActionSheet?'':'hide'}}"
style="background:#fff;"
placeholder="请输入详细地址,如小区、楼座、门牌号等">
</textarea>

14 微信小程序使用wxparse问题:

文档地址

使用wxparse报错template12 not found请看 github issue

14.1 显示图片的相对路径问题

修改 html2json.js
1
2
3
4
5
6
7
8
9
10
11
12
13
//对img添加额外数据
if (node.tag === 'img') {
node.imgIndex = results.images.length;
var imgUrl = “http://www.baidu.com(这块换成你的域名地址前缀就可以了)”+node.attr.src;
if (imgUrl[0] == '') {
imgUrl.splice(0, 1);
}
imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
node.attr.src = imgUrl;
node.from = bindName;
results.images.push(node);
results.imageUrls.push(imgUrl);
}

14.2 console.dir在真机报错

修改 html2json.js

就是把 console.dir 注释掉,或者用 console.log 代替就好了啊。。这就是一个 log 日志,在功能上没啥用

15. 如何promise微信小程序api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//util.js
import Promise from './bluebird.min';
export const wxPromise = function(fn) {
return function (obj = {}) {
return new Promise((resolve, reject) => {
obj.success = function(res) {
resolve(res);
}
obj.fail = function(err) {
reject(err);
}
fn(obj)
})
}
}

16. 微信小程序不支持加载本地ttf字体文件

https://transfonter.org/

通过将ttf文件转成base64

17. wx:if hidden 切换自定义组件的坑

含有自定义组件的三个(及其以上?)组件,按照特定顺序(自定义组件位于首位?)排列,并使用 wx:if wx:elif wx:else 条件动态切换组件的渲染,会报错:Error: Expect START descriptor with depth 2 but get another

解决的办法也很简单,把wx:elif或者wx:else或者hidden全部改成wx:if就可以了。

18. 小程序骨架屏实践

具体操作请看 https://github.com/jayZOU/skeleton

19. eslint校验

eslint配置参考AlloyTeam出品

安装:

1
npm install --save-dev eslint babel-eslint eslint-config-alloy

在你的项目根目录下创建 .eslintrc.js,并将以下内容复制到文件中:

1
2
3
4
5
6
7
8
9
10
11
12
{
"extends": ["eslint-config-alloy"],
// 注意这是全局变量,
// 当访问当前源文件内未定义的变量时,no-undef 规则将发出警告
// 所以需要定义这些额外的全局变量
"globals": {
"App": false
},
"rules": {
"indent": ["error", 2]
}
}

创建.eslintignore

1
2
3
build/*.js
config/*.js
src/assets

在 VSCode 中使用: 安装eslint插件,在「文件 => 首选项 => 设置」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
]
}

85-缓存

发表于 2019-02-23 | 分类于 前端-02-js基础复习

前端早读课
一文读懂前端缓存

缓存小结

当浏览器要请求资源时

  1. 调用 Service Worker 的 fetch 事件响应
  2. 查看 memory cache
  3. 查看 disk cache。这里又细分:

    • 如果有强制缓存且未失效,则使用强制缓存,不请求服务器。这时的状态码全部是 200
    • 如果有强制缓存但已失效,使用对比缓存,比较后确定 304 还是 200
  4. 发送网络请求,等待网络响应

  5. 把响应内容存入 disk cache (如果 HTTP 头信息配置可以存的话)

  6. 把响应内容 的引用 存入 memory cache (无视 HTTP 头信息的配置)
  7. 把响应内容存入 Service Worker 的 Cache Storage (如果 Service Worker 的脚本调用了 cache.put())

84-js中的6中异步编程方式

发表于 2019-02-23 | 分类于 前端-02-js基础复习

掘金

1.回调函数

含 setTimeout,setInterval

2.事件监听

1
f1.on('done', f2);

3.发布/订阅

4.Promises对象

5.Generator 函数

6.async与await

83-ts中!的意思

发表于 2019-02-23 | 分类于 前端-02-js基础复习

!是和?相对的,是typescript的语法,表示强制解析(也就是告诉typescript编译器,我这里一定有值)。你写?的时候再调用,typescript会提示可能为undefined

24-vue-class-component

发表于 2019-02-23 | 分类于 前端-08-vue

vue-class-component

vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利:

  1. methods,钩子都可以直接写作class的方法
  2. computed属性可以直接通过get来获得
  3. 初始化data可以声明为class的属性
  4. 其他的都可以放到Component装饰器里

vue-property-decorator

23-vuecli3中的publicPath

发表于 2019-02-23 | 分类于 前端-08-vue

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./'),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径,也可以用在类似 Cordova hybrid 应用的文件系统中。

相对 publicPath 的限制

相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath:

  • 当使用基于 HTML5 history.pushState 的路由时;
  • 当使用 pages 选项构建多页面应用时。
1…567…33
静修

静修

322 日志
19 分类
19 标签
© 2019 静修
本站访客数:
由 Hexo 强力驱动
主题 - NexT.Pisces