week03-组件深入学习

最新推荐文章于 2020-04-06 13:26:21 发布

原创最新推荐文章于 2020-04-06 13:26:21 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

组件

数据来源：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
      }
    })
  }