2019-03-20

9 多端开发之uni-app起步

96

1.在HBuilderX中新建uni-app

image.png

2.项目初始目录结构

image.png

3.调整项目目录结构如下图

image.png

4.配置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"
    }
}

5.简单写一下index.vue和ucenter.vue内容
index.vue

    
        主页,{{ title }}
    

ucenter.vue

    
        {{ name }}的个人中心
        
            设置
        
    

6.启动雷神模拟器，选择真机运行

image.png

控制台信息：

image.png

编译项目
模拟器运行效果

image.png

image.png

点击“设置”可以跳转到个人设置新页面，也可以返回到“我的”页面

image.png

7.真机插入USB也可以运行

8.uni-app官网：https://uniapp.dcloud.io/
9.阿里巴巴矢量图标库：https://www.iconfont.cn/