Vue.js：使用 uni-app 进行多端开发

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

项目准备

在 HBuilderX 中新建 uni-app

调整如下的目录结构

代码编写

配置 pages.json 文件

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "主页"
            }
        },
        {
            "path": "pages/ucenter/ucenter",
            "style": {
                "navigationBarTitleText": "我的"
            }
        },
        {
            "path": "pages/ucenter/setting",
            "style": {
                "navigationBarTitleText": "个人设置"
            }
        }
    ],
    "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": "white",
        "navigationBarBackgroundColor": "#2F85FC",
        "backgroundColor": "#FFFFFF"
    }
}

填充 index.vue 内容

填充 ucenter.vue 内容

选择启动模式

可以选择模拟器，真机模拟，这里我们使用浏览器进行模拟。

image