在 《使用mpvue快速构建一个小程序》学习了怎么搭建一个小程序，下来我们就要看看小程序的基本配置。

项目配置

app.json是项目的全局配置，包含了小程序页面的页面文件路径，全局窗口样式，底部菜单以及一些其他配置，官方文档介绍。

注意的是我们写的每一个页面都需要在app.json文件中指定，不然就无法运行项目。下面代码配置了项目的页面路径、导航栏样式和标题、底部菜单。

  1. {
  2.   // 指定所有页面地址
  3.   "pages": [
  4.     "pages/index/main",
  5.     "pages/user/main"
  6.   ],
  7.   // 导航栏样式和标题
  8.   "window": {
  9.     "backgroundTextStyle": "light",
  10.     "navigationBarBackgroundColor": "#fff",
  11.     "navigationBarTitleText": "代码汇",
  12.     "navigationBarTextStyle": "black"
  13.   },  
  14.   // 底部菜单名称和图标
  15.   "tabBar": {
  16.     "color": "#999999",
  17.     "selectedColor": "#1AAD16",
  18.     "backgroundColor": "#ffffff",
  19.     "borderStyle": "white",
  20.     "list": [{
  21.         "pagePath": "pages/index/main",
  22.         "text": "首页",
  23.         "iconPath": "static/images/home.png",
  24.         "selectedIconPath": "static/images/home-sel.png"
  25.       },
  26.       {
  27.         "pagePath": "pages/user/main",
  28.         "text": "我的",
  29.         "iconPath": "static/images/mine.png",
  30.         "selectedIconPath": "static/images/mine-sel.png"
  31.       }
  33.     ]
  34.   }
  35. }

一般pages中第一个路径会被当做首页，指定首页方法

  1. {
  2.   "pages": [
  3.     "pages/user/main",
  4.     "^pages/index/main"
  5.   ]
  6. }

全局引入样式文件

因本人比较懒，这里直接引入第三方UI库，这里使用 mpvue 框架重写的WeUI。 mpvue-weui
下载weui.css文件放到static目录下面，然后在src\main.js中引入

  1. import '../static/css/weui.css'

设置保存自动编译

打开开发者工具的设置》编辑设置，勾选保存时自动编译小程序，这样每次打包项目就不用在微信开发者工具进行编译了。然后在控制台运行我们的项目npm run dev，就可以看到效果了：
代码汇

其他地方配置的方法

上面说的src\app.json可以进行项目的全局配置，当然也可以在src\main.js中进行配置：

  1. export default {
  2.     config: {
  3.       pages: [],
  4.       window: {}
  5.     }
  6. }

在pages部分的配置

  1. pages
  2. ├── index
  3. │    ├──index.vue
  4. │    ├──main.js
  5. │    └──main.json

main.json和main.js中和全局配置方法一样。在页面文件若想动态配置标题方法，可以使用

  1. wx.setNavigationBarTitle({
  2.   title: '当前页面标题'
  3. })
扫码体验小程序

微信扫码体验小程序