方案一(作用于对象中的深层级和第一层级):
1 | this.setState({ |
方案二(作用对象中的第一层级):
1 | let data = Object.assign({}, this.state.list, {objD: 'D1'}) |
方案三(作用于对象中的深层级和第一层级):
1 | let data = this.state.list; |
1 | this.setState({ |
1 | let data = Object.assign({}, this.state.list, {objD: 'D1'}) |
1 | let data = this.state.list; |
1 | git --version |
1 | yum install git |
1 | git --version |
卸载git
1 | yum remove git |
1 | git config --global user.name "jingxiu" |
查看是否有密钥文件:
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/目录下已经生成好了。
下面的代码 演示了如何全局引用jquery
,以及使用dllPlugin
将其单独打包出来
webpack_dll.config.js
1 | const path = require('path') |
vue.config.js
1 | const path = require('path') |
.eslintrc.js
注意加上全局变量,globals
不能加双引号,语法较为严格
1 | globals:{ |
此方法更为简单,
npm i jquery -S
,引入jquery新建vue.config.js
1 | module.exports = { |
在public/index.html
中引入cdn资源
1 | <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> |
注意.eslintrc
文件添加 jquery
为全局变量
1 | globals:{ |
webpack 2
正式版本内置支持 ES2015 模块(也叫做 harmony 模块)和未引用模块检测能力。新的 webpack 4
正式版本,扩展了这个检测能力,通过 package.json
的 "sideEffects"
属性作为标记,向 compiler 提供提示,表明项目中的哪些文件是 "pure(纯的 ES2015 模块)"
,由此可以安全地删除文件中未使用的部分。
为了学会使用 tree shaking,你必须……
比如我要给一个cover-view设置底部边框,我会在下面再添加一个cover-view,给第二个cover-view设置宽度百分之百,高度为1个像素,说白了就是模拟边框
tip: 基础库 1.9.90 起 cover-view 支持 overflow-y: scroll
,但不支持动态更新 overflow
暂不支持
overflow-x: scroll
使用 hidden 代替 wx:if
自定义组件嵌套 cover-view 时,自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐,否则会导致 cover-view 不显示
1 | <button bindtap='toFixInfoPage' data-NO='{{NO}}>Click Me</button> |
1 | console.log(event.currentTarget.dataset.no); |
在绑定事件处理函数的时候,也就是在wxml页面中,data-设置变量的时候是不分大小写的,但是在js里event的dataset就全部转换成了小写,我们在JS页面也只能用小写才能用它!!!
> 传过来的值都是字符串,需注意!!
这个不算小程序的坑,一个注意点,加上[]
中括号:
1 | const arr=['showProvince','showCity','showArea']; |
另外一个例子:
1 | var index=event.currentTarget.dataset.index; |
函数防抖这里引用underscore
的debounce
this
绑定不需要更改
例子:
1 | getCode:debounce(function(event){ |
由于小程序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]]
}
}
}
}
注意: 小程序于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 | /** |
注意:data数据的获取用
this.data.xx
获取
引入 promise-finally.js
,放在libs
目录下
1 | import '../../libs/promise-finally' |
1 | Promise.prototype.finally = function (callback) { |
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 | .image-section{ |
1 | <view class="dots__item image-section"> |
scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex;是没有作用的;
scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排;
包裹 scroll-view 的大盒子有明确的宽和加上样式–>overflow:hidden;white-space:nowrap;
这里引用了部分有赞的小程序组件库 vant-weapp
设置cursor-spacing
, 文档属性说明:
指定光标与键盘的距离,单位px或rpx,默认为px。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
input和textarea都有一个共同的问题,用户使用手写输入法时,bindinput无法获取到用户输入的内容。
再添加一个bindblur事件,可以获取到手写输入法的内容。
1 | <textarea |
当键盘输入时,触发 input 事件,event.detail = {value, cursor},bindinput 处理函数的返回值并不会反映到 textarea 上
在actionsheet隐藏时刻,通过动态修改 textarea class 解决1
{{showActionSheet?'':'hide'}}
1 | .hide{ |
1 | <textarea |
使用wxparse报错template12 not found
请看 github issue
1 | //对img添加额外数据 |
就是把 console.dir 注释掉,或者用 console.log 代替就好了啊。。这就是一个 log 日志,在功能上没啥用
1 | //util.js |
通过将ttf文件转成base64
含有自定义组件的三个(及其以上?)组件,按照特定顺序(自定义组件位于首位?)排列,并使用 wx:if wx:elif wx:else 条件动态切换组件的渲染,会报错:Error: Expect START descriptor with depth 2 but get another
解决的办法也很简单,把wx:elif或者wx:else或者hidden全部改成wx:if就可以了。
具体操作请看 https://github.com/jayZOU/skeleton
eslint
配置参考AlloyTeam出品
安装:
1 | npm install --save-dev eslint babel-eslint eslint-config-alloy |
在你的项目根目录下创建 .eslintrc.js
,并将以下内容复制到文件中:
1 | { |
创建.eslintignore
1 | build/*.js |
在 VSCode
中使用: 安装eslint
插件,在「文件 => 首选项 => 设置」
1 | { |
当浏览器要请求资源时
查看 disk cache。这里又细分:
发送网络请求,等待网络响应
把响应内容存入 disk cache (如果 HTTP 头信息配置可以存的话)
!是和?相对的,是typescript的语法,表示强制解析(也就是告诉typescript编译器,我这里一定有值)。你写?的时候再调用,typescript会提示可能为undefined