今天給各位分享uniapp開發(fā)的坑的知識，其中也會對uniapp開發(fā)者進行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

uni-app小程序開發(fā)踩坑記錄

最近要從零開發(fā)一個跟后臺管理系統(tǒng)對接的小程序，因為功能比較復(fù)雜，時間短，選擇了比較火的uni-app，因為小程序出現(xiàn)的時間較短，各方面并不完善，開發(fā)過程中就是不斷踩坑的過程，特此記錄一小下。

uni-app雖然功能還不完善，但是插件市場里東西還是不少的，在搭建框架中因為需求要求借鑒了之前開發(fā)的PC端，所以有一些跟之前開發(fā)VUE相關(guān)的插件 ，可以提高開發(fā)效率，

插件：

坑：

1.覆蓋原生組件，需要用cover-view容器，但是cover-view里可包含的標(biāo)簽有限，類似view等在真機調(diào)試時不顯示，需全部替換成cover-view，且icon無法顯示，可以用cover-imaga代替。

2.小程序和小程序之間的跳轉(zhuǎn)（如騰訊云的人機滑動驗證），跳轉(zhuǎn)回來時需要進行操作，此時可以判斷app.vue中的options，如果按小程序文檔中來說當(dāng)options.scene === 1038時是小程序跳回來的場景，但是部分手機跳回來是options.scene為1001，只能將這2種都作為跳轉(zhuǎn)判斷的條件。

3.小程序跳轉(zhuǎn)回來app中的onshow有時不執(zhí)行，這個原因暫未找到

4.在uniapp的H5版本 ，接入 騰訊云滑動驗證 ，示例的點擊滑動驗證元素是通過dom操作的，但是無效，可能跟uniAPP不支持dom操作有關(guān)系，采用定制接入方法一，手動調(diào)用。

uniapp之h5反向代理設(shè)置踩坑，解決跨域問題

uniapp可以適應(yīng)多個平臺開發(fā)，你會發(fā)現(xiàn)在HBuilderX上的內(nèi)置瀏覽器上調(diào)接口，沒問題；在小程序中，也沒問題；連接手機聯(lián)調(diào)也沒問題；

當(dāng)后臺設(shè)置允許跨域之后，前端h5需要進行設(shè)置反向代理才能解決這個問題。

在manifest.json文件中，我們需要輸入我們的端口號

然后去視圖源碼下查看多了h5這個配置

我們需要在自動生成的h5配置中進行編寫代理設(shè)置

這里需要注意的是"target" : " ", 這里是寫http還是https，需要與后臺保持一致，不然會報500.

然后我們?nèi)ナ褂梦覀兊拇?，進行帶接口

uni-app入坑持續(xù)更新中...

?? 都是坑，防不勝防

?? 正常組件調(diào)組件，在父組件修改子組件樣式，抱歉/deep/、 等穿透作用于class等不生效

解決方案：

1、穿透作用于標(biāo)簽（不推薦：層級多不好控制，而且會有警告）

2、作用于對應(yīng)page頁文件(這個居然可以實在是懵逼啊)

解決方案：動態(tài)綁定v-model 和 value值就可以了（神奇啊）

?? 坑多的讓你想摔手機

uniapp開發(fā)遇到的問題總結(jié)

解決方案：

定義一個布爾類型的變量放到頁面上去，改變循環(huán)的數(shù)據(jù)的某個屬性時，給該變量賦值成false，然后再設(shè)置成true

只能使用create生命周期去構(gòu)造了，如果不能滿足的話就另想其他辦法了

使用 placeholder-class 屬性設(shè)置一個類名，再用該類名寫樣式去覆蓋掉原有的樣式

使用js給img標(biāo)簽添加行內(nèi)樣式以達(dá)到目的

經(jīng)過頑強的詢問，搜索，才知道HBuilderX 2.9.0+ 相關(guān)更新：調(diào)整根字體大小為系統(tǒng)默認(rèn)大小與微信小程序平臺一致，調(diào)整后 rem 默認(rèn)大小不再為 窗口寬度/20，改為了瀏覽器（webview）默認(rèn)的字體大小，一般為 16px

這是社區(qū)給的解決方案： 更新 HBuilderX 2.9.0+ 后 rpx(upx)、rem 樣式變形的處理辦法

我做的項目主要是使用 rpx 的部分變形，使用的解決方案為 寬屏適配指南

在里面找到的解決方案如下：

在 pages.json 的 globeStyle 里配置 rpx 的如下參數(shù)

uni-app踩坑筆記

1.兩個普通頁面之間的跳轉(zhuǎn)用uni.navgateTo()，url可攜帶參數(shù)。

2.普通頁面跳tabbar配置過的頁面需要uni.switchTab()，url不能傳值。

3.uni.reLaunch()萬金油跳轉(zhuǎn)，可以跳轉(zhuǎn)任何頁面(克服了普通頁面跳tabbar配置的頁面url不能傳值的問題。)

4.突出中間按鈕的midButton，是偶數(shù)才能顯示，但只支持真機環(huán)境，瀏覽器是沒有效果的。

6.頁面生命周期(考慮的是頁面刷新帶來的影響)：

onLoad、onShow、onReady

應(yīng)用生命周期，指app.vue里面的這三個

7.箭頭函數(shù)沒有this指向（慎用），如果在控制臺打印this是undefined的，證明是箭頭函數(shù)在作怪，在特殊場合別貪方便，有時候會遇到抓破頭皮也找不到問題所在，就是箭頭函數(shù)搞的鬼。

8.uni.request（{,success:function(res){})}）請求成功返回的數(shù)據(jù)直接使用this直接賦值是不生效的，因為這是一個異步函數(shù)，需要借助一個指向：let that = this

9.setStorageSync 數(shù)據(jù)緩存是用來2個頁面交互的，傳數(shù)據(jù)傳值,寫在onLoad里面。

10.uni-app的view標(biāo)簽等于div標(biāo)簽，獨占一行。

5.和風(fēng)天氣官網(wǎng)提供的API是免費的，每人一天1000次數(shù)，夠練手了。

uni-app踩坑：微信小程序中view設(shè)置overflow: auto無法手勢滑動

前幾天在開發(fā)注冊功能時，需要彈一個顯示注冊協(xié)議的Modal，由于協(xié)議文字很長，需要用戶手動滑動查看。

于是理所當(dāng)然地使用一個view元素包裹協(xié)議內(nèi)容，然后設(shè)置height，并設(shè)置 overflow-y: auto ，這樣設(shè)置后在 微信開發(fā)工具 上使用鼠標(biāo)滾輪滑動ok，但是過兩天在真機上測試，what???，無論我手指怎么滑都滑不動。

經(jīng)過一通仔細(xì) (胡亂) 調(diào)試，最終使用 scroll-view 解決了這個問題。

注意：使用豎向滾動時，需要給 scroll-view 一個固定高度，通過 css 設(shè)置 height。

關(guān)于 scroll-view 的更多介紹，請移步

在這里有一個疑問：為什么設(shè)置 overflow: auto 無法手勢滑動，而scroll-view可以呢？

我暫時沒有想到原因，歡迎知道原因的友友留言解答，謝謝?。。?/p>

關(guān)于uniapp開發(fā)的坑和uniapp開發(fā)者的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。