How to use uniapp

How to use uniapp: First, developers need to download and install HBuilderX; then create a project directory and create a page; then configure the page and tabbar; and finally run it.

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, thinkpad t480 computer.

Recommended (free): uni-app development tutorial

How to use uniapp:

1. First, developers need to download and install HBuilderX

1) In HBuilderX, click the file in the toolbar->New->Project:

2) Select uni-app, enter the project name, such as: test, click Create, and uni-app will be successfully created

2. Project directory

3. Create page

4. Page and tabbar configuration

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/homework/homework",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/personal/personal",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
    "color": "#C3B8B4",
    "selectedColor": "#F76605",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "学员",
        "iconPath": "static/indexNormal.png",
        "selectedIconPath": "static/indexActive.png"
      },
      {
        "pagePath": "pages/homework/homework",
        "text": "作业",
        "iconPath": "static/homeworkNormal.png",
        "selectedIconPath": "static/homeworkActive.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "我的",
        "iconPath": "static/personalNormal.png",
        "selectedIconPath": "static/personalActive.png"
      }
    ]
  }
}

5. Run

6 .Operating renderings

##Related free learning recommendations:

Programming video

The above is the detailed content of How to use uniapp. For more information, please follow other related articles on the PHP Chinese website!