微信小程序-页面配置+网络数据请求

Fade_VV
299 阅读3分钟
  • 1.页面配置文件的作用
    • 小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
  • 2.页面配置和全局配置的关系
    • 小程序中，app.json中的window节点，可以全局配置小程序中每一个页面的窗口表现。
    • 如果某些小程序页面想要拥有特殊的窗口表现，此时“页面级别的.json配置文件”就可以实现这种需求。
    • 注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
    1. 页面配置中常用的配置项

image.png

网络数据请求

  • 1.小程序中网络请求的限制
    • 出于安全方面的考虑，小程序官方对数据接口的请求做出如下两个限制：
      • 只能请求HTTPS类型的接口
      • 必须将接口的域名添加到信任列表中 image.png
  • 2.配置request合法域名

    • 需求描述，假设自己的微信小程序中，希望请求https://www.escook.cn/ 域名下的接口

    • 登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名 image.png

    • 这里也有了配置的域名。 image.png

    • 注意事项

      • 1.域名只支持https协议
      • 2.域名不能使用IP地址或localhost
      • 3.域名必须经过ICP备案
      • 4.域名修改一个月5次
  • 3.发起GET请求
    • 调用微信小程序提供的wx.request()方法，可以发起GET数据请求，实例代码如下
    xxx.wxml
<button bindtap="getInfo">发起GET请求</button>

    xxx.js
//get数据请求
getInfo(){
    wx.request({
        url: 'https://www.escook.cn/api/get',
        method: 'GET',
        data: {
        name: 'zs',
        age: 20
    },
    success: (res) => {
            console.log(res.data)
        }
    })
},
    • 结果 image.png
  • 4.发起POST请求 
    xxx.wxml
<button bindtap="postInfo">发起POST请求</button>

    xxx.js
//get数据请求
postInfo(){
    wx.request({
        url: 'https://www.escook.cn/api/post',
        method: 'POST',
        data: {
        name: 'zs',
        age: 20
    },
    success: (res) => {
            console.log(res.data)
        }
    })
},
    • 结果 post请求完成 image.png
  • 5.在页面刚加载时请求数据
    • 在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数，实例代码如下：
    /**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
    this.getInfo()
    this.postInfo()
},
  • 5.跳过request合法域名校验
    • 如果后端程序员仅仅只提供了http协议的接口、暂时没有提供https协议的接口
    • 此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启“开发环境不校验请求域名、TLS版本及HTTPS证书”,选项，跳过request合法域名的校验。 image.png
  • 6.关于跨域和Ajax的说明
    • 跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序不存在跨域问题。
    • Ajax技术的核心是依赖浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求” ,而是叫做“发起网络数据请求”。
avatar
文章
阅读
粉丝