基於Taro開發小程序筆記--02項目結構梳理

一、項目文件結構修改成如下目錄

二、在config>index.js文件里面，根據UI設計稿的尺寸比例進行適配設備的尺寸設置designWidth。

 projectName: 'mytaro',
  date: '2018-9-25',
  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },

三、在package.config.json文件中，自由設置appid來對應開發/測試/生產環境

{
	"miniprogramRoot": "dist/",
	"projectname": "xxxxxxxx",
	"description": "wxapp",
	"appid": "xxxxxxxxx",
	"setting": {
		"urlCheck": true,
		"es6": false,
		"postcss": false,
		"minified": false,
		"newFeature": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.4.0",
	"condition": {}
}　

 四、當項目過大時，需要進行項目的分包處理。(建議從項目一開始就進行分包，避免后期因為路徑的問題，進行大量的文件引用修改）

首先在app.js的入口文件中，配置分包的路由

config = {
//pages是首頁tab按鈕的路由配置 
    pages: [
      "pages/tab1/tab1",
      'pages/tab2/tab2',
      ...
    ],
//subPackages是分包文件的路由配置，subPages1/subPages2是自定義的名稱
    "subPackages": [
      {
        root: "subPages1/",
        pages: [
          'pages/login/login'
           ...
        ]
      },
      {
        root: "subPages2/",
        pages: [
          'pages/other/other',
           ...
        ]
      }],
    window: {
      backgroundTextStyle: '#5095ff',
      navigationBarBackgroundColor: '#5095ff',
      navigationBarTitleText: '我的標題',
      navigationBarTextStyle: '#fff',
      enablePullDownRefresh: false
    },
    tabBar: {
      color: "#000",
      selectedColor: "#5095ff",
      borderStyle: "#ccc",
      list: [
        {
          selectedIconPath: "images/insure_select.png",
          iconPath: "images/insure.png",
          pagePath: "pages/home/home",
          text: "首頁"
        },
        ...
      ]
    },
// 網絡請求超時設置
    networkTimeout: {
      request: 120000
    },
//騰訊視頻播放插件配置，需要在微信公眾平台進行插件配置后才可以使用（用到就配置，沒有需要播放騰訊視頻的不需要配置）
    plugins:{
      tencentVideo:{
        version:'1.2.4',
        provider:'xxxxxxxxx'
      }
    }
  }

 

 五、請求地址/請求攔截/請求接口的統一管理

 

六、公共文件統一管理公用文件

 

七、Redux狀態管理文件

 

 總結：經過上述的處理后，整個項目有一個清楚的結構，便於團隊的后期開發和業務的擴展。后面詳細介紹和記錄文件的具體處理和遇到的一些問題。