目錄
【uni-app基礎】
一、事件綁定
- @click ：點擊
- @langtap ：長按
二、事件傳參
不支持自定義事件，建議id傳參。
- e.target.id ：獲取的對象包含冒泡，穿刺。
- e.currentTarget.id： 獲取的是目標對象，更加準確。
三、組件
1. scroll-view ：滾動組件，內部view，可設置橫向或者縱向滾動，用彈性盒佈局，內部view約束在一行，可實現橫向滾動導航。
2. swiper ：滑塊，內部swiper-item，用來做輪播圖。裏面放圖或者文字。
3. text ：只有這裏的纔可以複製，其他的節點不允許。
4. button： @getuserinfo，uni.getUserinfo小程序獲取用戶信息。原生open-type=”getUserInfo”
5. checkbox-group : 複選框父組件，綁定@change事件，可收集label下的checkbox選中的value值，detail中。
6. input ： 注意小程序和app的不同。
7. picker : 底部彈窗，日期省份選擇，@change事件的e.detail.value選中的下標， {{data[index]}}
8. from : 表單組件，可以獲取表單內部所有表單控件的鍵值對，name爲鍵名。 @submit.
四、導航跳轉
1. 組件navigator，open-type控制跳轉方式。聲明式跳轉。用url鏈接相對跳轉。
2. uni.navitateTo 原頁面不銷燬。裏面對象形式的{url:”地址”}
3. uni.redirectTo 重定向跳轉，原頁面銷燬，更新數據時。
4. nui.navitateBack 返回原頁面。{delta:1},返回上級一層。
5. hash,history 在manifest.json中配置。
五、傳參
1. 頁面跳轉傳參
:url=”’地址？name=’+test&age=18” onLoad:function(options){獲取傳參，動態的話，用拼接。
2.組件傳參
模擬事件傳參。
子組件，在方法中用this.$emit(名字，參數)來傳遞
父組件，綁定：名字=”方法”，方法可以接受到參數。
六、接口
封裝request請求。
- 圖片
1. uni.chooseImage({})：選擇圖片，可以得到臨時地址。res.tempFilePathsx
2. uni.previewImage({})：預覽圖片
3. uni.getImageInfo({})：得到地址後，用來圖片信息，寬高路徑類型方向。
- 上傳、下載
- uni.unloadFileRes : 上傳圖片.
- 下載後，是臨時路徑需要利用文件保存API
- 數據緩存
- uni.setStorage: 異步存儲，類似微信setData。
- uni.setStorageSync:同步存儲，小程序需要用try和catch包裹。
- get獲取，remove移除，傳入的key。
- 設備信息
- uni.getSysteminfo: 獲取設備的型號等設備信息。
- uni.makePhoneCall({phoneNumber:’110’}) 撥打電話
- uni.setClipboardData 剪切板。
- uni.addPhoneContact 可以往手機添加聯繫人，沒有獲取。
- 導航配置
- uni.setNavigationBarTitle 設置頂部導航的標題。
- uni.setNavigationBarColor 設置頂部標題欄顏色。
- 下拉刷新
- 需要在page.json中，style選項開啓enablePullDownRefresh，封裝加載數據函數。
page++，數據爲空時，return false。
uni.stopPullDownRefresh（）可以停止下拉刷新
uni.startPullDownRefresh() 調用觸發下拉刷新動畫。跟手動下拉一致。
onpulldownrefresh() 頁面監聽用戶下拉動作。小程序
- 上拉加載
- onRachBottom :function(){} 監聽滾動條到達底部。
- 跨端兼容
- 用註釋語法，包裹不同的展示模塊
小程序，#ifdef MP-WEIXIN #endif
h5+ app，#ifdef APP-PLUS #endif
- 交互提示
- uni.showLoading({}) 加載提示。uni.hideLoading()，關閉
- uni.showModel({}) 彈出模態框，有確定取消的。
- uni.showActionSheet（{}）底部彈出功能菜單。
- 登陸
- 小程序
在manifest.json底部有小程序appid需要配置。
getuserinfo，微信獲取用戶數據。
- app第三方
SDK裏面設置。微信第三方開放平臺。
- 判斷登陸
global，全局變量。小程序。
- 分享
- 微信，onShareAppMessage.支持小程序。
- 第三方，uni.share.去各個開放平臺申請。
- 引入iconfont圖標
- 把想用的圖標添加至項目，下載到本地，記事本打開iconfont.css複製粘貼到公共樣式。標籤放相應類名就可以了。
十、生命週期
1. vue的生命週期,都可以使用
初始化階段
- beforeCreate：實例初始化後，啥都沒有$route對象存在，可根據路由信息重定向操作。監視觀測之前。
- created：實例創建完成之後。數據觀測，屬性算法回調完成。掛載還沒開始$el，this.data和methods可用。開始在內存中繪製虛擬DOM
- beforeMount：掛載dom開始之前。render執行中有$el，但爲空，無法操作DOM。
- mounted：掛載之後調用。元素渲染完成，創建vm. el，依賴DOM的代碼放這。
更新顯示階段
- beforeUpdate：$vm.data更新後，虛擬DOM重新渲染之前調用，可以修改$vm.data，不會觸發附加的重渲染過程。
- updated：虛擬DOM重新渲染之後。組件和data更新，可以操作DOM，但不能修改data，不然死循環。
- activated： keep-alive激活時被調用。
- deactivated：keep-alive停用時調用。
死亡銷燬階段
- beforeDestroy：實例銷燬之前。還是可以用的，哈哈。
- destroyed：實例銷燬之後。綁定解除，監聽移除，子實例銷燬。
錯誤捕獲
- errorCaptured：捕獲子孫錯誤時調用。
- 應用級生命週期、只可在APP.vue中
- onLaunch ：初始化完成，全局只觸發一次。
- onShow：應用啓動
- onHide：應用從後臺進入前臺
- 頁面級生命週期，類似小程序。
- onLoad：頁面加載，參數爲上個頁面傳遞的。
- onShow：監聽頁面顯示，dom不一定渲染
- onReady：初次渲染完成
- onHide：頁面隱藏
- onUnload：頁面卸載
- onpullDownRefresh：監聽用戶下拉動作
- onReachBottom：監聽上拉觸底
- onShareAppMessage:點擊右上角分享
- onNavigationBarButtonTap:原生標題按鈕點擊
- onPageScroll:監聽頁面滾動，單位px。
十一、樣式
- 字體大小，2倍關係，想要15px的字體，應設置爲30upx.
- :class=”active:isActive,color:isColor”,用對象形式，控制顯示的樣式。
- ：class=”[數組，數組]”各個樣式。
- 三元運算。
- 全局的標題欄設置，在globalStyle中配置，單個在pages中配置
- 創建項目
- 用HBuilderX創建項目
- 非npm創建的項目，想要引入第三方庫vant。
當組件引入。
- 用npm
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue 名字
【uni-app之nvue】
- 支持nvue編譯配置
在manifest文件的app-plus加入
"usingComponents": true,//開啓自定義編譯模式
"renderer":"native",//weex編譯
"nvueCompiler" : "uni-app",//開啓混合渲染,支持nvue
在app-plus後面添加編譯模式支持
/* 小程序特有相關 */
"mp-weixin": {
"appid": "wxf6ff290fc07fad30",
"setting": {
"urlCheck" : false,
"es6" : true
},
"usingComponents": true
},
- 樣式差異
不支持嵌套css !!!!!!!
- 彈性盒。
nvue,默認爲彈性盒模型。默認方向爲column.
- 只有text標籤可以設置字體大小顏色。
- 佈局不能用百分比
- 只能用class選擇器
- border和background不支持簡寫
- map配置
nvue只支持高德地圖。
獲取key
key名稱：根據應用需求輸入應用的名稱，如“HBuilder.Android”；
安全碼：SHA1：應用打包時使用證書的指紋字符串（SHA1），HBuilder默認打包使用的簽名爲"BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58"
Package：應用包名，在提交App雲端打包時默認爲“io.dcloud.%APPID%”（用戶可自定義修改），如“io.dcloud.HBuilder”。
設置完成後點擊“獲取KEY”保存。
