弄小程序第一步
1.先申请https
在博客上有
2.登陆自己的微信公共平台,点击小程序,然后照流程申请一个个人小程序
3.下载一个微信开发者工具,打开微信开发者工具,点击小程序.(地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714)
4.要输入项目目录:自己找个文件夹就行.AppID:网页登陆微信小程序,左边点设置,头部点开发设置就能看到AppID.项目名称可改可不改,(勾不用去掉)点击确认微信就会帮我们创建好模板
5.讲解一下框架结构,一个微信页面由.wxml和.wxss和.js的3个文件组成
1.app.js是小程序的主逻辑文件,主要用来注册小程序
2.app.json是小程序的主配置文件,对小程序进行全局配置,小程序启动时先找app.json
3.app.wxss是小程序的主样式,这个页面设置后其他页面可共享
4.pages文件夹里放的是页面,一个文件夹代表一个页面,一个文件夹都有4个文件
5.utils文件夹是放公共代码的地方
6.放音频视频等目录可以在主目录下自己创建(但是一般放在服务器)
6.项目内搜索: shift + ctrl + F
7.讲解app.json主配置文件,小程序启动时先找app.json(图一,图二,图三,图四)
{
"pages":[
"pages/index/index", //小程序一进来会先到第一行的页面
"pages/logs/logs",
//每新增页面都要在这里定义,直接在这里加上后会自动建4个页面
],
"window":{
"navigationBarBackgroundColor": "#31c27c", //导航条北京颜色(常用)
"navigationBarTitleText": "QQ", //导航条文字(常用)
"navigationBarTextStyle":"white" //导航条文字样式
"enablePullDownRefresh":true, //是否开启下拉刷新
"backgroundColr":'#000', //下拉窗口的背景色
"backgroundTextStyle":"dark", //背景文字颜色
"onReachBottomDistance":"50", //页面上拉触底事件触发时距页面底部距离,单位为px
},
"tabBar": {
"color":"#000", //tab上的文字默认颜色
"selectedColor":"#E22018", //tab上的文字选中时的颜色
"backgroundColor":"#1195EE", //tab的背景色
"position":"top", //图片不会显示
"list": [
{"pagePath":"pages/index/index"}, //必跳转页面路径,需在pages中先定义
{"text":"文字"}, //必,tab上按钮文字
{"iconPath":"路径"}, //图片路径,建议为81px*81px,positon为top时无效
{"selectedIconPath":"路径"} //选中时的图片路径,建议为81px*81px,positon为top时无效
]
},
"networkTimeout":{
//在微信小程序中有多种网络连接API,例如request连接,socket网络连接,上传文件,下载文件等网络操作的API.在主配置文件app.json中可通过参数networkTimeout设置各种网络请求的超时时间.
},
"debug":false,
}
8.说单页里的配置文件pages/index/index.json
1.页面配置文件中只能设置app.join中的window配置项,配置后悔覆盖app.json中的window,配置时,无需写window这个键,只需外面写花括号
2.写法
{
"backgroundColr":'#000',
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#31c27c",
}
9.说app.js主逻辑文件
1.最外层要用App{}函数注册
2.可定义3个生命周期函数
1.onLaunch:当小程序初始化完成时会触发,全局只触发一次.
2.onShow:当小程序启动,或从后台进入前台显示会触发.
3.onHide:当小程序从前台进入后台会触发.(从看不到到看到小程序表示进入前台,后台指点击左上角X,或者点击home)
10.说单页里的index.js文件
1.最外层要用Page()函数注册
2.也可定义页面的生命周期函数
3.写法:(大部分和vue一样)
Page({
data:{
motto: 'hello world',
}
//直接诶时候
bindViewTap: function(){
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function(){
}
})
11.说单页里的index.wxml文件
1.block相当于大div,只接受控制属性wx:if,wx:for等,为true也不会在页面中渲染
1.view标签相当于div
2.text标签相当于p
3.隐藏标签方法一不用v-if,用hidden:为false显示,为true隐藏,隐藏仍有渲染
例子:<view hidden="{{变量?true:false}}"></view>
4.隐藏标签方法二不用v-if,用wx:if:正常,隐藏不渲染
例子:
<view wx:if="{{变量}}"></view>
<view wx:elif="{{num>12}}"></view>
<view wx:elif="{{num<12}}"></view>
<view wx:else></view>
5.列表写法:不用v-for,用wx:for
例子:
<view wx:for="{{test}}" wx:for-index="i" wx:for-item="v">
{{index}}:{{item.message}} //item相当于v
{{i}}:{{v.message}} //用了wx:for-index="i" wx:for-item="v"自定义后就能这样用
</view>
6.列表嵌套写法:不用v-for,用wx:for和wx:for-item来区别
例子:
<view wx:for="{{test}}" wx:for-index="i" wx:for-item="v">
<view wx:for="{{test}}" wx:for-index="ii" wx:for-item="vv">
</view>
</view>
7.组件的调用:
例子:
//在index.wxml中定义模板
<template name="root">
<view>
{{item:name}}----{{item:age}}
</view>
<template>
//在loags.wxml文件中调用
<import src="../index/index.wxml"/> //import导入template里面的代码,不包括index.wxml的import
<include src="../index/index.wxml"> //include导入template以外的代码,包括index.wxml的import
<view wx:for="user">
<template is='root' data="{{item}}"></template> //也可以写在最外层
</view>
12.app.wxss是全局样式,在所有页面都有效,单页有写会覆盖app.wxss
13.说单页里的index.wxss文件
1.px,cm,rem,rpx这些单位都能使用
2.用rpx比较多,页面总宽度为750rpx
3.用rem的话页面中宽度为20rem
4.样式导入
在test.wxss中导入index.wxss
@import "../index/index.wxss"
14.说页面里的事件
1.在微信小程序中,事件分为两类:
冒泡事件和非冒泡事件
2.冒泡事件有:
touchstart: //手指触摸
touchend: //手指触摸动作结束
touchemove: //手指触摸够移动
touchcancel: //手指触摸动作被打断,如来电
tap: //手指触摸后离开
longtap: //手指触摸超过350ms再离开
//还有很多,要在官方文档查
例子:
//index.wxml
<view bingtouchstart="test">点击</view>
//index.js
Page({
data:{
name:"张三"
},
test: function(){
console.log("1")
this.setData({
name:"hhh"
})
}
})
3.阻止冒泡
1.bind开头的事件不会阻止冒泡
2.catch开头的事件阻止冒泡
4.非冒泡的常用事件:
<input bininput="test"></input>
bininput:输入框一改动就执行
<button bintab="test"></button>
bintab:一点击就执行
5.修改数据
//在事件中用this.setData
test: function(){
console.log("1")
this.setData({
name:"hhh"
})
}
6.事件对象e
test: function(e){
console.log(e)
}
//e里面的touches里的pageX是相对于页面左上角的x坐标
//e里面的touches里的pageY是相对于页面左上角的y坐标
//e里面的touches里的clientX是相对于显示区域左上角的x坐标
//e里面的touches里的clientY是相对于显示区域左上角的y坐标
//e里面的target里的id是操作的div的id(没定义则为空)
//http://www.51zxw.net/show.aspx?id=66603&cid=657还有讲wxml中自定义属性
15.讲view等等的标签:(2-1)
1.组件里可放内容,可放组件
2.组件的通用属性:
1.id
2.class
3.hidden boolean //显示隐藏
4.data- 任何类型 //用于作为参数发给事件
5.bind/catch //用于绑定事件
16.讲了display:flex;(2-2)
17.讲button
<button size="mini">按钮1</button> mini/default //按钮的大小
<button type="warn">按钮2</button> default灰/primary绿/warn红 //按钮颜色
<button plain="fasle">按钮3</button> //是否缕空,有值为true
<button disabled="fasle">按钮4</button> //是否禁用,有值为true
<button loading="fasle">按钮5</button> //是否有loading图标,有值为true
<button hover-class="btn">按钮6</button> //默认值:buttin-hover,按钮按下时的样式类
18.讲input
<input value="text"></input> //value显示默认值
<input type="number"></input> //数字输入键盘
<input type="idcard"></input> //身份证输入键盘
<input type="digit"></input> //带小数点输入键盘
<input password="tr"></input> //密码输入时是**
<input placeholder="tr" placeholder-style="color:red
" placeholder-class="aaa"></input> //默认提示,还可改样式,可定义一个类
<input disabled="tr"></input> //是否禁用
<input maxlength="140"></input> //最大长度,-1是不限制
<input focus="{{flag}}"></input> //是否获得焦点
<input confirm-type="send"></input> //键盘右下角是发送
<input confirm-type="go"></input> //键盘右下角是前往
<input confirm-type="next"></input> //键盘右下角是下一步
<input confirm-type="search"></input> //键盘右下角是搜索
<input value="test" bindinput="test"></input> //点击时执行test,可获取输入框中的值
test: function(e){
console.log(e.detial.value)
return "点击就改成我"
}
<input value="test" bindfocus="test"></input> //获得焦点时执行test,可用e.detail.value获取值
<input value="test" bindblur="test"></input> //失去焦点时执行test,可用e.detail.value获取值
<input value="test" bindconfirm="test"></input> //点击右下角完成按钮时执行test,可用e.detail.value获取值
19.2-6
if(isNaN(a)){
//isNaN:判断是不是数字
}
20.讲text组件
<text selectable="true">反馈</text> //selectable:文本是否可选,1.1.0版本以上
<text space="nbsp">反馈</text> //selectable:显示名称中连续空格,1.4.0版本以上,nbsp根据字体设置空格大小,emsp中文字符空格大小
<text decode="true">$amp;反馈</text> //selectable:是否解码,1.4.0版本以上
21.讲slider滑块组件
<slider min="40" max="200" step="10" activeColor="#000" disabled show-value></dlider>
//min:最少值
//max:最大值
//step:步长
//show-value:显示当前值
//activeColor:已选择的颜色
//backgroundColor:背景条的颜色
//bindchange:拖动完一次触发的事件
//bindchanging:拖动中触发的事件
22.讲icon图标组件
<icon type="success" size="20"></icon>
type类型有:success,success_no_circle,info,warn,waiting,cancel,download,search,clear
使用阿里图标
1.把阿里的css文件改成wxss,拉到项目新建文件夹base中
2.在要用的页面wxss文件中用import引入
3.<icon class="iconfont icon-index"></icon>
23.讲switch组件
<switch checked></switch> //默认是否选中
<switch type="switch"></switch> //左右滑动,checkbox是打勾
<switch color="#000"></switch> //选中时的颜色
<switch bindchange="test"></switch> //改变时触发
test: function(e){
console.log(e.detail.value) //选中为true,否则为false
}
24.讲radio单选组件
<radio-group bingchange="radio">
<radio value="男" checked>男</radio>
<radio value="女" disabled="h">女</radio>
</radio-group>
radio: function(e){
console.log(e.detail.value)
}
//value:选中后对应的值
//checked:当前是否选中
//disabled:是否禁用,默认为false,有值就为true,也可绑定数据,值为true/false
//color:选中时的颜色
25.讲checkbox多选组件
<checkbox-group bindchange="box">
<checkbox value="篮球">篮球<checkbox>
<checkbox value="羽毛球">羽毛球<checkbox>
<checkbox value="气球">气球<checkbox>
</checkbox>
</checkbox-group>
radio: function(e){
console.log(e.detail.value) //是数组
}
//value:选中后对应的值
//checked:当前是否选中
//disabled:是否禁用,默认为false,有值就为true,也可绑定数据,值为true/false
//color:选中时的颜色
26.讲label组件
(用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件,目前可绑定的控件有:<button/>,</checkbox/>,<radio/>,<switch/>)
<label for="i">点击</label> //点击这个标签时可以给对应的id执行东西
<radio id="i"></radio>
27.讲textarea多行输入框组件
<textarea focus={{flag}} diabled="t" placeholder="123" placeholder-style="color:red;" value="222"/>
//focus:???
//auto-height:内容有多高就多高
//diabled:禁用,随便写一个就为true
//bindfocus:输入框焦时触发,event.detail获取值
//bindblur:失去焦点时触发
//bindconfirm:点击完成时触发,event.detail获取值
28.讲form组件
微信小程序的表单和HTML的表单标签时一样的,微信的form组件具有多一些性质,可以将用户输入在<switch/><input/><checkbox/><slider/><radio/><picker/>内的内容提交
<form bindsubmit="submit">
<input value="123456" name="input"></input>
<radio-group name="radio">
<radio value="男">男</radio>
<radio value="女">女</radio>
</radio>
<checkbox-group name="checkbox">
<checkbox value="羽毛球">羽毛球</checkbox>
<checkbox value="排球">排球</checkbox>
</checkbox-group>
<slider value="20" name="slider" show-value="true"></slider>
<switch checked="true"></switch>
<button form-type="reset">重置</button>
<button form-type="submit" type="primary">提交</button>
//提交时要在form上面写一个bindsubmit事件
</form>
Page({
data:{
},
submit:function(e){
conosle.log(e)
//值在detail.value里面
}
})
29.picker下面弹出列表选择组件
//从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器.
1.普通选择器:mode = selector
<picker range="{{test}}" range-key="name" value="{{value}}" bindchange="loop">
当前选择是: {{test[value].name}}
</picker>
test:[
{
name:"黄家家",
age:16,
},
{
name:"小明",
age:18,
}
]
loop:function(e){
console.log(e.detail.value)
this.setData({
value: e.detail.value
}),
}
//range:显示的内容(数组,对象数组)
//range-key:range是对象数组时,用range-key来指定显示内容
//value:选择了range中的第几个,下标从0开始
//disabled:是否禁用
事件:
//bindchange:改变就触发
2.时间选择器
<picker mode="time" start="12:30" end="13:30" value="12:30" bindchange="loop">
时间为:
</picker>
//value:选中的时间
//start:时间范围的开始
//end:时间范围的结束
//disable:是否禁用
事件:
//bindchange:value改变时触发,e.detail.value获取
3.日期选择器
<picker mode="date" start="1970-01-01" end="2018-01-01" fields="year" value="1971-12-12" bindchange="loop">
日期为:
</picker>
//fields:有效值year,month,day,填year就只能选择年,不写是年月日
//属性与事件和上面一样
30.讲picker-view组件(把上面弹出的省市区直接放到页面上)
//嵌入页面的滚动选择器.其中只可放置<picker-view-column/>组件,其他节点不会显示.
<picker-view value="{{[1,1]}}">
<picker-view-column>
<view wx:for="{{test}}">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{test}}">{{item}}</view>
</picker-view-column>
</picker-view>
//value:选中的值,有多少个picker-view-column数组里就有多少个
//indicator-class:给中间选中的那一行定义样式类
//mask-class:设置蒙层的类名(设置整个框框的样式)
事件:
//bindchange:value改变时触发,e.detail.value获取,表示picker-view-column当前选的是第几项(下标从0开始)
在4-9有讲省市区的写法
31.讲navigator跳转组件
方式一:(html跳转)
<navigator url="../picker/picker" open-type="redirect">点击</navigator>
//url:应用内的跳转链接(页面不用写wx.ml)
//open-type:跳转方式,有效值有5种:
1.navigate:对应wx.navigateTo的功能(左上角有返回按钮)
2.redirect:对应wx.redirectTo的功能(左上角没返回按钮,按手机返回会退出)
3.switchTab:对应wx.switchTab的功能(跳转到tabBar页面,并关闭其他所有非tabBar页面)
4.reLaunch:对应wx.reLaunch的功能(关闭所有页面,跳转到一个页面)
5.navigateBack:对应wx.navigateBack的功能(关闭当前页面,返回上一页)
方式二:(事件跳转)
html:
<button bundtap="test"></button>
js:
data:{
},
test: function(){
wx.navigateTo({
url: '../picker/picker?id=789',
})
}
//在picker页面如何获取这个id
onLoad:function(e){
console.log(e)
console.log(e.id)
}
32.讲swiper轮播图组件
//<swiper>里面只可放<swiper-item>,否则会导致未定义的行为
<swiper indicator-dots="true">
<block wx:for="{{img}}">
<swiper-item>
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
//indicator-dots:是否显示指示点
//indicator-color:指示点颜色
//indicator-active-color:选中指示点颜色
//autoplay:是否自动切换
//interval:自动切换的间隔(默认5000)
//duration:滑动动画时长(默认500)
//current:当前所在图片的index
事件:
//bindchange:current改变时触发,e.detail.value获取,e.detail.source是滑动原因:autoplay是自动滑动,touch是用户滑动
//bindanimationfinish:动画结束时触发
33.讲wx.showLoading和wx.showToast灰色提示框
//wx.showLoading(正在加载的灰色提示).显示loading提示框,需主动调用wx.hideLoading才能关闭提示框
//wx.showToast(有勾的灰色提示)
<button bingtab="test"></button>
test: function(){
wx.showLoading({ //正在加载的灰色框
title:'正在加载'
});
setTimeout(function(){
wx.hideLoading()
},3000)
wx.showToast({ //有勾的灰色提示,也有wx.hideToast()
title:"有勾"
icon:"success" //不是必须,模式是勾,有效值"success","loading","none"
image:"" //不是必须,自定义图标的本地路径,image优先级高于icon
duration:"1500" //不是必须,提示的持续时间(默认1500)
});
}
34.讲wx.showModal确认取消框
<button bingtab="test"></button>
test: function(){
wx.showModal({
title:'提示',
content:'你喜欢我吗?',
showCancel:false, //不是必填,是否显示取消按钮,默认true
cancelText:"我是取消", //不是必填,取消按钮的文字,最多4个字符
cancelColor:"#ccc", //不是必填,取消按钮的颜色
confirmText:"我是确认", //不是必填,确认按钮的文字,最多4个字符
confirmColor:"#333", //不是必填,确定按钮的颜色
success: (e)=> { //接口调用成功的回调
console.log(e) //e.cconfirm为true是用户点击了确认
if(e.cancel){ //e.cancel为true是用户点击了取消,点击蒙层关闭为false
}
},
fall:(e)=> {}, //接口调用失败的回调
complete:(e)=> {}, //接口调用结束的回调(成功,失败都会执行)
});
}
35.讲wx.showActionSheet底部弹出框(一行一行那种)
<button bingtab="test"></button>
test: function(){
wx.showActionSheet({
itemList: ["分享到QQ","分享到朋友圈"], //最多6个
itemColor: "#ccc", //按钮的文字颜色
success: (e)=> {
console.log(e.tapIndex) //e.tapIndex是选中的值
if(e.tapIndex == 0){
}else if(e.tapIndex == 1){
}
},
fall:(e)=> {},
complete:(e)=> {},
});
}
36.讲audio音频组件(audio组件没办法用wxss控制宽高的,可控制margin-left等)
<audio src="{{src}}" loop="{{loops}}" name="name"></audio>
data: {
src: "../../music/4.mp3", //音频地址
poster: "../../img/person.jpg", //封面图片
loop: true, //是否循环播放
name: "名字哦", //音频名称
author: "作者", //作者名称
controls: true, //是否显示默认控件
}
事件:
//binderror:发生错误时触发,e.detail.errMsg获取
1表示获取资源被用户禁止
2表示网络错误
3表示解码错误
4表示不合适资源
//bindplay:当开始/继续播放时触发
//bindpause:当暂停时触发
//bindtimeupdate:当播放进度改变时触发
//bindended:当播放到末尾时触发
如果觉得audio音频组件不好用,可用下面两个接口函数,在小程序开发的API里有讲解
//wx.createlnnerAudioContext
//wx.createAudioContext在1.6.0版本开始不再维护,建议用上面这个
//微信API里有个背景音频播放管理,可以伴随微信的开启一直播放
1.全局写法
<button bingtap="play">播放</button>
<button bingtap="pause">停止</button>
js:
var create = wx.createInnerAudioContext(); //在Page外全局创建
create.src=""; //路径,可用wx文档里面的
create.autoplay=true; //自动播放
//这种必须用手机扫码才能听到
Page({
data:{
},
paly: function(){
create.play();
},
pause: function(){
create.pause();
},
})
//create.stop:停止
//create.onPlay:音频播放事件
//create.onPause:音频暂停事件
//create.onStop:音频停止事件
2.非全局写法
<button bingtap="test">播放</button>
<button bingtap="pause">播放</button>
data:{
},
test: function(){
wx.playBackgroudAudio({ //播放音频
dataUrl:'***' //按微信API里面的来
})
}
pause: function(){
wx.pauseBackgroundAudio(); //暂停播放
}
37.讲video视频组件(可用wxss控制宽高)
<video src="{{src}}" danmu-list="{{list}}" poster="{{poster}}"></video>
data:{
list:[
{
text:"呵呵", //弹幕文字
color: "#000", //弹幕颜色
time:2 //2秒后出现
},
]
}
//src:视频地址
//controls:是否显示控件
//autoplay:是否自动播放
//loop:是否循环播放
//poster:封面图片地址
//danmu-btn:是否显示弹幕按钮,只在初始化有效,不能动态改
//enable-danmu:是否暂时弹幕,只在初始化有效,不能动态改
//danmu-list:弹幕列表
//show-fullscreen-btn:是否显示全屏按钮
//还有很多,要查API
事件:
//bindplay:当开始/继续时触发
//还有很多,要查API
接口函数:
//wx.createVideoContext
<video id="my" src="{{src}}"></video> //加个id然后接口函数通过id控制
<input bindblur="blur" placeholder="请输入弹幕"></input>
<button bindtap="send">发送</button>
<button bindtap="play">播放</button>
data:{
},
onLoad: function(options){
this.create = wx.createVideoContext("my");
},
blur: function(e){ //输入框失去焦点的时候获取一下内容
this.value = e.detail.value
},
send: function(){
this.create.sendDanmu({
text:this.value,
color: "#333" //可写一个随机的方法
})
},
play: function(){
this.create.play(); //播放方法
}
38.讲image图片组件
<image src="{{src}}"></image>
//src:路径
事件:
//bindload:图片加载完执行,e.detail.height可获得高
//mode:图片缩放,有效值:scaleToFill,aspectFit,aspectFill等等,常用前面3个
39.讲canvas画布组件
第一步:通过wx.createCanvasContext创建canvas绘图上下文,参数为canvas的id
第二步:绘图操作
第三步:把绘好的图画在我们的canvas组件上
<canvas canvas=id="my"></canvas>
data:{
},
onLoad: function(){
let c = wx.createCanvasContext("my");
c.fillRect(20,20,150,150); //画一个矩形,左上x坐标,左上y坐标,宽,高
c.draw(); //把绘好的图画在我们的canvas组件上
//这些方法要去查API
}
//bindtouchstart:手指触摸动作开始
//bindtouchmove:手指触摸后移动
//bindtouchend:手指触摸动作结束
//还有很多去查API
40.讲保存数据的接口
同步是一路,异步不用等待
//setStorageSync:同步保存数据
//getStorageSync:同步获取数据
<view>
<input bindblur="blur" placeholder="请输入要保存的内容"></input>
<view bindtap="history" class="text">查看历史</view>
<button bindtap="test" type="primary">保存</button>
</view>
data: {
},
blur: function(e){
this.value = e.detail.value
},
test: function(){ //保存一下输入的值
wx.setStorageSync("save", this.value) //同步保存数据,save是名字,随便取的
},
history: function(){
wx.navigateTo({ //跳一页,然后在另一页显示历史内容
url: "../index/index",
})
}
在另一个页面中:
onLoad: function(options){
this.setData({
data: wx.getStorageSync("save"), //同步获取数据
})
}
41.讲网络请求
//要到小程序主页的设置->开发设置->服务器域名->request合法域名
//输入好后可到微信开发工具的右上角详情里的域名信息查看,request合法域名填哪里,就只能请求哪里
<button bindtap="test" type="primary">保存</button>
test: function(){
wx.request({
url: "https://baidu.con"
})
}
42.讲调用接口
43.引入外部js
在自己创建的utils->config.js文件里
44.封装接口网址和必传参数
23.ES6基础一:在看3-2
1.变量的变化:新增let,作用域在块级,就是在{}中有效
2.赋值的变化:
3.模板对象:用`代替''和"",他里面的空格,换行都原样输入
4.箭头函数:success: function(){
var num = [1,2,3];
num.forEach(function(v) {}
}
换成:success: ()=> {
//可换成success: res => {},参数只有一个
var num = [1,2,3];
num.forEach((v)=> {}
//num.forEach(v=> {}只有一个参数时还可以把括号省略
}
//function绑定作用域
//=>不绑定作用域
箭头函数不知道传多少个参可用...
test: () => {
function root(...num){
let sum = 0;
for(let n of num){ //for of 是ES6的
sum += n;
}
console.log(sum);
}
root();
root(8);
root(10,11);
}
箭头函数不绑定作用域,意思是箭头函数里可用外面的this
5.对象名可用字符串拼接
test: function(){
var tool = {
['str'+'name'+'you','OK']
}
console.log(tool)
}
6.解构赋值:ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
1)数组的解构赋值:
test: function(){
var num = [1,2,3];
var [a,b,c]=num;
console.log(a,b,c) //输出1,2,3
}
2)对象的解构赋值:
test: function(){
var tool = {
name: "loop"
age: 12,
sex: "男"
}
var {name,sex} = tool;
console.log(name,sex); //输出loop,男
}
3)字符串的解构赋值,字符串被转换成了一个类似数组的对象:
test: function(){
var [a,b,c,d] = "java";
console.log(a,b,c,d) //输出j,a,v,a
}
4)函数参数的解构赋值:
test: function(){
function tt([x,y]){
console.log(x,y) //输出1,2
}
tt([1,2])
}
7.Class是ES6引入的最重要特性之一.在没有Class之前,我们只能通过原型链来模拟类.
test: function(){
var Root = function(){
};
Root.prototype.eat = function(){
console.log("es5 Eat");
}
Root.doing = function(){
console.log("es5 Doing");
}
let a = new Root();
a.eat();
Root.doing();
///上面的是ES5的写法
///下面的是ES6的写法
class Roots{
constructor(){
}
eat(){
console.log("ES6 eat");
}
static doing(){
consile.log("ES6 doing");
}
}
let b = new Roots();
b.eat();
Roots.doing();
}
在4-9有讲省市区的写法
