uniapp怎麼使用

uniapp的使用方法：首先開發者需先下載安裝HBuilderX；然後建立專案目錄，並建立頁面；接著設定頁面及tabbar；最後實作即可。

本教學操作環境：windows7系統、uni-app2.5.1版本、thinkpad t480電腦。

推薦（免費）：uni-app開發教學

uniapp的使用方法：

1.首先開發者需先下載安裝HBuilderX

#1）在HBuilderX 點選工具列裡的檔案- >新建- >專案：

2）選擇uni-app，輸入工程名，如：test，點擊創建，即可成功建立uni-app

#2.專案目錄

#3. 建立頁面

4.頁面及tabbar設定

{
    "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.執行

##6 .運行效果圖

相關免費學習推薦：

程式設計影片

以上是uniapp怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！