微信小程序基础用法

1.wx:if和hidden

<view  wx:if="{{isShow}}"></view>

<view  hidden="{{isShow}}"></view>

区别：

wx:if  :  切换的时候销毁或重新渲染；

wx:if 是惰性的，在初始条件为false,框架什么也不用做，在条件第一次变成真时才开始局部渲染。

hidden: 组件始终会被渲染，只是简单的控制显示与隐藏。

使用:

频繁切换使用hidden,运行时条件变化使用wx:if

2.网络请求

网络请求限制

    出于安全考虑，小程序对数据接口请求有要求：

          只能请求https类型接口

          必须将接口的域名添加到信任列表中

         

配置合法域名

登录小程序公众平台--->开发管理---->开发设置--->服务器域名--->修改合法域名

发起GET请求

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  method：'GET',
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

在一打开页面就加载时请求数据 

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getData()
  },

  getData(){

    wx.request({ 
      url: 'https://www.escook.cn/slides', //仅为示例，并非真实的接口地址
      method:'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success:(res)=>{
        // console.log(res.data)
        this.setData({
          banners:res.data
        })
      }
    })  
   },

 发起POST请求

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  method:'POST',
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

3.页面导航 

 声明式导航

  导航到tabBar页面

      在app.js的tabBar里定义的页面就是tabBar页面

      在navigator组件里  需要指定url属性和open-type属性

      url=“跳转页面的地址”   必须以  "/"  开头

       open-type  跳转的方式   值为switchTab     

<navigator url="/pages/home/home" open-type="switchTab">跳转到home</navigator>

   导航非tabBar页面   

    没有在app.js的tabBar里定义的页面就是非tabBar页面

      在navigator组件里  需要指定url属性和open-type属性

      url=“跳转页面的地址”   必须以  "/"  开头

       open-type  跳转的方式   值为navigate

    注意：导航到非tabBar页面时, open-type="navigate"  可以省略不写  

<navigator url="/pages/cart/cart" open-type="navigate">跳转到cart</navigator>

后退导航

如果想要后退到上一级页面或者多级页面 

需要指定open-type和delta属性

open-type值 必须是navigateBack 

delta值必须为数字   表示后退的层级

delta="1"  可以省略  默认值为1

<navigator open-type="navigateBack" delta="1">返回</navigator>

传参

<navigator url="/pages/cart/cart?id=1&name=ym" open-type="navigate">跳转到cart</navigator>
<navigator url="/pages/cart/cart?id={{num}}&name=ym" open-type="navigate">跳转到cart</navigator>

编程式导航

导航到tabBar页面

wx.switchTab({

url:'/pages/home/home'

)}

导航到非tabBar页面

wx.navigateTo({

url:'/pages/cart/cart'

)}

后退导航

wx.navigateBack({

delta:1

)}

传参

wx.navigateTo({

url:'/pages/cart/cart?id=1&name=zym'

)}

wx.navigateTo({

url:`/pages/cart/cart?id=${this.data.num}&name=zym`

)}

在onLoad中接收参数

onLoad(options){
console.log(options) //{id: "23", name: "zym"}
}

页面事件 

  下拉刷新

手指在屏幕上 下拉滑动操作，重新加载页面数据

步骤

1.启动下拉刷新

全局开启下拉刷新

在app.json 的window节点中，enablePullDownRefresh:true

局部开启下拉刷新

在页面的.json文件中，enablePullDownRefresh:true

2.配置下拉刷新窗口样式

backgroundTextStyle:dark 下拉的loading的效果

backgroundColor 窗口的背景颜色

3.监听下拉刷新事件

通过onPullDownRefresh()监听用户下拉事件

4.停止下拉刷新动作

// 数据重置成功，调用该函数，关闭下拉刷新的效果
    wx.stopPullDownRefresh()

  上拉加载

手指在屏幕上  上拉滑动操作，加载更多数据

1.配置上拉触底距离

全局配置 onReachBottomDistance：60

局部配置 onReachBottomDistance ：60

2.监听页面上拉触底事件

 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
     console.log("触发了上拉触底事件")
  },