uni-app初體驗及打包成apk

首先用HBuilderX新建建一個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數組中第一項表示應用啟動頁，參考：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官網
阿里巴巴矢量圖標庫

個人網站