微信小程序模板与配置（四）页面个性化配置&发起网络数据请求

一、page.json对小程序页面进行个性化配置

1、页面配置文件的作用

小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

2、页面配置和全局配置的关系

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求。

注意：当页面配置和全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

3、页面配置中常用的配置项

建议不要在app.json页面中定义 "enablePullDownRefresh": true,

4、实践

/**json文件*/
{
  "usingComponents": {},
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Index",
    "navigationBarBackgroundColor": "#ff0000",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle":"light",
    "onReachBottomDistance": 50
}

注意：不需要添加“window”: {}包裹代码，如果使用了”window”:{}包裹代码，会无法展示效果。

二、发起网络数据请求

1、小程序中网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

（1）只能请求HTTPS类型的接口

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

2、配置request合法域名

需求描述：假设在自己的微信小程序中，希望请求刘龙彬的博客域名下的接口

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

注意事项：

1. 域名只支持https协议
2. 域名不能使用IP地址或localhost
3. 域名必须经过ICP备案
4. 服务器域名一个月内最多可申请5次修改

微信公众平台，扫码登录，选择“小程序”，我的是测试号，所以内容没有那么多。

3、发起GET请求

调用微信小程序提供的wx.request()方法，可以发起GET数据请求，示例代码如下：

<!--pages/home/home.wxml-->

<button bind:tap="getInfo">发起GET请求</button>

//js文件
//发起get数据请求
  getInfo(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/get',//接口地址，必须是https开头
      method: 'GET', //请求方式
      data: {
        name: 'zs',
        age: 20
      },
      success: (res)=>{ //成功后的回调函数
      console.log(res.data)
      }
    })
  },

报错原因及解决办法：

域名失效，更换为https://applet-base-api-t.itheima.net

详情-域名信息，刷新。

4、发起post请求

调用微信小程序提供的wx.request()方法，可以发起POST数据请求，示例代码如下：

 //发起post数据请求
  postInfo(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/post',//接口地址
      method: 'POST',
      data: {
        name: "小明",
        age: 15
      },
      success: (res)=>{
      console.log(res.data)
      }
    })
  },

报错及解决办法：

url中请求方式写错了，应该是post，而不是get。

5、在页面刚加载时请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下：

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

6、跳过request合法域名校验

如果仅仅提供了http协议的接口、暂时没有提供https协议的接口。解决办法：在微信开发者工具中，临时开启“开发环境不校验请求域名、TLS版本及HTTPS证书”选项，跳过request合法域名的校验。

注意：跳过request合法域名校验的选项，仅限在开发与调试阶段使用！

7、关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。

Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。