软件准备

HBuilderX App开发版
微信开发者工具 Win64

UNI-APP 官方文档

安装注意：微信开发者工具端口号启用

项目目录说明

  • pages
    页面文件
  • static
    静态资源
  • unpackage
    打包文件
  • app.vue
    项目根组件
  • main.js
    项目入口文件
  • manifest.json
    打包配置文件
  • pages.json
    页面路由、项目全局外观配置
  • uni.scss
    全局样式变量

开发规范

  • 页面文件遵循 Vue 单文件组件规范
  • 组件标签遵循小程序规范
  • 接口 JS Api 遵循小程序规范
  • 数据绑定及事件处理遵循 Vue 规范
  • 兼容多端，布局使用 Flex

配置说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"globalStyle": {
     // 导航栏文本颜色
    "navigationBarTextStyle": "white",
     // 标题文本内容
    "navigationBarTitleText": "uni-app",
     // 导航栏背景色
    "navigationBarBackgroundColor": "#7FFF00",
     // 页面背景色
    "backgroundColor": "#F8F8F8",
    "backgroundTextStyle": "light",
     // 是否开启下拉刷新
    "enablePullDownRefresh": true,
     // 页面下拉触底事件触发距离
    "onReachBottomDistance": 50
}

  • 页面配置

    页面配置同全局配置，可以覆盖全局配置

  • tabBar

    设置 position: top 不显示图标，仅支持小程序
    数量 2-5 个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"tabBar":{
    "list":[
        {
            "text":"首页",
            "pagePath":"pages/index/index"
        },
        {
            "text":"信息",
            "pagePath":"pages/message/message"
        }
    ],
    "selectedColor":"#007AFF",
    "backgroundColor":"#fdfdfd",
    "borderStyle":"black"
}
  • condition 启动模式配置
1
2
3
4
5
6
7
8
9
10
"condition":{
    "current": 0,
        "list":[
            {
                "name": "",
                "path":"",
                "query":""
            }
        ]
}