uni-app 使用vue的語法+小程序的標籤和API。
特徵
1.跨平臺更多（一套代碼，多段發行）
2.體驗更好（組件、api與維修小程序一致，兼容weex原生渲染）
3.通用技術棧（vue語法、微信小程序api、內嵌mpvue）
4.開發生態，組件更豐富（支持通過npm安裝第三方包、支持微信小程序自定義組件及sdk、兼容mpvue組件及項目、app端支持和原生混合編碼、DCloud將發佈插件市場）
一.開發規範
爲了實現多端兼容，綜合考慮編譯速度、運行性能等因素，uni-app 約定了如下開發規範：
1、頁面文件遵循 Vue 單文件組件 (SFC) 規範
2、組件標籤靠近小程序規範，詳見uni-app 組件規範
3、接口能力（JS API）靠近微信小程序規範，但需將前綴 wx 替換爲 uni，詳見uni-app接口規範
4、數據綁定及事件處理同 Vue.js 規範，同時補充了App及頁面的生命週期
5、爲兼容多端運行，建議使用flex佈局進行開發
二.目錄結構
三.生命週期
1、應用生命週期
注意
- 應用生命週期僅可在
App.vue中監聽，在其它頁面監聽無效。 - onlaunch裏進行頁面跳轉，如遇白屏報錯，請參考https://ask.dcloud.net.cn/article/35942
2、頁面生命週期
四.路由
1、路由跳轉
uni-app 有兩種路由跳轉方式：使用navigator組件跳轉、調用API（uninavigateTo(OBJECT)/uni.redirectTo(OBJECT)/uni.reLaunch(OBJECT)/uni.switchTab(OBJECT)/uni.navigateBack(OBJECT)）跳轉。
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
</navigator>
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
注意：uni.navigateTo 無法跳轉到頁面的情況下，一般是因爲該鏈接地址在tabBar裏面，所以不能用uni.navigateTo，而是uni.switchTab
五.判斷平臺
1、條件編輯
①api
// #ifdef H5 || APP-PLUS
該代碼僅出現在H5和 5+App的情況
// #endif
// #ifndef H5
該代碼不會出現在H5的情況
// #endif
②、組件
<!-- #ifdef H5-->
<view>顯示</view>
<!-- #endif-->
<!-- #ifdef MP-->
<view>微信小程序</view>
<!-- #endif-->
③、樣式
/* #ifdef H5 */
.wx-color{
color:#f00;
}
/* #endif */
view{
/* #ifdef H5 */
color:#f00;
/* #endif */
}
2、運行期判斷 運行期判斷是指代碼已經打入包中，仍然需要在運行期判斷平臺，此時可使用 uni.getSystemInfoSync().platform 判斷客戶端環境是 Android、iOS 還是小程序開發工具（在百度小程序開發工具、微信小程序開發工具、支付寶小程序開發工具中使用 uni.getSystemInfoSync().platform 返回值均爲 devtools）
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('運行Android上')
break;
case 'ios':
console.log('運行iOS上')
break;
default:
console.log('運行在開發者工具上')
break;
}
六、頁面樣式與佈局
1、尺寸單位
uni-app 支持的通用 css 單位包括 px、rpx。
750 * 元素在設計稿中的寬度 / 設計稿基準寬度(若設計稿寬度爲 750px，元素 A 在設計稿上的寬度爲 100px，那麼元素 A 在 uni-app 裏面的寬度應該設爲：750 * 100 / 750，結果爲：100rpx)
App端，在 pages.json 裏的 titleNView 或頁面裏寫的 plus api 中涉及的單位，只支持 px，不支持 rpx。早期 uni-app 提供了 upx ，目前已經推薦統一改爲 rpx 了
2、樣式導入
使用@import語句可以導入外聯樣式表，@import後跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。
@import "../../common/uni.css";
3、內聯樣式
在 uni-app 中不能使用 * 選擇器。
<view :style="{color:color}" /> <view class="normal_view" />
4、Flex佈局
爲支持跨平臺，框架建議使用Flex佈局，關於Flex佈局可以參考外部文檔A Complete Guide to Flexbox、阮一峯的flex教程等。
5、背景圖片
- 支持 base64 格式圖片。
- 支持網絡路徑圖片。
- 使用本地路徑背景圖片需注意：
- 圖片小於 40kb，
uni-app會自動將其轉化爲 base64 格式； - 圖片大於等於 40kb， 需開發者自己將其轉換爲base64格式使用，或將其挪到服務器上，從網絡地址引用。
- 本地背景圖片的引用路徑僅支持以 ~@ 開頭的絕對路徑（不支持相對路徑）
- 圖片小於 40kb，
.test2 {
background-image: url('~@/static/logo.png');
}
6、字體圖標
①支持 base64 格式字體圖標。
②支持網絡路徑字體圖標。
③網絡路徑必須加協議頭 https。
④從 http://www.iconfont.cn 上拷貝的代碼，默認是沒加協議頭的。
⑤uni-app 本地路徑圖標字體支持情況：
字體文件小於 40kb，uni-app 會自動將其轉化爲 base64 格式；
字體文件大於等於 40kb， 需開發者自己轉換，否則使用將不生效；
字體文件的引用路徑僅支持以 ~@ 開頭的絕對路徑（不支持相對路徑）。
七.全部變量
小程序有globalData機制，這套機制在uni-app裏也可以使用，全端通用。
以下是 App.vue 中定義globalData的相關配置：
<script>
export default {
globalData: {
text: 'text'
}
}
</script>
js中操作globalData的方式如下： getApp().globalData.text = 'test'
如果需要把globalData的數據綁定到頁面上，可在頁面的onShow頁面生命週期裏進行變量重賦值
八.配置
注意：
(1).uni-app自定義導航欄
pages.json裏面app-plus，目前只有app端、H5有用。小程序沒作用
2.小程序組件支持
此文檔要求開發者對各端小程序的自定義組件有一定了解，沒接觸過小程序自定義組件的可以參考：
3.api
①模態框 uni.showToast
uni.showModal({
title: '提示',
content: '這是一個模態彈窗',
success: function (res) {
if (res.confirm) {
console.log('用戶點擊確定');
} else if (res.cancel) {
console.log('用戶點擊取消');
}
}
});
九.第三方插件使用
第三方插件基本做不到跨端兼容的，所以推薦上插件市場。如果要使用可以查看官網：
十.hbuildex的誇端使用
h5：運行-運行到瀏覽器-Chrome
小程序：運行-運行到小程序模擬器-微信開發者工具
十一.問題
1.設置每個頁面的顏色，加上scoped 小程序這邊就不行了,只有去掉scoped，纔可以
2.uni.uploadFile 上傳圖片到服務器，小程序可以，但是h5不行，
應該是 小程序的默認發送格式 跟 h5 的發送格式不一樣， 後端沒做兼容處理。。暫時沒處理，待驗證
3.uni-app取消原生頭部導航欄
1.取消uni-app原生頭部導航欄（全局取消）
所有頁面都去掉：在pages.json裏
"globalStyle": {
"navigationStyle":"custom"
}
2.單頁面取消
新版小程序支持page->style配置navigationStyle爲custom =>網址 https://uniapp.dcloud.io/collocation/pages?id=style
app和h5配置titleNView爲false =>網址 https://uniapp.dcloud.io/collocation/pages?id=app-plus
如：
{
“page”:"pages/index/index",
"style":{
"navigationStyle":"custom",
"app-plus":{
"titleNView":false
}
}
}