uni-app是一個使用 Vue.js 開發(fā)跨平臺應(yīng)用的前端框架，開發(fā)者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺.

• uni-app在跨端數(shù)量、擴(kuò)展能力、性能體驗(yàn)、周邊生態(tài)、學(xué)習(xí)成本、開發(fā)成本等6大關(guān)鍵指標(biāo)上擁有極強(qiáng)的競爭優(yōu)勢。
• uni-app在跨平臺的過程中，不犧牲平臺特色，可優(yōu)雅的調(diào)用平臺專有能力，真正做到海納百川、各取所長。

uni-app初步使用

1. 在HBuilderX中創(chuàng)建一個新的項(xiàng)目

   
   
   創(chuàng)建.png

2. 在pages目錄中添加頁面

   
   
   頁面.png

3. 在pages中添加一個界面，都需要在pages.json中添加，如下圖

{
    "pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "主頁"
            }
        },
        {
            "path": "pages/ucenter/ucenter",
            "style": {
                "navigationBarTitleText": "我的"
            }
        },
        {
            "path": "pages/ucenter/setting",
            "style": {
                "navigationBarTitleText": "設(shè)置"
            }
        }
    ],
    "tabBar":{
        "color":"#000000",
        "selectedColor":"#2F85FC",
        "backgroundColor":"#FFFFFF",
        "borderStyle":"black",
        "list":[
            {
                "pagePath":"pages/index/index",
                "iconPath":"static/home.png",
                "selectedIconPath":"static/home-active.png",
                "text":"主頁"
            },
            {
                "pagePath":"pages/ucenter/ucenter",
                "iconPath":"static/center.png",
                "selectedIconPath":"static/center-active.png",
                "text":"我的"
            }
        ]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

4. 效果圖，如下

   
   
   page1.png

page2.png

page3.png