4.uin-app

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

  • uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势。
  • uni-app在跨平台的过程中,不牺牲平台特色,可优雅的调用平台专有能力,真正做到海纳百川、各取所长。

uni-app初步使用

  1. 在HBuilderX中创建一个新的项目


    创建.png
  2. 在pages目录中添加页面


    页面.png
  3. 在pages中添加一个界面,都需要在pages.json中添加,如下图

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/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": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

  1. 效果图,如下


    page1.png
page2.png
page3.png

你可能感兴趣的:(4.uin-app)