uni-app初体验及打包成apk

首先用HBuilderX新建建一个uni-app项目

新建一个目录ucenter,该目录下新建两个vue文件ucenter.vue和setting.vue

ucenter.vue

复制代码

setting.vue

复制代码

pages.json中的代码如下

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "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/book.png",
                "selectedIconPath": "static/book_no.png",
                "text": "主页"
            },
            {
                "pagePath": "pages/ucenter/ucenter",
                "iconPath": "static/write.png",
                "selectedIconPath": "static/write_a.png",
                "text": "我的"
            }
        ]
    },
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}
复制代码

目录结构如下，然后运行到小程序模拟器中的微信开发者工具（前提是你电脑得装有，不然检测不到，其它也一样，可以到运行配置里面点击相应网址去官网下载）

运行结果如下

打包成apk安装到手机

首先要登录，没有帐号可以注册，接着点击运行—原生App-云打包，配置完后点击打包，首次打包，提示说appid不能为空，跳转出基础配置页面，点击云端获取，接下来再次打包就可以顺利完成了

安装到手机的效果如下

github代码 uni-app官网 阿里巴巴矢量图标库

个人网站