小程序项目开发配置

1、项目初始化及目录和页面划分

1.1、新建项目：使用微信开发者工具创建项目，并将其链接到远程 gitHub 仓库。具体步骤可以参考这里：传送门

1.2、划分项目目录：一般情况下需要新建几个文件夹：assets、components、pages、service、utils。

1.3、创建项目页面：到 app.json 文件的 pages 数组写上新建的文件路径，ctrl + s 即可一键创建多个界面，比如：

"pages":[
    "pages/home/home",
    "pages/profile/profile"
]

1.4、项目页面划分：tabbar 配置需到 app.json 文件中的 pages 数组后写上 tabBar 对象，代码如下：

"tabBar":{
    "selectedColor": "#229DDD",    //配置tabbar上分栏被选中状态的文字颜色
    "list": [                      //tabbar里至少要写两个页面对象
        {
            "pagePath": "pages/home/home",        //页面路径
            "text": "首页",                       //tabbar分栏文字
            "iconPath": "assets/images/tabbar/home.png",                  //tabbar分栏图片
            "selectedIconPath": "assets/images/tabbar/home_active.png"    //tabbar分栏选中时图片
        }
    ]
}

1.5、导航栏配置：需到 app.json 文件中的 tabBar 对象后写上 window 对象，代码如下：

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#82C7EC", //导航条背景颜色
    //"navigationBarTitleText": "首页",  //导航条title文字，该属性最好不要在这里设置，因为每个页面的导航条显示的文字不同
    "navigationBarTextStyle": "black",  //导航条文字颜色                      最好到每个页面的json文件中进行单独设置
    "enablePullDownRefresh": false,     //是否可以下拉刷新
    "backgroundColor": "#eeeeee"        //下拉刷新时下拉区域的颜色
}

2、网络请求的封装 Promise

项目中的图片和数据一般会放到服务器上，因此在展示数据之前需要先拿到数据，这个时候就需要在页面加载（onLoad()）时发送网络请求，为了避免在每个页面都使用 wx.request() 方法，使项目和该方法的耦合度太高，就需要对网络请求的方法进行封装：在新建的 service 文件夹下新建 network.js 文件，还可以提取 baseURL、timeout 公共变量到 config.js 文件中方便后期维护。

除此之外，每个页面请求的数据最好分开，比如 home 页面需要请求的数据的方法，最好定义在 service 文件夹下新建 home.js 文件中，需要引用 network.js 组件，具体代码如下：关于网络封装思想，可以看一下这篇博客：传送门

//service/config.js
const baseURL = 'http://127.0.0.1:8000';
const timeout = 5000;
 
//service/network.js
import {baseURL,timeout} from './config.js'
export default function(options){
  return new Promise((resolve,reject) => {
    wx.request({
      url: baseURL + options.url,
      timeout: timeout,
      method: options.url || 'get',
      data: options.data || {},
      success: resolve,
      fail: function(){ console.log('发送网络请求失败'); }
    })
  })
}
 
//service/home.js
import request from './network.js'
export function getMultiData() {
  return request({
    url: '/home/multidata'
  })
}
 
// pages/home/home.js
import { getMultiData } from '../../service/home.js'
Page({
  data: { banners:[] },
  onLoad: function (options) {
    //请求图片及数据
    getMultiData().then(res => {
      const banners = res.data.banner.list;
      this.setData({    //将banners数据放到data中
        banners:banners
      })
    })
  }
})