知識(shí)
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價(jià)值,我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí),更側(cè)重于功能的便捷,營(yíng)銷的便利,運(yùn)營(yíng)的高效,讓網(wǎng)站成為營(yíng)銷工具,讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持!
您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >
用uniapp重寫小程序問題匯總
發(fā)表時(shí)間:2021-1-5
發(fā)布人:葵宇科技
瀏覽次數(shù):196
原因:微信小程序可以在修改組件的properties的傳值之后、立即調(diào)用組件方法;
uniapp在修改組件prop的傳值之后,需要在this.$nextTick
中調(diào)用組件方法。
但是在百度小程序里,即使有this.$nextTick
依然沒有解決這個(gè)問題,于是又追加了一個(gè)setTimeout
。
Error: [TMA][WARN][RUNTIME] Page route 錯(cuò)誤 +0ms switchTab before pages are registered.
解決:用最新的基礎(chǔ)庫(kù)。
bug: 通過value屬性給input傳值沒有生效。
當(dāng)重復(fù)設(shè)置某些屬性為相同的值時(shí),不會(huì)同步到view層。 例如:每次將scroll-view組件的scroll-top屬性值設(shè)置為0,只有第一次能順利返回頂部。 這和props的單向數(shù)據(jù)流特性有關(guān),組件內(nèi)部scroll-top的實(shí)際值改動(dòng)后,其綁定的屬性并不會(huì)一同變化。
解決:組件屬性設(shè)置不生效解決辦法
差異:getSetting返回
百度小程序即使沒授權(quán)過,通過getSetting獲取的authSetting中的scope.userInfo也為true。
支付寶小程序獲取的authSetting中的用戶信息授權(quán)狀態(tài)對(duì)應(yīng)的key不是scope.userInfo,而是userInfo。
-
微信、qq
bug:(微信、qq)swiper顯示異常。
原因:swiper-item組件上不可以綁定內(nèi)聯(lián)樣式(:style)。
問題:(微信、qq)自定義tabbar圖片閃爍。
解決:用base64代替圖片。
Error: (qq) 文件common/vendor.js超過500k,不進(jìn)行ES5轉(zhuǎn)換或壓縮,請(qǐng)自行轉(zhuǎn)換壓縮。
原因1: 未壓縮。
解決:在package.json的dev:mp-qq的配置末尾添加“--minimize”。
原因2:uniapp生成的qq小程序的vender.js文件中的sourceMappingURL過大。
解決:vue.config.js中配置:當(dāng)process.env.UNI_PLATFORM === 'mp-qq'
時(shí)productionSourceMap = false
。
-
頭條
bug: (頭條)通過$ref獲取一個(gè)組件的實(shí)例,并將這個(gè)實(shí)例賦值給一個(gè)變量后,這個(gè)變量所保存的實(shí)例的prop不會(huì)隨著組件傳值的改變而改變。
解決:不通過被賦值了this.$refs.xxxComponent
的變量調(diào)用組件的方法,而是每次都用this.$refs.xxxComponent.xxxMethod()
的方式調(diào)用組件的方法。
問題:(頭條)只有抖音可以調(diào)起廣告,今日頭條不能調(diào)起廣告,但是今日頭條的createRewardedVideoAd不為空,此api的存在與否不能用來(lái)判斷廣告能否使用。
解決:用tt.getSystemInfoSync().appName.toUpperCase() === 'DOUYIN'
來(lái)判斷。
bug:(頭條)樣式混亂。
(1)在字節(jié)跳動(dòng)的style中發(fā)現(xiàn):
:host{
display:block;
white-space: normal;
}
復(fù)制代碼
的代碼。
因?yàn)橛绊懙姆秶淮?,單?dú)在兩處設(shè)置了一下white-space的值即解決。
(2)頭條的樣式在對(duì)連續(xù)幾個(gè)嵌套的元素使用height: 100%時(shí)會(huì)出問題。
bug: (頭條、支付寶)button的getuserinfo事件失效。
只有微信、QQ、百度的button有g(shù)etUserInfo事件。
頭條調(diào)用getUserInfo彈起授權(quán)彈窗,如果點(diǎn)擊取消后即拒絕授權(quán),以后再也不能彈出(微信是從來(lái)不會(huì)彈窗)。這時(shí)候,只能靠openSetting來(lái)引導(dǎo)用戶打開權(quán)限后,再調(diào)用getuserinfo獲取用戶信息。
雖然百度的button有g(shù)etuserinfo事件,但百度的getuserinfo接口不能調(diào)用??梢园裝utton的getUserInfo事件獲取到的數(shù)據(jù)存起來(lái),以模擬一個(gè)getUserInfo接口。
支付寶獲取用戶信息現(xiàn)已升級(jí)為“獲取會(huì)員基礎(chǔ)信息”,點(diǎn)擊查看文檔。其中button屬性中的onGetAuthorize在uniapp中書寫為@getAuthorize,即可成功編譯。
-
百度
bug:(百度真機(jī))運(yùn)行上傳功能失敗。
原因:JSON.parse()
使用時(shí)參數(shù)傳入了object類型而不是string類型的數(shù)據(jù),導(dǎo)致了報(bào)錯(cuò)。
因?yàn)榉祷氐膁ata為object類型,去掉JSON.parse()
后,代碼運(yùn)行正常;不久后這里又開始報(bào)錯(cuò),發(fā)現(xiàn)返回的數(shù)據(jù)又變?yōu)閟tring類型。于是補(bǔ)充邏輯:判斷返回?cái)?shù)據(jù)為string類型時(shí),再JSON.parse()
一下。
因?yàn)?code>JSON.parse()傳入?yún)?shù)類型不為string的錯(cuò)誤有多處,鑒于平臺(tái)差異,最好在使用時(shí)都判斷一下類型。
bug: (百度)圖片預(yù)覽失敗,黑屏。
原因:百度小程序不支持將getImageInfo獲取到的本地路徑作為previewImage的圖片列表參數(shù)。
解決:使用previewImage時(shí),用網(wǎng)絡(luò)圖。
bug: (百度、支付寶)圖片保存錯(cuò)誤。
原因:百度的getImageInfo返回的數(shù)據(jù)中沒有errMsg字段。
由于之前判斷圖片保存成功的方式是res.errMsg === 'getImageInfo:ok’
,導(dǎo)致了錯(cuò)誤。
解決:百度、支付寶小程序用其它字段(path)判斷圖片保存狀態(tài)。
bug:(百度)數(shù)組的長(zhǎng)度在頁(yè)面上更新異常。
當(dāng)用xxxList.length
作為插值時(shí),
對(duì)xxxList做長(zhǎng)度減少的操作,頁(yè)面更新正常;
對(duì)xxxList做長(zhǎng)度增加的操作,頁(yè)面不更新。
解決:額外定義一個(gè)變量來(lái)代替xxxList.length
作為插值。
特殊:(百度、支付寶)當(dāng)scroll-view元素內(nèi)滾動(dòng)區(qū)域的長(zhǎng)度不大于scroll-view本身在此方向的長(zhǎng)度時(shí),不會(huì)觸發(fā)scrolltolower事件。當(dāng)沒有對(duì)一個(gè)縱向的scroll-view設(shè)置高度,它的高度完全被它所包含的元素?fù)伍_所決定時(shí),會(huì)導(dǎo)致不能正常觸發(fā)scrolltolower。
-
支付寶
問題:(支付寶)通過v-show隱藏組件失敗。
選中元素可以看到v-show已經(jīng)編譯成了支付寶支持的hidden=true
,其它小程序也出現(xiàn)過v-show失效的情況,所以不推薦在uniapp中使用v-show。
解決:改為v-if。
問題:(支付寶)樣式錯(cuò)亂。
解決:用uniapp時(shí),不同組件中的同名樣式類名在支付寶會(huì)互相干擾,需要在style標(biāo)簽中加上scoped、修改類名。
支付寶小程序還需要一些樣式重置:
/* #ifdef MP-ALIPAY */
button{
border: none;
}
input{
background: transparent;
}
/* #endif */
復(fù)制代碼
特殊:(支付寶)文件名或文件夾名中不允許出現(xiàn) @ 符號(hào)。
問題:(支付寶)開發(fā)工具【清緩存】中的【清除數(shù)據(jù)緩存】表面清除了緩存,實(shí)際上沒有清除;調(diào)試器里Storage面板左上角圓形的Clear All按鈕才能真的清除緩存。
bug:(支付寶)canvas繪制失敗。
解決:添加id。canvas 組件的標(biāo)識(shí)是 id,而不是 canvas-id。
bug:(支付寶)上傳圖片卡在上傳中。
原因:uni.uploadFile在且僅在支付寶小程序上有個(gè)一必填字段fileType。
bug:(支付寶)某個(gè)接口在開發(fā)工具上請(qǐng)求異常。
原因:對(duì)比其它小程序,發(fā)現(xiàn)支付寶小程序請(qǐng)求參數(shù)中有漢字,而其它小程序會(huì)自動(dòng)將漢字進(jìn)行編碼。用encodeURIComponent手動(dòng)編碼之后解決。
問題:(支付寶)在手機(jī)上,某個(gè)通過js計(jì)算設(shè)置寬度的列表寬度異常大。
原因:其它平臺(tái)通過uni.getSystemInfoSync()
獲取到的screenWidth、screenHeight的值均為css像素,但在手機(jī)上的支付寶小程序獲取到的值為物理像素。
解決:在支付寶平臺(tái)上,當(dāng)獲取到的screenWidth>500
時(shí),取screenWidth/pixelRatio
的值使用。
bug:(支付寶)選擇圖片獲取數(shù)據(jù)有誤。
原因:支付寶用chooseImage()獲取到的數(shù)據(jù)中沒有tempFiles字段,只有tempFilePaths字段。
Error:(支付寶)有的圖片保存失敗,在getImageInfo處報(bào)”下載文件失敗”的錯(cuò)誤。
解決:
原有保存邏輯:uni.getImageInfo-> uni.saveImageToPhotosAlbum。
支付寶作區(qū)分:uni.saveImageToPhotosAlbum。
因?yàn)閟aveImageToPhotosAlbum接口不支持網(wǎng)絡(luò)圖片路徑,所以原有的保存邏輯中,需要先用getImageInfo來(lái)獲取一個(gè)本地路徑再保存。而uni.saveImageToPhotosAlbum
編譯成支付寶小程序代碼后是my.saveImage
,這個(gè)接口對(duì)圖片路徑是沒有要求的,所以當(dāng)運(yùn)行平臺(tái)為支付寶時(shí)可以省去uni.getImageInfo
這步。
問題:導(dǎo)入項(xiàng)目時(shí)沒有反應(yīng)(mac電腦,百度小程序、支付寶小程序)。
原因:開發(fā)工具不明原因的沒有了權(quán)限。
解決:
(1)使用root權(quán)限打開應(yīng)用程序。(但是過于麻煩。)
(2)因?yàn)槊看斡胣pm運(yùn)行項(xiàng)目都需要sudo來(lái)執(zhí)行,懷疑node安裝到了一個(gè)權(quán)限太高的地方,通過nvm重新安裝一次node之后解決。
問題:ios用charles連代理后接口請(qǐng)求不到。
原因:在下載證書并在描述文件中啟用證書后,還需要在設(shè)置→通用→關(guān)于本機(jī)→證書信任設(shè)置里面啟用完全信任Charles證書。
微信代碼轉(zhuǎn)uniapp代碼的全局替換總結(jié):
- wx: ---> v-
- v-key —> :key
- {{ —> (空)
- }} —> (空)
- bind:?tap —> @click
- catch:?tap —> @click.stop
- bind:? —> @
- wx. —> uni.
- this.data. —> this
- <block —> <template
- elif —> else-if
- triggerEvent —> $emit
相關(guān)案例查看更多
相關(guān)閱讀
- 文山小程序開發(fā)
- 小程序
- 專業(yè)網(wǎng)站建設(shè)公司
- 大理小程序開發(fā)
- 企業(yè)網(wǎng)站
- 云南軟件定制
- 小程序分銷商城
- 云南做百度小程序的公司
- 云南網(wǎng)絡(luò)推廣
- 報(bào)廢車
- 報(bào)廢車拆解回收管理系統(tǒng)
- web教程
- 昆明做網(wǎng)站建設(shè)的公司排名
- 網(wǎng)站建設(shè)服務(wù)
- 云南網(wǎng)站建設(shè)百度官方
- 云南網(wǎng)站建設(shè)列表網(wǎng)
- 網(wǎng)站建設(shè)報(bào)價(jià)
- 昆明網(wǎng)站開發(fā)
- 微信分銷
- 云南小程序被騙
- web開發(fā)
- 英文網(wǎng)站建設(shè)公司
- 云南衛(wèi)視小程序
- .net網(wǎng)站
- 云南小程序開發(fā)課程
- 分銷系統(tǒng)
- 汽車報(bào)廢回收管理系統(tǒng)
- 汽車報(bào)廢管理系統(tǒng)
- 網(wǎng)站建設(shè)首選公司
- 保險(xiǎn)網(wǎng)站建設(shè)公司