uni app是什么？

uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架龙考，開發(fā)者編寫一套代碼蟆肆，可發(fā)布到iOS矾睦、Android晦款、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）枚冗、快應(yīng)用等多個平臺缓溅。

快速上手（vscode編輯器）

1.安裝腳手架

cnpm i -g @vue/cli

2.創(chuàng)建uniapp

• tips:dcloudio/uni-preset-vue 如果安裝不成功，可以去github下載到本地進(jìn)行安裝創(chuàng)建項(xiàng)目

vue create -p dcloudio/uni-preset-vue uniapp-demo 

3.選擇模板赁温，生成項(xiàng)目

選擇模板

項(xiàng)目目錄

tips:生成以下目錄樹坛怪，首先安裝tree, brew install tree ,執(zhí)行tree -L 3 -I "node_modules" ，具體參數(shù)可看tree文檔

├── README.md //說明
├── babel.config.js //babel 的配置文件
├── package.json //依賴模塊
├── postcss.config.js //postcss 配置文件股囊，autoprefixer插件可以自動生成瀏覽器前綴袜匿； 
├── public //發(fā)布頁面入口
│   └── index.html
├── src
│   ├── App.vue //應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽
│   ├── main.ts //Vue初始化入口文件
│   ├── manifest.json //配置應(yīng)用名稱稚疹、appid居灯、logo、版本等打包信息
│   ├── pages //頁面
│   │   └── index
│   │       └── index.vue
│   ├── pages.json //配置頁面路由内狗、導(dǎo)航條怪嫌、選項(xiàng)卡等頁面類信息
│   ├── sfc.d.ts
│   ├── static // 公共靜態(tài)資源
│   │   └── logo.png
│   └── uni.scss //通用樣式
├── tsconfig.json
└── yarn.lock

生命周期

• 應(yīng)用生命周期 tips:應(yīng)用生命周期僅可在App.vue中監(jiān)聽，在其它頁面監(jiān)聽無效柳沙。

• 頁面生命周期tips:先觸發(fā) uni-app onReady ，后觸發(fā) vue 的 mounted 建議使用uni-app的onLoad 代替 vue的 created

• 組件生命周期

頁面適配

uni-app 支持的通用 css 單位包括 px搁拙、rpx

• rpx 是由微信小程序提出一種方案秒梳，解決自適應(yīng)屏幕尺寸的尺寸單位，即響應(yīng)式 px感混，一種根據(jù)屏幕寬度自適應(yīng)的動態(tài)單位端幼。以750寬的屏幕為基準(zhǔn)，750rpx恰好為屏幕寬度弧满。屏幕變寬婆跑，rpx 實(shí)際顯示效果會等比放大，但在 App 端和 H5 端屏幕寬度達(dá)到 960px 時庭呜，默認(rèn)將按照 375px（iphone6） 的屏幕寬度進(jìn)行計(jì)算

// px換算rpx
1px = 2rpx  //舉個例子滑进，字體大小是12px,換算為rpx應(yīng)該是24rpx

標(biāo)簽與組件相關(guān)

文件配置相關(guān)

頁面跳轉(zhuǎn)及路由

uniapp 有自己一套路由管理機(jī)制犀忱，而未采用vue-route方案

uni. navigateTo({
    url:'/pages/index/index',
    success(){
        console.log('成功跳轉(zhuǎn)頁面')
    }
})

請求

uniapp 提供網(wǎng)絡(luò)請求的 api 是 uni.request，具體支持的請求方法可以參考官網(wǎng)
在各個小程序平臺運(yùn)行時董瞻，網(wǎng)絡(luò)相關(guān)的 API 在使用前需要配置域名白名單寞蚌。
不支持jsonp田巴，跨域問題需要再mainfest.json中配置跨域代理

uni.request({
    url: 'https://xxx.xxx.xxx/request', //僅為示例钠糊，并非真實(shí)接口地址。
    data: {
        text: 'demo'
    },
    method:'POST',
    header: {
        'Content-Type' : 'application/json',
    },
    success: (res) => {
        console.log(res.data);
    }
});

補(bǔ)充

• 如果不需要支持app端壹哺，則文件可以直接是.vue抄伍，如需支持則是.nvue
• uniapp支持兩種渲染引擎
  • h5,小程序走的是webview渲染
  • app走的是weex渲染【原生】
• uni-app在打包成h5時，默認(rèn)是不支持直接打開的管宵，因?yàn)榇虬鰜硎?（/xxx/xxx）這種格式截珍，可在vue.config中配置publicPath,把它配置成（./），但在uni-app中找不到這個文件的箩朴。其中官網(wǎng)有提到 點(diǎn)擊查看publPath岗喉。

 "h5" : {  
        "publicPath":"./"
    }

插件市場