小程序数据请求、页面跳转和下拉触底

一、数据请求

1.接口设置

处于安全性的考虑，小程序官方要求小程序请求的接口必须满足下面两个条件：

1. 只能请求https的接口
2. 必须把接口的域名添加到信任列表中

(1)开发者工具配置

第一种方式：测试的时候用

第二种方式：真正使用的时候用

把你的服务端的域名在小程序管理后台配置，添加合法性，就可以正常访问。

登录小程序后台，把你的域名配置进去

小程序后台配置成功以后，微信开发者工具的设置-详情里面就能看到你配置的服务器的信息了，以后你再访问此网站下面的内容就可以自由访问了。

备注 微信小程序不能识别localhost等本地测试的服务器地址，除非你勾选不要进行https合法域名验证。

(2)请求方式和传参

小程序中get请求语法：

wx.request({
      url: '服务器地址',
      method:'get',
      data:{
         名:xx,
         名:xx
      },
      success:(res)=>{
        console.log(res)
      }
    })

小程序中post请求语法：

wx.request({
      url: '服务器地址',
      method:'post',
      data:{
         名:xx,
         名:xx
      },
      success:(res)=>{
        console.log(res)
      }
    })

(3)补充

1. 小程序中没有跨域说法 因为小程序的宿主环境是依赖于微信这个整体的环境的，不是依赖于浏览器，所以小程序不存在于跨域的问题。

2. 小程序中ajax的概念 ajax的核心是基于浏览器的一个XMLHTTPRequest对象，但是小程序不是依托于浏览器的，所以说如果它再请求后端数据，我们不要称为发送ajax请求，要说是发起网络请求比较合适。

二、页面跳转

1.声明式导航

(1)tabBar页面跳转

比如我们首页和测试页都是tabBar中页面，如果想点击首页跳转到tabBar中的另一个页面使用方法如下：

我们在首页添加代码如下：

<navigator url="/pages/search/search" open-type="switchTab">跳转到tabBar页面</navigator>

那么此时点击首页的跳转按钮就会跳转到搜索页面。

(2)非tabBar页面跳转

如果想从index(tabBar页面)跳转到详情页（非TabBar页面），首先你先自己创建detail详情页，然后在首页添加如下代码。

<navigator url="/pages/detail/detail" open-type="navigate">跳转到详情页面</navigator>

(3)返回上一级页面 

比如上面的案例我们就可以在详情页面添加如下的代码：

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

2.编程式导航 

(1)跳转到tabBar页面

比如我们在index首页（tabBar页面）跳转到搜索页（tabBar页面），那么我们在index页面添加代码如下：

wxml中添加跳转标签

<button bindtap="goToSearch">跳转到搜索页面</button>

js中添加跳转逻辑

goToSearch(){
    wx.switchTab({
      url: '/pages/search/search',
    })
  }

(2)跳转到非tabBar页面 

比如我们想从首页（tabBar页面）跳转到详情页（非tabBar页面），那么我们在index.wxml中添加如下代码：

index.wxml中添加跳转标签：

<button bindtap="goToDetail">跳转到详情页面</button>

index.js中实现跳转逻辑

  goToDetail(){
    wx.navigateTo({
      url: '/pages/test/test'
    })
  }

(3)导航传参 

index.wxml(tabBar页面)添加按钮

<button bindtap="goToDetail">跳转到详情页面</button>

index.js中处理登录逻辑

goToDetail(){
    wx.navigateTo({
      url: '/pages/detail/detail?id=1'
    })
  }

detail页面接收的时候可以在onload函数的options对象中获取。

 onLoad: function (options) {
    console.log(options)//{id:1}
  }

 

三、下拉触底

1.简介

移动端在数据较多时，一般是通过下拉触底时间实现数据的动态加载。（就是用户在手机上向上滑动时，通过请求后端接口获取更多页面数据的渲染）

2.使用案例

fastmock模拟后端接口数据，可以使用我的

https://www.fastmock.site/mock/353e1f062bc5a256d2444434e8915fc3/news/news

新建test页面，test.js中定义数组和请求后端接口的方法

Page({
  data: {
    goodsList:[]
  },
  getGoodsList:function(){
    wx.request({
      url: 'https://www.fastmock.site/mock/353e1f062bc5a256d2444434e8915fc3/news/news',
      type:'get',
      success:(res)=>{
      //这个是把加载的新数据和原始数据进行合并
        this.setData({
          goodsList:[...this.data.goodsList,...res.data.data]
        })
      }
    })
  },
  onLoad: function () {
    this.getGoodsList();
  },
 })
  

test.js中找到onReachBottom事件函数（注意这是固定方法名，名称不能改，页面创建的时候这个方法就有，不是自己创建的）

Page({
  data:{...},
  getGoodsList:function(){...},
  onLoad: function () {...},
  onReachBottom: function () {
    this.getGoodsList()
  }
  
)}

备注 上面的方法必须是页面触底的时候才会触发onReachBottom事件，重新湖获取后端接口数据。 需要注意的是如果你自己模拟假数据，假数据需要够多，要超过移动端一屏的宽度才会出现下拉加载更多事件。

• test.wxss中定义样式如下：

.box{
  width:100%;
  height:100px;
  background-color: red;
  border:1px solid #000;
  box-shadow: 0px 0px 3px #ccc;
  margin:10px 0;
}

 

修改默认触底的距离距离 小程序中默认的触底距离是50px，也就是你往上滑动页面，在页面距离底部50px的时候会触发onReachBottom事件，如果你想

 

{
  "usingComponents": {},
  "onReachBottomDistance": 100
}

• 添加loading效果

getGoodsList:function(){
    // 发请求之前添加loading效果
    wx.showLoading({title:'loading....'})
    
    wx.request({
      url: 'https://www.fastmock.site/mock/353e1f062bc5a256d2444434e8915fc3/news/news',
      type:'get',
      success:(res)=>{
        console.log(res)
        this.setData({
          goodsList:[...this.data.goodsList,...res.data.data]
        })
      },
      complete:()=>{
        // 其实不用加settimeout 就是我们的数据请求回来太快 有的时候添加效果可以加上它
        setTimeout(function () {
          wx.hideLoading()
        }, 2000)
      }
    })
  },

此时页面显示效果如下: 

 

 3.节流处理

我们在onReachBottom函数中打印一句话，看看用户在多次拖动的时候到底运行了几次。

 getGoodsList:function(){
    console.log('被调用了')
    。。。。
}

我们发现我们在拖动的时候会多次打印，这样性能不是很好，所以我们用节流阀解决一下。

具体操作步骤

第一步：data中定义isLoading变量

isLoading为false，代表可以允许后续的请求，如果为true，代表不允许后续所有的请求。

 data: {
    goodsList:[],
    isLoading:false
  }

第二步：getGoodsList方法中先允许发网络请求，所以设置isLoading为true

getGoodsList:function(){
    this.setData({
      isLoading:true
    })
    ....
}

第三步：数据请求完毕后把isLoading设置为false

    complete:()=>{
        setTimeout(function () {
          wx.hideLoading()
        }, 2000)
        <!--还原节流阀-->
        this.setData({
          isLoading:false
        })
      }

第四步：触底事件更改

如果节流阀开着，就不再次发起请求，否则请求后端的数据。

 onReachBottom: function () {
    if(this.data.isLoading==true)return ;
    this.getGoodsList()
  }

test.js完整代码如下：

// pages/test/test.js
Page({
  data: {
    goodsList:[],
    isLoading:false
  },
  getGoodsList:function(){
    this.setData({
      isLoading:true
    })
    // 发请求之前添加loading效果
    wx.showLoading({title:'loading....'})
    wx.request({
      url: 'https://www.fastmock.site/mock/353e1f062bc5a256d2444434e8915fc3/news/news',
      type:'get',
      success:(res)=>{
        console.log(res)
        this.setData({
          goodsList:[...this.data.goodsList,...res.data.data]
        })
      },
      complete:()=>{
        // 其实不用加settimeout 就是我们的数据请求回来太快 有的时候添加效果可以加上它
        setTimeout(function () {
          wx.hideLoading()
        }, 2000)
        this.setData({
          isLoading:false
        })
      }
    })
  },
  onLoad: function () {
    this.getGoodsList();
  },
  onReachBottom: function () {
    if(this.data.isLoading==true) return ;
    this.getGoodsList()
  },

})