uni-app初探（路由/scss/vuex/插件/@指向位置）

uniapp簡單使用

一、路由

• 在pages.json文件的pages數組裏面定義， 注意：修改配置文件後最好重啓應用
• 使用 uni.navigateTo / uni.switchTab 或者其他的路由API跳轉
• 如： uni.redirectTo({ url: ‘…/mime/index’ }) 或者使用 uni.redirectTo({ url: ‘/pages/mime/index’ })

二、路由傳參

1. 傳遞參數

uni.navigateTo({
	url: '/pages/payment/index?commodityId=' + 6
});

2. 接收參數

onLoad: function (option) { //option爲object類型，會序列化上個頁面傳遞的參數
	this.commodityId = option.commodityId
},

注意：接收只能使用onLoad這個生命週期鉤子，不能使用mounted
onLoad：監聽頁面加載，其參數爲上個頁面傳遞的數據，參數類型爲Object（用於頁面傳參）
頁面生命週期

navigateto文檔說明

三、uniapp中使用scss

菜單命令: 工具 => 插件安裝 => scss/sass編譯，安裝好scss後，在 style 節點上加上 lang=“scss”
文檔地址

配置好scss後，可直接使用uni.scss裏面定義的變量，無需引入

四、使用vuex

由於uni-app已經內置了vuex，所以只要正確引入就好了(vue也是內置的，無需安裝)
參考文章

五、使用插件

在插件市場找到想要的插件，並下載。解壓後將其放置components中，安裝插件對應的文檔使用即可

六、uni-app中的alias

• @指向項目根目錄，在cli項目中@指向src目錄
• 絕對路徑，/static指根目錄下的static目錄，在cli項目中/static指src目錄下的static目錄

<!-- 絕對路徑，/static指根目錄下的static目錄，在cli項目中/static指src目錄下的static目錄 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相對路徑 -->
<image class="logo" src="../../static/logo.png"></image>

• 本地背景圖片的引用路徑推薦使用以 ~@ 開頭的絕對路徑
• 字體文件的引用路徑推薦使用以 ~@ 開頭的絕對路徑
• 文檔說明

文章僅爲本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！