1、關於uni-app 框架配置:(下面這個是創建uni-app項目的基本目錄結構)
pages.json 文件用來對uni-app 進行全局配置，決定頁面文件路徑，窗口樣式，原生導航欄，底部的tabbar 等等。(類似於小程序 中的 app.sjon )
example：（下面這個是包含了所有配置選項的 pages.json ）
{
"pages":[{
"path":"pages/index/index",
"style":{ // 用於設置每個頁面的狀態欄，導航條，標題，窗口背景色等
"navigationBarTitleText":"入口文件" ,//導航欄標題文字內容
"enablePullDownRefresh":true, // 開啟下拉刷新
}
},{
"path":"pages/home/home",
"style":{
"navigationBarTitleText":"首頁"
}
},{
"path":"pages/classify/classify",
"style":{
"navigationBarTitleText":"分類"
}
}],
"globalStyle":{ //用於設置應用的狀態欄，導航條，標題，窗口背景色等
"navigationBarTextStyle":"black", //導航欄標題顏色及狀態欄前景顏色，僅支持black/white
"navigationBarTitleText":"demo", // 導航欄標題文字內容
"navigationBarBackgroundColor":"#f7f7f7", // 導航欄背景顏色默認是 #f7f7f7
"backgroundColor":"#ffffff", // 窗口的背景顏色
"usingComponents":{} //引用小程序組件
},
"tabBar":{
"color":"#ffffff", // tab 上面的文字默認顏色
"selectedColor":"#00cf89", //tab 上文字選中時的顏色
"backgroundColor":"#ffffff", //tab 的背景色
"borderStyle":"black", // tabbar 上邊框的顏色，可選值 black ，white
"height":"50px", // tabbar 默認高度
"fontSize":"10px", // 文字默認大小
"iconWidth":"24px", //圖標默認寬度 等比例縮放
"spacing":"3px", // 圖標和文字的間距
"list":[{ // tab 列表
"pagePath":"pages/home/home",
"iconPath":"static/image/img.png",
"selectedIconPath":"static/image/img_on.png",
"text":"home"
},{
"pagePath":"pages/classify/classify",
"iconPath":"static/image/ify.png",
"selectedIconPath":"static/image/ify_on.png",
"text":"classify"
}],
"midButton":{ // 中間按鈕 ，僅在 list 項為偶數時有效
"width":"80px",
"height":"50px",
"text":"text",
"iconPath:"static/image/btn.png",
"iconWidth":"24px",
"backgroundImage":"static/image/btn_on.png"
}
}
}
////////////////////////////////////////////////////
mainfest.json 文件是應用的配置的文件，用於指定應用的名稱，圖標，權限等。
name://應用名稱
appid://應用標識，新建uni-app項目時，dcloud 雲端分配。
description://應用描述
versionName://版本名稱
versionCode://版本號
transformPX://是否轉換項目的px,為true，將px轉換為rpx.
////////////////////////////////////////////////////
package.json 文件增加 uni-app 擴展點，可實現自定義條件編譯平台。
配置用法：
{
"uni-app":{
"scripts":{
"custom-platform":{
"title":"自定義擴展名稱",
"BROWSER":"",//運行到目標瀏覽器
"env":{
"UNI_PLATFROM":"",//基准平台
},
"define":{
"CUSTOM-CONST":true //自定義條件編譯常量
}
}
}
}
}
///////////////////////////////////////////////////
注意 vue.config.js 這個文件，如果打包的話，是需要這個的哦，一般用於配置 webpack 等編譯選項
module.exports = function(){
publicPath:'/'
}
/////////////////////////////////////////////////
uni.scss 文件的用途是 為了方便 整體控制應用的風格。
需要在hbuilderx 里面安裝 scss 插件；使用時還要在 style節點 加上 lang="scss"
////////////////////////////////////////////////
App.vue 是 uni-app的主組件，所有頁面都是在 App.vue 下進行切換的，是頁面入口文件。
但他本身不是頁面，不能編寫視圖元素。
文件作用包括：調用 應用生命周期函數，配置全局樣式，配置全局的存儲 globalData.
應用生命周期僅在 App.vue 中監聽，在頁面監聽無效。
應用生命周期函數：
onLaunch ： 當uni-app初始化完成時觸發 （全局只觸發一次）
onShow : 當 uni-app啟動，或從后台進入前台顯示
onHide : 當 uni-app從前台進入后台
onError : 當 uni-app 報錯時觸發
在 App.vue 中定義 globalData 配置：
export default {
globalData:{
text:'text'
}
}
js 中操作 globalData 的方式如下 ： getApp().globalData.text = 'test';
在應用 onLaunch 時，getApp 對象還未獲取，暫時可以使用 this.$scope.globalData 獲取globalData.
全局樣式，在 App.vue 中，引用共同的css文件方式： @import '../../common/common.css';
//////////////////////////////////////////////
main.js 是uni-app 的入口文件，主要作用是初始化 vue 實例，定義全局組件，使用需要的插件如vuex。
首先引入了 vue庫和App.vue ，創建了一個vue實例，並且掛載vue實例。
import Vue from 'vue';
import App from './App';
import pageHead from './components/page-head.vue';//全局引用page-head組件
Vue.config.productionTip = false;
Vue.component('page-head',pageHead);//全局注冊 page-head 組件，每個頁面將可以直接使用該組件
App.mpType = 'app';
const app = new Vue({
...App
})
app.$mount();//掛載Vue 實例
//////////////////////////////////////////////////
提示：
在 hbuilderx 中 ，輸入 clog 可以直接輸出 console.log();
輸入 clogv 可直接輸出 console.log(":"+ );
2、頁面生命周期
onLoad(){} 監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型object，用於頁面傳參。
onShow(){} 監聽頁面顯示。頁面每次出現在屏幕上都觸發，包括從下級頁面點返回露出當前頁面。
onReady(){} 監聽頁面初次渲染完成，注意如果渲染速度快，會在頁面進入動畫完成前觸發。
onHide(){} 監聽頁面隱藏
onUnload(){} 監聽頁面卸載
onResize(){} 監聽窗口尺寸變化 （app,微信小程序）
onPullDownRefresh(){} 監聽用戶下拉動作，一般用於下拉刷新
onReachBottom(){} 頁面滾動到底部的事件不是scroll-view，常用語下拉下一頁數據
onBackPress(){} 監聽頁面返回，返回 event = {from:backbutton,navigateBack},backbutton 表示來源是左上角返回按鈕，navigateBack表示來源是 uni.navigateBack
3、組件生命周期
//uni-app 組件支持的生命周期與 vue的相同。
beforeCreate(){} 在實例初始化之后被調用
created(){} 在實例創建完成后被立即調用
beforeMount(){} 在掛載開始之前被調用
mounted(){} 掛載到實例上去之后調用
beforeUpdate(){} 數據更新時調用
updated(){} 由於數據更改導致的虛擬dom重新渲染和打補丁，在這之后會調用該鈎子
beforeDestroy(){} 實例銷毀之前調用
destroyed(){} vue 實例銷毀后調用，調用后，vue實例指示的所有東西都會解綁定，所有的事件監聽器都會被移除，所有的子實例也會被銷毀。
4、頁面
getApp() 函數用於獲取當前應用實例，一般用於獲取 globalData。
實例：
const app = getApp();
console.log(app.globalData);
getCurrentPages()函數用於獲取當前頁面棧的實例，以數組的形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面。
getCurrentPages() 可以得到所有頁面對象，然后根據數組，可以取指定的頁面 webview 對象。
var pages = getCurrentPages();
var page = pages[pages.length-1];
var currentWebview = page.$getAppWebview();
consol.elog(currentWebview.id);//獲取當前 webview 的id值。
注意：
navigateTo,redirectTo 只能打開非tabBar 頁面。
switchTab 只能打開 tabBar 頁面。
reLaunch 可以打開任意頁面。
5、頁面通訊
uni.$emit(eventName,object);//事件名，觸發事件攜帶的附加參數 觸發全局的自定事件。附加參數都會傳給監聽器回調。
uni.$emit('update',{msg:'頁面更新'})
uni.$on(eventName,callback); //監聽全局的自定義事件，事件可以由 uni.$emit觸發，回調函數會接收所有傳入事件觸發函數的額外參數
uni.$on('update',function(data){
console.log('監聽到事件來自 update ，攜帶參數為 ' +data.msg)
})
uni.$once(eventName,callback); // 監聽全局的自定義事件。事件可以由 uni.$emit觸發，但是只觸發一次，在第一次觸發之后移除監聽器。
uni.$once('update',function(data){
console.log('監聽 update 事件'+data.msg)
})
uni.$off([eventName,callback]) 移除全局自定義事件監聽器
uni.$off('update',function(data){
})
注意： 使用時，要及時銷毀事件監聽，比如，頁面 onLoad 里面uni.$on 注冊監聽，onUnload 里面 uni.$off 移除。 或一次性的事件，直接使用 uni.$once 監聽 。
6、網絡請求
//對於 get方法，會將數據轉換為 query string 。 例如{ name:'name',age:18} 轉換后的結果是 name=name&age=18
// 對於 post方法 且 header['content-type'] 為 application/json 的數據，會進行 JSON 序列化。
// 對於 post 方法 且 header['content-type'] 為 application/x-www-form-urlencoded 的數據，會將數據轉換為 query string 。
example：
uni.request({
url:'',//接口地址,
data:{ // 參數
name:'name'
},
method:'GET',
header:{
'content-type':'applicaiton/json' //自定義請求頭信息
},
success:(res)=>{
console.log(res,'success')
},
fail:(err)=>{
console.log(err,'fail')
}
})
7、上傳，下載文件，圖片類
//將本地資源上傳到開發者服務器，客戶端發起一個post請求，其中 content-type 為 multipart/form-data 。
uni.chooseImage({
count:1,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:(chooseImageRes)=>{
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.uploadFile({
url:'',//服務器地址
filePath:tempFilePaths[0],
name:'file',
formData:{
'user':'test'
},
success:(uploadFileRes)=>{
console.log(uploadFileRes)
}
})
}
})
//下載文件資源到本地，客戶端發起get請求，返回文件的本地臨時路徑
uni.downloadFile({
url:'',//接口地址
success:(res)=>{
console.log(res)
}
})
還有很多 api 要到官網看哦。
最近在用uni-app 開發，說一下自己的創建項目流程，以及打了一個測試demo版瞅瞅的過程
編輯器還是 選用的 HBuilderX 噠，左上角有個文件，點擊文件，選擇新建文件，再選擇項目，會彈出下面這個框，然后選擇uni-app哦。
填寫項目名稱，點擊創建，至此，這個項目就創建成功了。
然后再該項目中新建一個 vue.config.json 文件，內容照1里面配置即可。
在HBuilderX 標題欄會看到一個 發行 ，點擊 會出現一個 原生 App-打包，選擇后，會彈出下面這個框，選擇紅框標記處，最后點擊打包按鈕即可。
注意： 打包成功后，會有一個地址下載該應用，但是只能下載5次哦。
具體參考官網文檔 : https://uniapp.dcloud.io/collocation/pages