《使用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. }
  32. ]
  33. }
  34. }

一般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.jsonmain.js中和全局配置方法一样。在页面文件若想动态配置标题方法,可以使用

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

微信扫码体验小程序