组件
- 数据来源:WXML,JS,服务器
- 三元表达式:
data: {
like:false,
count1:5,
count2:9
} //index.js
{{like?count1:count2}} //index.wxml
- 组件的封装性和开放性
封装难度:(1)分清封装在内部和开放出来的
(2)粒度
(3)非常简单和复杂的功能 - 组件的properties属性
like:{
type: Number,//类型string、Boolean......
value:false, //默认值
observer:function(){
}
}
- let 和 var定义变量
let定义的变量局限在块形的作用域
var 作用于整个函数
onLike:function(event){
let like=this.properties.like
if(true){
let a=1
var b=2
}
console.log(b) //2
console.log(a) //无法访问到
}
- 鼠标点击切换状态
methods: {
onLike:function(event){
let like=this.properties.like
let count=this.properties.count
count = like?count-1:count+1
this.setData({
count:count,
like:!like
})
}
}
<view class='container' bind:tap="onLike"> //wxml
API
1.生命周期函数:onLoad,onShow,onHide,onReady…
2.onLoad:
url//接口地址
data//请求参数
header
method:GET,PUT,POST…
回调函数:success/fail
3. HTTP状态码
4. 访问API获取数据
onLoad: function (options) {
wx.request({
url: '',
header:{
appkey:''
}
})
}
5.js获取值
同步:let data=wx.request({…})(小程序为异步)
异步:性能好
4. this的使用
this 指向不同,结果不同
onLoad: function (options) {
console.log(this.data.test) //1
// let that=this 解决方法 1
wx.request({
url: '',
header:{
appkey:""
},
success:function(res){
console.log(this.data.test) //报错
// console.log(that.data.test) 1
}
})
}
ES解决
onLoad: function (options) {
console.log(this.data.test) //1
wx.request({
url: '',
header:{
appkey:""
},
success:(res)=>{
console.log(this.data.test) //1
}
})
}