---【uni-app】:
是一個使用vue。js開發所有前端應用的框架，開發者編寫一套代碼，可發布到ios,android,H5,以及各種小程序，
（微信/支付寶/百度/頭條/QQ/釘釘）等多個平台
---【環境搭建】：
1，安裝APP開發版HBuilderX
2，安裝微信開發者工具
---【使用HBuilderX初始化項目】：
1，點擊HBuilderX菜單欄文件》項目》新建》
2，選擇uni-app填寫項目名稱，項目創建的目錄
---【項目的運行】 可以打包成H5網頁，安卓/IOS應用，和各種小程序
1，點擊運行，選擇運行在瀏覽器
2，點擊運行，運行在小程序》運行在微信開發者工具
-第一次運行在微信開發者工具時需要注意兩個問題，
1，第一次運行會彈出一個框需要填寫微信開發者工具的路徑
2，右鍵桌面的微信開着工具，打開文件夾所在位置，復制路徑，然后把路徑粘貼到彈出框里
設置完路徑打開微信小程序可能會報錯，打不開，須在微信開發者工具里進行設置
1，點擊上方菜單的設置》安全設置》端口號，選擇開啟
3，運行在安卓手機/ios手機，點擊運行》運行在手機或者模擬器，前提是手機用數據線連接電腦
---【項目目錄介紹以及開發規范簡介】：
1，page文件夾，存放頁面的文件夾
2，static文件夾，存放靜態資源的文件夾 /圖片/字體圖標，等
3，unpackage>dist 存放最終打包輸出的文件
4，App.vue 文件 是項目的根組件 是頁面的入口文件，可調用應用的生命周期函數
5，main.js 文件 是項目的入口文件 ，項目加載首先會加載main.js
6，manifest.json 文件 用來配置應用的一些打包的東西
7，pages.json 文件 用來設置整個項目的頁面的存放路徑，以及窗口的外觀
8，uni.scss 文件 常用的樣式變量
開發規范：
1，頁面文件遵循vue中文件組件 ，后綴為vue
2，組件標簽靠近小程序規范 詳見官方文檔
3，接口能力，靠近微信小程序規范，但需前綴wx替換為uni 詳見官方文檔
4，數據綁定及事件處理同vue.js規范，同時補充了app及頁面的生命周期
5，為兼容多端運行，建議使用flex布局 進行開發
---【全局外觀的樣式，配置】：pages.json
1,'globalStyle":{
"navigationBarBackgroundColor":"#7FFF00" //設置頂部導航欄的背景色 十六進制
"navigationBarTextStyle":"black" //設置頂部導航欄標題的文字顏色 僅支持black/white 字符串
"navigationBarTitleText":"xxxxxx" //自定義標題的文字
"enablePullDownRefresh":true //是否開啟全局下拉刷新 此時向下拉的部分，會出現背景色通過下邊的屬性可設置背景的顏色
"backgroundColor":"#7CCD7C" //設置下拉出來的背景色， 十六進制
"backgroundTextStyle":"dark" //設置下拉loading的樣式： 僅支持dark/light 暗色和亮色的loading
"onReachBottomDistance":50 //頁面上拉觸底事件觸發時距頁面底部的距離，僅支持px
}
---【創建新頁面和頁面的配置】：pages.json
1，右鍵page文件夾，新建cart文件夾，在cart文件夾中新建cart.vue頁面
2，在全局pages.json 文件中加入頁面的路徑，"pages":[{"path":pages/cart/cart.vue}] pages數組的第一項為默認展示頁
頁面的配置：style 配置局部頁面的獨有外觀樣式
“pages”:[
{
"path":"pages/cart/cart.vue",
"style":{
"navigationBarTitleText":"xxxxxx" //自定義標題的文字,style子頁面配置和全局的配置一樣，會覆蓋全局外觀配置的樣式
"h5":{ //h5頁面單獨設置特有的樣式 //還有微信小程序，百度，之類的單獨設置的樣式 請查看官方文檔
"pullToRefresh":{ //下拉刷新的loading 顏色
"color":"#7D26CD"
}
}
}
}
]
---【配置基本的tabbar】：在pages.json 文件里配置tabbar
"tabBar":{
"list":[ //是一個數組，數組里以對象方式放的是每一個tab
{
"text":"首頁", //tab的文字
"pagePath":"pages/index/index", //點擊跳轉的路徑
"iconPath":"static/tabs/home.xxx" , //設置默認的圖標
"aslectedIconPath":"static/tabs/home2.xxx" 設置選中時的圖標
}
],
"color":"#xxxxx" , //tab上的文字默認顏色 和list同級
"selectedColor":"#xxxxxx" //tab上的文字選中時的顏色
“backgroundColor”:"#xxxxx" //tab的背景色
"position":"top" //移到頁面上方切換欄， 圖標會消失
}
---【condition啟動模式配置】：在pages.json
"condition":{ //配完之后在開發者工具上 點擊普通編譯，選擇name=詳情頁，就跳轉詳情頁了
"current":0 //當前激活的模式，list節點的索引值，， 選擇的是list的【0】
"list":[
{
"name":"詳情頁",
"path":"pages/xxx/xxx", //路徑
"query":"id=80" //參數
}
]
}
---【uni-app 組件】：
1，<text></text> 相當於spann標簽
=selectable 布爾值 表示可以選中復制文字
=space="emsp" 顯示連續空格 ensp中文子一半/emsp中文字符大小/nbsp 根據字體設置的空格大小
2，<view></view> 相當於div
=hover-class="xxx" .xxx{background:red} //按下去會加入的樣式的樣式， 背景變紅
=hover-stop-propagetion //加上這個屬性可阻止事件冒泡
=:hover-start-time="2000" //點擊之后過2秒觸發事件
=:hover-stay-time = "2000" //點擊離開之后，過兩秒樣式才消失
3，<button></button> 按鈕組件
=<button size="mini">按鈕</button> 小號按鈕，默認是沾滿
=<button type="primary">按鈕</button> 藍色按鈕
=<button plain></button> 按鈕背景色透明
=<button disabled></button> 按鈕禁止點擊
=<button loading></button> 旋轉的圓圈
4，<image></image> 圖片組件
=<image src="xxxxxxx"></image> 圖片默認寬高為 320/240px
=<image mode="aspectFit"></image> 保持縱橫比例，可以完整的顯示出來
=<image mode="aspectFill"></image> 外層容器，的寬度貼滿，高度剪掉了
5，原生小程序的組件也可以用。例如輪播圖等
---【樣式的學習】：
=使用@import url（） 來導入外聯樣式表 page相當於body節點
=定義在App.vue中的樣式為全局樣式，在pages目錄下的vue文件中定義的樣式為局部樣式，並會覆蓋App.vue中相同的選擇器
---【使用字體圖標】：
1，把阿里字體的文件夾放入靜態文件夾中、在iconfont.css文件中把url里的路徑改成前綴是 -@/static/fonts
2，在app.vue的樣式中引入inconfont.css /// @import url (''./static/fonts/iconfonts.css)
--[使用sass]:安裝插件
1，在上方菜單的工具》插件安裝》選擇sass編譯 》安裝 //安裝成功直接保存 ，直接成功直接使用
---【uni-app 的數據綁定】：和vue 一摸一樣，把數據定義在data中
export default {
data（）{
return{
msg:"hello-nui"
}
}
}
---【插值表達式 v-bind/基本的運算，三元運算符，v-for】 和vue一樣
---【綁定事件，事件對象event，方法傳參數和事件對象(20,$event)】和vue一樣
---【關於鍵盤事件的問題】：e.target.keyCode進行響應但是不能響應回車。
---【input 回車事件響應】<input type="text" v-model="str" @confirm="ass"/> 要使用confirm
---【應用的生命周期函數】： 寫在APP。vue 入口跟組件里定義
1，onLaunch 應用打開 初始化完成時觸發，只觸發一次 首先
2，onShow 應用啟動，應用顯示出來了 或從后台進入前台顯示 然后 =》會觸發多次
3, onHide 從前台進入后台觸發 應用隱藏了
---【頁面的生命周期函數】：
1，onLoad 監聽頁面加載 可以拿到上個頁面傳遞過來的參數（option） 首先
2，onShow 監聽頁面顯示 然后
3，onReady 監聽頁面初次渲染完成 其次
4，onHide 監聽頁面隱藏
5，onUnload 監聽頁面卸載
6，onPullDownRefresh 監聽用戶下拉動作頁面需開啟下拉刷新功能，用於下拉刷新》處理完數據刷新后，uni.stopPullDownRefresh（）方法可停止下拉刷新
6-1：點擊事件觸發下拉刷新，在事件中，調用 uni.startPullDownRefresh（）方法來開啟下拉刷新
7，onReachBottom 頁面滾動到底部觸發，配合onReachBottomDistance可設置距離底部的距離 常用於上拉加載下一頁數據
---【發送get請求】：uni.request（object）
1，uni.request(url:'xxxxx',sussers(res){console.log(res)})
培訓講的方法，nui.request({url:"xxxx"}).then（(res)=>{console.log(res)}）
---【設置分包】：
在page.json 里使用subPackages 設置分包
---【數據緩存】：
1，uni.setStorage 設置緩存 uni.setStorage（{key:"id",data:80,succsee(){存成功的回調函數} }）
let idd = uni.setStorageSync（id） 同步獲取數據的方法
2，uni.getStorage 獲取緩存 uni.getStorage（{key:"id",succsee(){獲取成功的回調函數} }）
3, uni.removeStorage 刪除緩存 uni.removeStorage（{key:"id",succsee(){刪除成功的回調函數} }）
---【圖片的上傳和預覽】：uni.chooseImage（object） 從本地相冊選擇圖片或使用相機拍照 具體可參考官文的媒體模塊
<button @click = "chooseImg">上傳圖片</button>
methods:{
chooseImg(){
uni.chooseImage（{
count:5， //限制上傳圖片的數量 在瀏覽器限制不了個數
success：res=>{上傳成功的回調函數 ---》this.imageArr = res.temFilePaths 可拿到上傳成功的圖片路徑}
}）
} }
---【圖片的預覽】：uni.previewImage（object） 點擊圖片會 會顯示點擊的圖片進行預覽
《image @click = "previewImag"> 給點擊的圖片綁定點擊事件
previewImg(current){ //點擊圖片傳過來圖片的地址
uni.previewImage（{
current:current，
urls:this.imgArr //所有的圖片預覽
loop:true //可循環預覽 在APP上可以
}）
}
---【條件編譯 跨端兼容】：
跨端兼容：
按照uni-app規范開發即可保證多平台兼容，大部分業務均可直接滿足
但是：1，大量寫if else 會造成性能低下 2，編譯到不同工程后二次修改，會讓后續升級變得很麻煩
uni.app提供了條件編譯手段，可在一個工程里優雅的完成平台個性化實現
條件編譯： 具體可參考 官文 的 條件注釋實現跨端兼容
是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里的代碼編譯到不同平台
寫法是 以 #ifdef加平台標志 開頭 以#endif 結尾
<!-- #ifdef H5-->
<view>我希望旨在H5頁面中看見</view>
<!-- #endif -->
---【導航跳轉 和傳參】：聲明式跳轉 // 編程式跳轉
聲明式跳轉：navigator
<navigaor url="/pages/detail/detail?id=80&age = 19">跳轉至詳情頁</navigator> 點擊跳轉到了詳情頁，帶返回箭頭 不能跳轉到tab 組件的頁面
在生命周期函數里拿到參數 onLoad(options){ console.log(option)} 拿到傳來的參數
<navigaor url="/pages/detail/detail" open-type = "redirect">跳轉至詳情頁</navigator> 點擊跳轉到了詳情頁當前頁面關閉，不帶返回箭頭 不能跳轉到tab 組件的頁面
<navigaor url="/pages/message/message" open-type = "switchTab">跳轉至信息頁</navigator> 跳信息頁，時候tab組件上的頁面
編程式跳轉：
<button @click = "goDetail"> 跳轉至詳情頁</button>
goDetail(){
uni.navigateTo（{
url:"/pages/detail/detail?id=20" //點擊挑戰到了詳情頁 帶返回箭頭 普通頁面 不能跳轉tab組件頁面
}）
}
goDetail(){
uni.switchTab（{
url:"/pages/message/message" //點擊挑戰到tab頁面，關閉其他非tab頁面
}）
}
goDetail(){
uni.redirectTo（{
url:"/pages/message/message" //點擊挑戰到詳情頁，關閉當前頁面
}）
}
---【組件的使用創建】：
和vue一樣，其他組件通過 importd來導入，然后注冊組件
1，import login from "@/components/text.vue"
2,conpinte:{ login }
---【組件的生命周期函數 】：和vue的一樣
---【組件之間的通訊方式】：
1，父傳子 綁定數據 props 來接受數據 和vue一樣
2，子傳父，$emit 自定義事件，來傳值 和vue 一樣
---需求，兄弟組件傳值 點擊a組件的按鈕，修改b組件的數據
》b組件
created(){
uni.$on（'updateNum',num=>{ 通過，unni.$on 注冊一個全局事件，使用Num接受傳來的參數
this.num +=num
}）
}
》a組件
<button @click=addNum"">按你牛</button>
methods:{
addNum(){
uni.$emit（"updateNum",10）
}
}
---【擴展組件uni-ui的使用】 詳情官文 nui-ui
：是跨端ui庫，基於vue組件的，flex布局的，無dom的跨全段ui庫，不包括基礎組件，是基礎組件的補充
---【uni-ui的特點】：
1，高性能 是小程序和混合app領域，uni-ui是性能的標桿
2，自動差量更新數據
---【使用】：
1，選擇組件 沒登陸要登錄一下 使用HBuilderX導入插件
2，使用import 來導入 components文件夾里的組件。然后掛載
3，使用方式和vue一樣
rpx
推薦設計稿使用ipone的375px尺寸等於750rpx
設計稿得px轉為rpx只需要乘2就可以了