WX小程序项目开发（1-封装网络请求开发一个小程序页面---------------------------------

W：what是什么？W：why为什么？H：how怎么样？

开发一个小程序页面：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

注册账号-》申请AppID-》微信开发者工具（略）

tabbar可配置

生命周期

基础的网络请求

图片.png

/**
   * 生命周期函数--监听页面加载
   */

  onLoad: function (options) {
    const _this = this
    wx.request({
      url: 'http://',
      data: {
        offset: 0,
        limit: 10
      },

      header: {
        'content-type': 'application/json' // 默认值 
      },

      success: function(res){
        _this.setData({topMVs:res.data.data})
      },

      fail: function(err){
        console.log(err);
      }
    })

  },

对wx.request的封装

用class 类来封装一个请求根目录下创建service文件夹

const BASE_URL = "http://"
class wwhRequest {
  request(url, method, params) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: BASE_URL + url,
        method: method,
        data: params,
        success: function(res) {
          resolve(res.data)
        },
        fail: reject
      })
    })
  }
  get(url, params) {
    return this.request(url, "GET", params)
  }
  post(url, data) {
    return this.request(url, "POST", data)
  }
}
const wwhRequest = new HYRequest()
export default wwhRequest

这个时候就不用在js里写原始的请求了

图片.png

分离架构

确定的东西在另一个js里写好

图片.png

import wwhRequest from './index'
export function getTopMV(offset, limit = 10) {
  return hyRequest.get("/top/mv", {
    offset,
    limit
  })
}

在页面中：

图片.png