小程序——请求接口和封装url

1.在xxx.js 写下面代码

(1)在Page的data中定义一个初始值,用于赋值,把数据渲染到页面

   // 把数据渲染到页面,定义一个初始值
    userName:"

2.在utils里面封装url

// 定义接口初始值
const url = "https://ehcto.com/";
const getUrl =function(){
  return url + data;
}

module.exports = {
  formatTime:formatTime,
  
  // 把getUrl写进去
  getUrl:getUrl
}

3.在xxx.js文件引入utils文件

// 引入util文件
const util = require('../../utils/util.js');
// 定义封装的url 
const dataJson =util.getUrl('data.json');

4.在xxx.js 写下面代码

(1)onLoad(生命周期):小程序注册完成后,加载页面,触发onLoad方法,一个页面只会调用一次

 // 在onLoad生命周期写接口数据
  onLoad() {

  //因为闭包了,所以需要改变this的指向
  let That=this;

  // 获取接口
  wx.request({
  //dataJson 是封装的接口
   url: 'dataJson',

    // 传给后台的数据
    data:{
      key:'123',
      userName:"小安"
    },

    // 接收后台的数据 (是That,不是this)That.setData... 
    success(res){
    That.setData({

      //进行赋值
      user:res.data.需要请求的数据名称(比如:接口数据里面的city)
    })
    }
  })



   //以下代码无关
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },

5.在xxx.xwml 写下面代码



{{userName}}

你可能感兴趣的:(小程序)