2020928王杉

学习内容:

微信小程序开发:

  • 数据绑定使用{{}}在里面绑定一个名字实际值是在data中

  • 初始化数据data:[]

  • *生命周期: onLoad onReady onShow onHide onUnload

  • 元素绑定事件:支持冒泡:bindtap

    不支持冒泡:catchtap

  • 数据控制和显示:循环:wx:for="{{}}" wx:key="{{}}" 排序条件

    条件判断: if和if else(wx:if={{}} wx:elif={{}} wx:else={{}})

    隐藏: hidden="{{ture/false}}"

  • 页面跳转:

    1. wx.navigateTo({}) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回

      wx.navigateTo({
      url:'../test/test?id=1&page=4',  //跳转页面的路径,可带参数 ?隔开,不同参数用 & 分隔;相对路径,不需要.wxml后缀
      success:function(){} //成功后的回调;
      fail:function(){} //失败后的回调;
      complete:function(){} //结束后的回调(成功,失败都会执行)
      }
    2. wx.redirectTo() 关闭当前页面,跳转到非tabBar的某个页面

      wx.redirectTo({
      url:'/pages/exam04/exam04?id='+this.data.id
      })
    3. 使用组件 :open-type改变跳转方式:

    4. wx.switchTab 跳转到tabBar的某个页面,不能跳转到tabBar之外的页面组件

      wx.switchTab({
         url: '../taste/index'
      })
    5. wx.reLanch 关闭所有页面,打开到应用内的某个页面

      wx.reLanch({
      url: 'page/home/home?user_id=111'
      })
  • 弹窗提示信息:

    1.模态窗口

      wx.showModal({
        title:"确认信息",
    content:"我们去爬山",
    success:function(res) {
    if(res.confirm){
    console.log('弹框后点确定')
    }else{
    console.log('弹框后点取消')
    }
    },
    })

    2.提示信息不带按钮(运用:注册):

    wx.showToast({
       title:'成功',
    icon:'success',
    duration:2000
    })

    3.隐藏消息提示框:

    wx.showToast({
       title: '加载中',
    icon:'loading',
    duration:10000
    })
    setTimeout(function(){
    wx.hideToast()
    },2000)
  • 修改数据:

    1.获取data中的数据:this.data.“属性名” this.data.msg

    2.修改data中的数据:

    this.setData({
    属性名:"属性值"
    })

    this.setData({
    msg:"新值"
    })

    *使用that需要提前声明 :var that=this;

学习心得:

今天开始了对微信小程序的学习,学习了小程序的js,以及一些事件的用法,还有接口的引用,获取数据显示,再就是小程序的tabBar创建跳转的页面,学习的东西还是挺多的相较于有之前网页的知识还是比较好理解,加油!

标签

评论

this is is footer