微信小程序的全局配置文件的配置项和网络数据请求

一. 全局配置文件及常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件

1. pages 记录当前小程序所有页面的存放路径
2. window 全局设置小程序窗口的外观,下面是window的一些配置项
   enablePullDownRefresh:true 开启下拉刷新功能
   “backgroundColor”: “#efefef” 下拉窗口的背景颜色
   “backgroundTextStyle”:“dark” 下拉刷新时 loading 的样式 只有两个值dark 和 light
   “onReachBottomDistance”:50 默认是50 页面上拉触底事件触发时距页面底部距离，单位为 px
3. tabBar 设置小程序底部的 tabBar 效果
   用于实现多页面的快速切换
   小程序中分为: 底部 tabBar 顶部 tabBar
   注意点:
   • tabBar 中只能配置最少2个,最多5个tab页签
   • 当渲染顶部tabBar时,不显示 icon,只显示文本
     

"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "/images/2020-01-09_162207.png" 未选中的图片路径
"selectedIconPath": "/images/demo3.jpg"  选中的图片路径

4. style 是否启用新版的组件样式

"style": "v2"

二.网络数据请求

1.数据请求的两个限制:

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

2.配置 request 合法域名

配置步骤: 登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

注意点:

• 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；
• 域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost
• 域名必须经过 ICP 备案
• 一个月只可以修改5次

3.发起 GET 请求

wx.request() 可以进行 get 数据请求

 bindget(){
   wx.request({
    url: 'https://www.escook.cn/api/get', // 请求的接口地址
    methods:'GET', // 请求的方式
    data:{     // 发送到服务器的数据
     name:'zs',
     age:22
    },
    success:(res)=>{ // 请求成功之后的回调函数
     console.log(res)
    },
    fail:()=>{ },  // 请求失败的回调函数
    complete:()=>{ }  // 请求完成的回调函数(不管请求成功和失败都会进这里)
   })
  }

4.发起 Post 请求

bindget(){
   wx.request({
    url: 'https://www.escook.cn/api/post', // 请求的接口地址
    methods:'POST', // 请求的方式
    data:{     // 发送到服务器的数据
     name:'zs',
     age:22
    },
    success:(res)=>{ // 请求成功之后的回调函数
     console.log(res)
    },
    fail:()=>{ },  // 请求失败的回调函数
    complete:()=>{ }  // 请求完成的回调函数(不管请求成功和失败都会进这里)
   })
  }

5.在页面刚加载时(自动)请求数据

生命周期函数–监听页面加载
onLoad: function (options) {
this.bindget() // 上面的事件
}

6.跳过request合法域名校验

如果后端程序员仅仅提供了http协议接口,暂时没有提供https协议的接口

• 办法:在微信开发者工具中，可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。

• 步骤:详情->本地设置->不校验请求域名、TLS版本及HTTPS证书
  

• 注意点: 跳过 request 合法域名校验的选项,仅限在开发与调试阶段使用

7.跨域和ajax的说明

• 小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域问题
• 小程序中不能叫做 “发起ajax请求”,而是叫做 “发起网络数据请求”

三.页面导航

页面导航有两种方式:声明式导航,编程式导航

1.声明式导航

在页面上声明一个导航组件
通过点击组件实现页面跳转
url 表示要跳转的页面的地址,必须以 / 开头

小程序底部的 tabBar 效果
1.导航到tabBar页面
<navigator url="/page/index/index" open-type="switchTab">切换 Tab</navigator>
open-type 表示跳转的方式,必须为 switchTab
注意点: 必须要加 open-type 才能跳转
2.导航到非tabBar页面
<navigator url="/pages/logs/logs" open-type="navigate">跳转到logs</navigator>
open-type 表示跳转的方式,必须为 navigate
注意点: 加 open-type 才能跳转
3.后退导航   默认 delta 为 1  页数
<navigator open-type="navigateBack" delta="1">后退导航</navigator>
open-type 表示跳转的方式,必须为 navigateBack
注意: 如果在 tabBar 页面中加入后退导航会失效 

2.编程式导航

调用小程序的导航api,实现页面的跳转

1. 导航到 tabBar 页面
调用 wx.switchTab(object) 方法,可以跳转到tabBar页面
注意: url 路径后面不能带参数
<button bindtap="btnLogs">跳转到logs</button>
btnLogs(){
    wx.switchTab({
      url: '/pages/tom/tom'
    })
  }
2.导航到非tabBar页面
调用 wx.navigateTo(Object object) 方法,可以跳转到非 tabBar 页面
注意: url 路径后面可以带参数,参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'pathkey=value&key2=value2'
<button bindtap="btnInfo">跳转到info页面</button>
 btnInfo(){
    wx.navigateTo({
      url: "/pages/info/info"
    })
  }
3.后退导航
调用 wx.navigateBack(Object object) 方法
<button bindtap="btnIndex">跳转到上一页</button>
btnIndex(){
    wx.navigateBack()
}

3.声明式导航传参

参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’

<navigator url="/pages/info/info?name=zs&age=18" open-type="navigate">声明式跳转到info</navigator>

4.编程式导航传参

注意:使用wx.navigateTo({ })
<button bindtap="btnInfo">编程式跳转到info页面</button>
btnInfo(){
    wx.navigateTo({
      url: "/pages/info/info?name=ls&age=20"
    })
}

5.在onload中接收导航参数

在 .js 文件中
 生命周期函数--监听页面加载
  onLoad: function (options) {
  // options 就是导航传递过来的参数对象
    console.log(options)
  }

四.下拉刷新事件

1. 下拉刷新实际上是更新页面的数据

2. 开启下拉刷新

全局刷新 app.json
局部刷新 页面.json
在 json 文件中 加入 “enablePullDownRefresh”:true 就可以开启下拉刷新

3.监听页面的下拉刷新事件

页面相关事件处理函数–监听用户下拉动作
// 在 js 文件中
onPullDownRefresh: function () { }

4.停止下拉刷新事件

注意:当处理完下拉刷新后,下拉的效果会一直显示,不会主动消失,所以需要手动隐藏loading效果,此时,调用wx.stopPullDownRefresh() 可以停止当前页面的刷新

 页面相关事件处理函数--监听用户下拉动作
 onPullDownRefresh: function () {
    this.setData({
      count: 0
    })
	// 当数据重置成功后,调用此函数,关闭下拉刷新效果
    wx.stopPullDownRefresh()
}

五.上拉触底事件

其实上拉触底事件是加载更多数据的行为

1.监听当前页面的上拉触底事件

在页面的 .js 文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件

// 页面上拉触底事件的处理函数
onReachBottom: function () {
    console.log('触发上拉触底事件')
}

2.配置上拉触底距离

在页面的 .json 中配置

// 到页面底部多少时触发上拉触底事件
"onReachBottomDistance":150    // 默认是50  单位:px

3.对上拉触底进行节流处理

在data中定义 loading 节流阀
false 表示当前没有请求数据 true 当前正在请求数据

案例:  上拉触底节流处理
data:{
	colorList:[],
	isloading:false
}
getColors(){
	this.setData({
      isloading:true
    })
    // 展示 loading(加载) 效果
    wx.showLoading({
      title: '数据正在加载中',
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:({data:res}) => {
        console.log(res)
        this.setData({
          colorList:[...this.data.colorList,...res.data]
        })
      },
      // 无论成功或者失败都会进这里
      complete:() => { 
        wx.hideLoading() // 隐藏 loading 效果
          this.setData({
            isloading:false
          })
       }
    })
  }
  // 页面上拉触底事件的处理函数
  onReachBottom: function () {
  // 如果当前没有请求数据就不继续执行了
    if(this.data.isloading) return;
    this.getColors()
  }

六. 事件绑定的传参

我们可以通过 bindtap 为组件绑定 tap 触摸事件

1.事件传参

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数:

// 例如下面的代码就不能正常工作:
<button type="primary" bindtap="btnTapHandler(123)">按钮</button>

可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字

// 如果不加 花括号 就是字符串 data-num="123"
<button type="primary" bindtap="btnData" data-num="{{2}}">事件传参 +2</button>

btnData(e){
      // 通过 event.target.dataset.参数名 就可以获取到具体参数的值   dataset 里有个对象,包含了所有通过 data-* 传递过来的参数项
      console.log(e.target.dataset.num)
}

总结:

1.全局配置文件及常用的配置项一般使用四个pages,window,tabBar,style
2.网络数据请求 wx.request({})
3.页面导航(声明式导航和编程式导航)
4.使用下拉刷新事件时,注意下拉刷新事件启动完成后,要把下拉刷新停止
5.上拉触底事件:要对它进行节流处理
6.事件绑定传参,使用data-* 自定义属性传参