创建页面

在 pages 创建目录后，右键“新建page”
image.png

tabBar

文档
在app.json中添加tabBar

  1.   "tabBar": {
  2.     "list": [
  3.       {
  4.         "pagePath": "pages/home-music/index",
  5.         "text": "音乐",
  6.         "iconPath": "assets/images/tabbar/music_normal.png",
  7.         "selectedIconPath": "assets/images/tabbar/music_active.png"
  8.       },
  9.       {
  10.         "pagePath": "pages/home-video/index",
  11.         "text": "视频",
  12.         "iconPath": "assets/images/tabbar/video_normal.png",
  13.         "selectedIconPath": "assets/images/tabbar/video_active.png"
  14.       }
  15.     ]
  16.   }

image.png

编译模式

为了使每次打开小程序时跳转到指定页面，可以添加编译模式
image.png
也可以修改app.json中的pages的顺序

  1.   "pages": [
  2.     "pages/home-video/index",
  3.     "pages/home-music/index"
  4.   ],

请求数据

在生命周期 onLoad 中请求数据

  1. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     topMVs: []
  8.   },
  10.   /**
  11.    * 生命周期函数--监听页面加载 (created)
  12.    */
  13.   onLoad: function (options) {
  14.     const _this = this
  15.     wx.request({
  16.       url: 'http://123.207.32.32:9001/top/mv',
  17.       data: {
  18.         offset: 0,
  19.         limit: 10
  20.       },
  21.       success: function(res) {
  22.          _this.setData({topMVs: res.data.data})
  23.       },
  24.       fail: function(err){
  25.         console.log(err)
  26.       }
  27.     })
  28.   },
  29. }

小程序中不允许直接写 IP，更改本地配置为不校验合法域名
image.png