uniapp基礎(chǔ)知識(shí)點(diǎn)掌握以及面試題整理
1.uniapp優(yōu)缺點(diǎn)
優(yōu)點(diǎn):
a. 一套代碼可以生成多端
b. 學(xué)習(xí)成本低,語法是vue的,組件是小程序的
c. 拓展能力強(qiáng)
d. 使用HBuilderX開發(fā),支持vue語法
e. 突破了系統(tǒng)對(duì)H5調(diào)用原生能力的限制
缺點(diǎn):
a. 問世時(shí)間短,很多地方不完善
b. 社區(qū)不大
c. 官方對(duì)問題的反饋不及時(shí)
d. 在Android平臺(tái)上比微信小程序和iOS差
e. 文件命名受限
2. uniapp的配置文件、入口文件、主組件、頁面管理部分
pages.json
配置文件,全局頁面路徑配置,應(yīng)用的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色設(shè)置等
main.js
入口文件,主要作用是初始化vue實(shí)例、定義全局組件、使用需要的插件如 vuex,注意uniapp無法使用vue-router,路由須在pages.json中進(jìn)行配置。如果開發(fā)者堅(jiān)持使用vue-router,可以在插件市場(chǎng)找到轉(zhuǎn)換插件。
App.vue
是uni-app的主組件,所有頁面都是在App.vue下進(jìn)行切換的,是頁面入口文件。但App.vue本身不是頁面,這里不能編寫視圖元素。除此之外,應(yīng)用生命周期僅可在App.vue中監(jiān)聽,在頁面監(jiān)聽無效。
pages
頁面管理部分用于存放頁面或者組件
manifest.json
文件是應(yīng)用的配置文件,用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等。HBuilderX 創(chuàng)建的工程此文件在根目錄,CLI 創(chuàng)建的工程此文件在 src 目錄。
package.json
配置擴(kuò)展,詳情內(nèi)容請(qǐng)見官網(wǎng)描述package.json概述
3.基本開發(fā)流程
新建一個(gè)工程項(xiàng)目,如下所示,我們可以直接使用一些模板進(jìn)行開發(fā),這些模板會(huì)有一些基礎(chǔ)的頁面和配置,能夠讓我們減少前期的配置直接上手開發(fā)
4. 安裝插件
我們可以從工具里面—>插件安裝—>安裝新插件—>前往插件市場(chǎng)安裝來安裝自己所需要的插件和組件,能夠快速提高開發(fā)效率
5.tab頁面及二級(jí)頁面路徑配置
pages.json
pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁,參考官網(wǎng):uni-app官網(wǎng)
{ //頁面路徑配置,未設(shè)置root則path默認(rèn)完整路徑 "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁", "enablePullDownRefresh": true } } ], //二級(jí)頁面,設(shè)置了root根文件路徑,則path可以簡寫 "subPackages": [{ "root": "pages/test-sub", "pages": [ { "path": "login/index", "style": { "navigationBarTitleText": "登錄" } } ] }], //全局樣式配置 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "tabBar": { //tab樣式和選中后效果 "color": "#7A7E83", "selectedColor": "#2BD3DE", "borderStyle": "black", "backgroundColor": "#F8F8F8", //tab頁面配置,包括圖標(biāo)路徑,tab名稱、路徑 "list": [{ "pagePath": "pages/index/index", "iconPath": "static/農(nóng)場(chǎng)_24種子.png", "selectedIconPath": "static/農(nóng)場(chǎng)_31花草.png", "text": "首頁" }, { "pagePath": "pages/user/index", "iconPath": "static/農(nóng)場(chǎng)_36稻草人.png", "selectedIconPath": "static/農(nóng)場(chǎng)_28蜜蜂.png", "text": "個(gè)人中心" }, { "pagePath": "pages/test/index", "iconPath": "static/農(nóng)場(chǎng)_36稻草人.png", "selectedIconPath": "static/農(nóng)場(chǎng)_28蜜蜂.png", "text": "測(cè)試頁面" } ] } }
6.頁面設(shè)計(jì)開發(fā)
基礎(chǔ)設(shè)置完成后就可以直接在頁面上開發(fā)了,uniapp的語法承襲vue,熟悉vue的同學(xué)可以快速的上手
7.vue , 微信小程序 , uni-app屬性的綁定
vue和uni-app動(dòng)態(tài)綁定一個(gè)變量的值為元素的某個(gè)屬性的時(shí)候,會(huì)在屬性前面加上冒號(hào)":";
小程序綁定某個(gè)變量的值為元素屬性時(shí),會(huì)用兩個(gè)大括號(hào){{}}括起來,如果不加括號(hào),為被認(rèn)為是字符串。
8.jQuery、vue、小程序、uni-app中的本地?cái)?shù)據(jù)存儲(chǔ)和接收
jQuery: 存:$.cookie('key','value') ?。?.cookie('key') vue: 存儲(chǔ):localstorage.setItem(‘key',‘value') 接收:localstorage.getItem(‘key') 微信小程序: 存儲(chǔ):通過wx.setStorage/wx.setStorageSync寫數(shù)據(jù)到緩存 接收:通過wx.getStorage/wx.getStorageSync讀取本地緩存, uni-app: 存儲(chǔ):uni.setStorage({key:“屬性名”,data:“值”}) //異步 uni.setStorageSync(KEY,DATA) //同步 接收:uni.getStorage({key:“屬性名”,success(res){res.data}}) //異步 uni.getStorageSync(KEY) //同步 移除:uni.removeStorage(OBJECT) //從本地緩存中異步移除指定 key。 uni.removeStorageSync(KEY) //從本地緩存中同步移除指定 key。 清除:uni.clearStorage() //清理本地?cái)?shù)據(jù)緩存。 uni.clearStorageSync() //同步清理本地?cái)?shù)據(jù)緩存。
9.頁面調(diào)用接口
getApp() 函數(shù) 用于獲取當(dāng)前應(yīng)用實(shí)例,一般用于獲取globalData
getCurrentPages() 函數(shù) 用于獲取當(dāng)前頁面棧的實(shí)例,以數(shù)組形式按棧的順序給出,第一個(gè)元素為首頁,最后一個(gè)元素為當(dāng)前頁面。
uni.e m i t ( e v e n t N a m e , O B J E C T ) 和 u n i . emit(eventName,OBJECT)和uni.emit(eventName,OBJECT)和uni.on(eventName,callback) :觸發(fā)和監(jiān)聽全局的自定義事件
uni.o n c e ( e v e n t N a m e , c a l l b a c k ) :監(jiān)聽全局的自定義事件。事件可以由 u n i . once(eventName,callback) :監(jiān)聽全局的自定義事件。事件可以由 uni.once(eventName,callback):監(jiān)聽全局的自定義事件。事件可以由uni.emit 觸發(fā),但是只觸發(fā)一次,在第一次觸發(fā)之后移除監(jiān)聽器。
uni.$off([eventName, callback]):移除全局自定義事件監(jiān)聽器。
注意:uni.e m i t 、 u n i . emit、 uni.emit、uni.on 、 uni.o n c e 、 u n i . once 、uni.once、uni.off 觸發(fā)的事件都是 App 全局級(jí)別的,跨任意組件,頁面,nvue,vue 等
10.全局變量globalData
//app.vue <script> export default { globalData: { msg: 'hello world' } } </script> //在其他頁面調(diào)用/修改全局變量 getApp().globalData.msg= 'hello world'
11. vue,小程序,uni-app的生命周期
vue:
beforeCreate(創(chuàng)建前)
created(創(chuàng)建后)
beforeMount(載入前,掛載)
mounted(載入后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(銷毀前)
destroyed(銷毀后)
小程序/uni-app:
1. onLoad:首次進(jìn)入頁面加載時(shí)觸發(fā),可以在 onLoad 的參數(shù)中獲取打開當(dāng)前頁面路徑中的參數(shù)。
2. onShow:加載完成后、后臺(tái)切到前臺(tái)或重新進(jìn)入頁面時(shí)觸發(fā)
3. onReady:頁面首次渲染完成時(shí)觸發(fā)
4. onHide:從前臺(tái)切到后臺(tái)或進(jìn)入其他頁面觸發(fā)
5. onUnload:頁面卸載時(shí)觸發(fā)
6. onPullDownRefresh:監(jiān)聽用戶下拉動(dòng)作
7. onReachBottom:頁面上拉觸底事件的處理函數(shù)
8. onShareAppMessage:用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)
12.unaipp中組件生命周期:
13.路由與頁面跳轉(zhuǎn)
uniapp的頁面跳轉(zhuǎn)和小程序是一樣的,都是跳轉(zhuǎn)配置好的頁面路徑, 并且tab頁面也是需要使用switchTab才能實(shí)現(xiàn)跳轉(zhuǎn),總體上和小程序保持一致,對(duì)于熟練小程序的朋友上手沒有難度,反之,當(dāng)你習(xí)慣了uniapp的頁面切換組件后上手小程序也很快。
14.跨端適配—條件編譯
開發(fā)者按照 uni-app 規(guī)范開發(fā)即可保證多平臺(tái)兼容,大部分業(yè)務(wù)均可直接滿足。但每個(gè)平臺(tái)有自己的一些特性,因此會(huì)存在一些無法跨平臺(tái)的情況。因此就有了條件編譯這個(gè)模式,不僅是js邏輯代碼,template和css樣式都可以設(shè)置成在某個(gè)環(huán)境中生效,在其他環(huán)境不生效
//template <!-- #ifdef MP-WEIXIN --> <!-- 只在小程序中生效 --> <view>我是微信小程序</view> <!-- #endif --> <!-- #ifdef APP-PLUS --> <!-- 只在 app 中生效 --> <view>我是 app </view> <!-- #endif --> //js // #ifndef H5 // 表示只有 h5 不使用這個(gè) api uni.createAnimation(OBJECT) // #endif //css /* #ifdef MP-WEIXIN */ /* 只在小程序中生效 */ .header { color:red } /* #endif */
更多詳細(xì)信息及平臺(tái)適配請(qǐng)看官方文檔
15.uniapp上傳文件時(shí)使用的api
//選擇文件 uni.chooseFile({ count: 6, //默認(rèn)100 extension:['.zip','.doc'], success: function (res) { console.log(JSON.stringify(res.tempFilePaths)); } }); // 選擇圖片文件 uni.chooseFile({ count: 10, type: 'image', success (res) { // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 const tempFilePaths = res.tempFiles } })
16.簡述 rpx、px、em、rem、%、vh、vw的區(qū)別
rpx 相當(dāng)于把屏幕寬度分為750份,1份就是1rpx
px 絕對(duì)單位,頁面按精確像素展示
em 相對(duì)單位,相對(duì)于它的父節(jié)點(diǎn)字體進(jìn)行計(jì)算
rem 相對(duì)單位,相對(duì)根節(jié)點(diǎn)html的字體大小來計(jì)算
% 一般來說就是相對(duì)于父元素
vh 視窗高度,1vh等于視窗高度的1%
vw 視窗寬度,1vw等于視窗寬度的1%
17.jq、vue、uni-app、小程序的頁面?zhèn)鲄⒎绞絽^(qū)別
1、 jq傳參
通過url拼接參數(shù)進(jìn)行傳參。
2、 vue傳參
一、 vue可以通過標(biāo)簽router-link跳轉(zhuǎn)傳參,通過path+路徑,query+參數(shù)
二、 也可以通過事件里的this.$router.push({})跳轉(zhuǎn)傳參
3、 小程序/uniapp傳參
通過跳轉(zhuǎn)路徑后面拼接參數(shù)來進(jìn)行跳轉(zhuǎn)傳參
//示例 // navigate.vue頁面接受參數(shù) onLoad: function (option) { const item = JSON.parse(decodeURIComponent(option.item)); }
或者我們也可以自己封裝一個(gè)解析攜帶參數(shù)數(shù)據(jù)的函數(shù),然后在所需的頁面引用即可,詳細(xì)應(yīng)用及思想可以看我另一篇文章,分享了自己對(duì)于入?yún)⑻幚淼暮瘮?shù)
自行封裝入?yún)@取函數(shù)
18.組件間通信
uniapp的組件通信基本上與vue框架下組件通信是一致,如果是學(xué)習(xí)過vue框架的同學(xué),那么基本上沒有任何阻礙,能夠快速的在uniapp上實(shí)現(xiàn)組件間通信,還有些許疑惑的同學(xué)可以看我之前整理的這篇短文回顧下組件間通信方法集
19.uni.request封裝
詳情可以看我之前寫的封裝uniapp request 封裝及使用思想
20.uniapp實(shí)現(xiàn)下拉刷新
實(shí)現(xiàn)下拉刷新需要用到uni.onPullDownRefresh和uni.stopPullDownRefresh這個(gè)兩個(gè)函數(shù),函數(shù)與生命周期同等級(jí)可以監(jiān)聽頁面下拉動(dòng)作
//1.在pages.json文件里找到需要下拉刷新的頁面pages節(jié)點(diǎn),并在 style 選項(xiàng)中開啟enablePullDownRefresh。 { "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁", "enablePullDownRefresh": true } }, //2.在頁面中調(diào)用監(jiān)聽下拉事件函數(shù) onPullDownRefresh() { //do some this.Fn() } //3.獲取數(shù)據(jù)完畢后調(diào)用停止下拉刷新動(dòng)畫 Fn(){ //可以在調(diào)用的函數(shù)中獲取接口數(shù)據(jù)或則操作其他事項(xiàng) //調(diào)取完畢后停止下拉刷新動(dòng)畫 uni.stopPullDownRefresh(); }
21.uniapp實(shí)現(xiàn)上拉加載
uniapp中的上拉加載是通過onReachBottom()這個(gè)生命周期函數(shù)實(shí)現(xiàn),當(dāng)下拉觸底時(shí)就會(huì)觸發(fā)。我們可以在此函數(shù)內(nèi)調(diào)用分頁接口請(qǐng)求數(shù)據(jù),用以獲取更多的數(shù)據(jù)
onReachBottom() { let data = this.data; let pageNum = data.pageNum; let pageStatus = 'loadmore'; if (data.pageNum * data.pageSize >= data.pageTotal) { pageStatus = 'nomore'; } if (pageStatus === 'loadmore') { pageNum++; pageStatus = 'loading'; this.setData({ pageNum: pageNum }, () => { this.getDataList(); }) } this.setData({pageStatus}) }, /*我司的做法是用total來判斷是否還有數(shù)據(jù)可以請(qǐng)求,還有的話就繼續(xù)請(qǐng)求接口數(shù)據(jù),并更新狀態(tài)及分頁數(shù)據(jù);
22.scroll-view吸頂問題
問題:
scroll-view 是常會(huì)用到的一個(gè)標(biāo)簽,我們可以使用 position:sticky 加一個(gè)邊界條件例如top:0
屬性實(shí)現(xiàn)一個(gè)粘性布局,在容器滾動(dòng)的時(shí)候,如果我們的頂部標(biāo)簽欄觸碰到了頂部就不會(huì)再滾動(dòng)了,而是固定在頂部。但是在小程序中如果你在scroll-view元素中直接為子元素使用sticky屬性,你給予sticky的元素在到達(dá)父元素的底部時(shí)會(huì)失效。
解決:
在scroll-view元素中,再增加一層view元素,然后在再將使用了sticky屬性的子元素放入view中,就可以實(shí)現(xiàn)粘貼在某個(gè)位置的效果了
23.ios輸入框字體移動(dòng)bug
問題:
在IOS端有時(shí),當(dāng)輸入框在輸入后沒有點(diǎn)擊其他位置使輸入框失焦的話,如果滾動(dòng)窗口內(nèi)部的字體也會(huì)跟著滾動(dòng)
解決:
// 更改后的輸入框, //1、嘗試了下,發(fā)現(xiàn)textarea不會(huì)和input一樣出現(xiàn)字體隨著頁面滾動(dòng)的情況,這是一個(gè)兼容方案 //2、還有個(gè)不優(yōu)雅的方案是輸入完成后使用其他事件讓其失焦或者disable,例如彈窗或者彈出層出來的時(shí)候可以暫時(shí)讓input禁止,然后彈窗交互完成后再放開 <textarea fixed="true" auto-height="true" ></textarea>
/** * 設(shè)置拼接后的參數(shù) * @param {String} data 參數(shù) * @return {String} */ setPageParam(data) { let url = ''; for (let k in data) { let value = data[k] !== undefined ? data[k] : ''; if (typeof value === 'object') { value = JSON.stringify(value) } url += '&' + k + '=' + encodeURIComponent(value); } url = url ? url.substring(1) : ''; return url }, /** * 跳轉(zhuǎn)到下一個(gè)頁面 * @param {String} url 跳轉(zhuǎn)頁面的名稱 * @param {Object} param 跳轉(zhuǎn)頁面的傳參 * @return null */ jumpPage(url, param) { if (!url) { return } let arrSwitch = ['/pages/index/index'];//tab頁面數(shù)組 if (arrSwitch.includes(url)) { return uni.switchTab({//tab頁面需要uni.switchPage跳轉(zhuǎn) url }) } if (param) { url += (url.indexOf('?') < 0 ? '?' : '&') + this.setPageParam(param);//拼接參數(shù) } if (getCurrentPages().length > 9) { return uni.redirectTo({//如果棧滿或者溢出就重定向 url }) } else { uni.navigateTo({ url }) } },
24.git基礎(chǔ)命令
1、 git init 把這個(gè)目錄變成git可以管理的倉庫 2、 git add 不但可以跟單一文件,也可以跟通配符,更可以跟目錄。一個(gè)點(diǎn)就把當(dāng)前目錄下所有未追蹤的文件全部add了 3、 git commit -m ‘first commit'把文件提交到倉庫 4、 git remote add origin +//倉庫地址 //關(guān)聯(lián)遠(yuǎn)程倉庫 5、 git push -u origin master //把本地庫的所有內(nèi)容推送到遠(yuǎn)程庫上
總結(jié)
到此這篇關(guān)于uniapp基礎(chǔ)知識(shí)點(diǎn)掌握以及面試題整理的文章就介紹到這了,更多相關(guān)uniapp基礎(chǔ)及面試題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript數(shù)組reduce()方法的語法與實(shí)例解析
js函數(shù)中有三個(gè)在特定場(chǎng)合很好用的函數(shù):reduce(),map(),filter(),這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組reduce()方法的相關(guān)資料,需要的朋友可以參考下2021-07-07解決LayUI數(shù)據(jù)表格復(fù)選框不居中顯示的問題
今天小編就為大家分享一篇解決LayUI數(shù)據(jù)表格復(fù)選框不居中顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript頁面倒計(jì)時(shí)功能完整示例
這篇文章主要介紹了JavaScript頁面倒計(jì)時(shí)功能,結(jié)合完整實(shí)例形式分析了javascript計(jì)時(shí)器、時(shí)間運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-05-05Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)導(dǎo)航欄的2種方式,一是利用按鈕組實(shí)現(xiàn)、二是Bootstrap專門做了相應(yīng)的css類,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11根據(jù)服務(wù)器時(shí)間作為起始,顯示時(shí)鐘的小程序
一般的網(wǎng)頁都有這種功能:在頁面上動(dòng)態(tài)顯示當(dāng)前時(shí)間,這個(gè)的實(shí)現(xiàn)也很簡單,基本上一行代碼就實(shí)現(xiàn)了2009-06-06JavaScript實(shí)現(xiàn)手寫循環(huán)滑動(dòng)效果
最近一直在做業(yè)務(wù),遇到一個(gè)需求是頁面頂部需要展示圖片,可以拖動(dòng),拖動(dòng)到最后一張的時(shí)候需要無縫切換到第一張,從而實(shí)現(xiàn)循環(huán)滑動(dòng),所以本文就來和大家分享一下實(shí)現(xiàn)方法2023-05-05