uni-app初体验及打包成apk ⾸先⽤新建建⼀个uni-app项⽬
新建⼀个⽬录ucenter，该⽬录下新建两个vue⽂件ucenter.vue和setting.vue
ucenter.vue
<template>
<view class="container">
<text>{{ name }}的个⼈中⼼</text>
<navigator url="../ucenter/setting" hover-class="navigator-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 class="container">
举世⽆双
</view>
</template>
<script>
</script>
<style>
</style>
pages.json中的代码如下
{
"pages": [ //pages数组中第⼀项表⽰应⽤启动页，参考：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": "我的"
}
]
},selectediconpath什么意思
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
⽬录结构如下，然后运⾏到⼩程序模拟器中的开发者⼯具（前提是你电脑得装有，不然检测不到，其它也⼀样，可以到运⾏配置⾥⾯点击相应⽹址去官⽹下载）
运⾏结果如下
打包成apk安装到⼿机
⾸先要登录，没有帐号可以注册，接着点击运⾏—原⽣App-云打包，配置完后点击打包，⾸次打包，提⽰说appid不能为空，跳转出基础配置页⾯，点击云端获取，接下来再次打包就可以顺利完成了
安装到⼿机的效果如下