Wepy目錄結構

1、WePY項目的目錄結構

├── dist                   小程序運行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件）
├── node_modules           
├── src                    代碼編寫的目錄（該目錄爲使用WePY後的開發目錄）
|   ├── components         WePY組件目錄（組件不屬於完整頁面，僅供完整頁面或其餘組件引用）
|   |   ├── com_a.wpy      可複用的WePY組件a
|   |   └── com_b.wpy      可複用的WePY組件b
|   ├── config             項目配置文件
|   |   ├── api.js         後臺接口映射表
|   |   ├── ip.js          後臺請求ip地址
|   |   └── config.js      項目參數配置文件（請求方式等）
|   ├── assets             放置靜態文件（圖片、字體包等）
|   |   ├── images         靜態圖片
|   |   └── fonts          字體包
|   ├── request            
|   |   ├── requestMethod  請求方法
|   |   └── request.js     使用策略模式分發請求方式
|   ├── service            
|   |   ├── login.js       登陸接口請求函數
|   |   └── other.js       其餘接口請求函數
|   ├── utils                          
|   |   ├── error.js       錯誤code映射表
|   |   ├── utils.js       共有函數
|   |   └── tokenHandler.js token處理
|   ├── zanui              小程序ui框架            
|   ├── pages              WePY頁面目錄（屬於完整頁面）
|   |   ├── index.wpy      index頁面（經build後，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）
|   |   └── other.wpy      other頁面（經build後，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件）
|   └── app.wpy            小程序配置項（全局數據、樣式、聲明鉤子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss文件）
├── wepy.config.js         打包配置文檔
└── package.json           項目的package配置

2、項目運行流程

此流程爲頁面加載到請求完成

1、app.wpy

app.wpy爲小程序的入口文件，在這個文件中
① 配置路由`config.pages`
**注意：**在路由中默認加載第一個路由
```
pages: [
  'pages/mine/test', // 開始默認加載這個
  'pages/mine/index',
  'pages/homepage/index',  
  'pages/sign/index'
],
```
② 配置整個小程序的樣式
**注意：**是配置全局的樣式，若是頁面不單獨配置是默認採用這種配置
```
window: {
   backgroundTextStyle: 'light',
   navigationBarBackgroundColor: '#fff',
   navigationBarTextStyle: 'black'
},
```    
③ 配置底部tabBar
```
tabBar: {
  list: [{
    pagePath: 'pages/mine/test',
    iconPath:'assets/images/qw-homepage.png',
    selectedIconPath:'assets/images/qw-homepage-select.png',
    text: '首頁'
  }, {
    pagePath: 'pages/sign/index',
    iconPath:'assets/images/sign.png',
    selectedIconPath:'assets/images/sign-select.png',
    text: '簽到'
  }, {
    pagePath: 'pages/mine/index',
    iconPath:'assets/images/mine.png',
    selectedIconPath:'assets/images/mine-select.png',
    text: '個人'
  }]
}
```
④ 全局公有數據

```
globalData = {
   userInfo: null
}
```

2、pages/

WePY頁面目錄（屬於完整頁面）

3、service/

後臺接口服務這個模塊對應這後臺接口服務。

import request from '../request/request'
import Config from '../config/api'
import { createTheURL } from '../utils/utils'
export async function Login(params) {
  return request(createTheURL(Config.API.USER, 'login'), {
    method: 'POST',
    data: params
  })
}

注意

1.私有接口必須爲全小寫

2.一般狀況下一個業務對應一個services

4、request/

向後臺發送請求
在這個裏面一共有4個文件

1.request.js

選擇調用的後臺請求模式，axios或者fetch，固定參數API.REQUEST_METHOD能夠在./../../config/api中進行配置

2.requestMethod/
各類不一樣的請求方式

咱們在處理後臺請求時還會須要幾個文件：

1. config/ip.js設置請求的ip地址
2. utils/utils.js中的createTheURL拼接ip地址與API接口，使其成爲一個完整的請求地址
3. config/api.js寫共有的請求方式（REQUEST_METHOD），和API請求接口