uniapp初体验及打包成apk

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

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

ucenter.vue

template
view >
text {{ name }}的个人中心 /text
navigator url= ../ucenter/setting hover- >
button type= default 设置 /button
/navigator
/view
/template
script
export default {
data() {
return {
name: '陶然然'
};
},
onLoad() {},
methods: {}
};
/script
style
.container {
width: 95%;
margin: 0 auto;
text-align: center;
}
/style

setting.vue

template
view >
举世无双
/view
/template
script
/script
style
/style

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不能为空，跳转出基础配置页面，点击云端获取，接下来再次打包就可以顺利完成了

安装到手机的效果如下