摘要:近些天有接觸到框架,使用軟件進(jìn)行編譯,能生成多端項(xiàng)目文件,如微信百度支付寶小程序及和端,記錄遇到的問題條件編譯我覺得比較突出的一點(diǎn)功能,就是這個(gè)條件編譯,指定對(duì)應(yīng)的代碼執(zhí)行在對(duì)應(yīng)的一端僅在某平臺(tái)存在除了某平臺(tái)均存在如只在微信小程序中才執(zhí)行
近些天有接觸到uni-app框架,使用HBuilderX軟件進(jìn)行編譯,能生成多端項(xiàng)目文件,如微信、百度、支付寶小程序及Android和ios端,記錄遇到的問題1.條件編譯
我覺得比較突出的一點(diǎn)功能,就是這個(gè)條件編譯,指定對(duì)應(yīng)的代碼執(zhí)行在對(duì)應(yīng)的一端
#ifdef:if defined 僅在某平臺(tái)存在 #ifndef:if not defined 除了某平臺(tái)均存在 如:只在微信小程序中才執(zhí)行的代碼 // #ifdef MP-WEIXIN uni.getSystemInfo({ success: res => { this.navHeight = `${res.statusBarHeight + 46}px`; } }); // #endif
uni-app條件編譯
在pages.json中也能夠有這樣的條件編譯
2.使用相機(jī)功能在Android中,能夠在跳轉(zhuǎn)頁面后直接調(diào)用api來使用相機(jī),但是ios上就不行,跳轉(zhuǎn)后無法調(diào)用相機(jī)
/* 調(diào)用相機(jī)代碼 */ uni.chooseImage({ count: 1, sizeType: ["original", "compressed"], sourceType: ["camera"], success: res => { const tempFilePaths = res.tempFilePaths[0]; } });3.對(duì)于scroll-view中的scroll-into-view定位元素
scroll-into-view,值應(yīng)為某子元素id(id不能以數(shù)字開頭)。設(shè)置哪個(gè)方向可滾動(dòng),則在哪個(gè)方向滾動(dòng)到該元素
在使用這個(gè)滾動(dòng)到對(duì)應(yīng)元素時(shí),前端的渲染需要進(jìn)行一定的延遲才能夠定位到對(duì)應(yīng)的id
/* 在js中 */ onLoad(options) { setTimeout(() => { this.scrollIntoCate = options.id; }, 400); }, .scrollView{ /* 若是橫向滾動(dòng)定位,應(yīng)設(shè)置寬度 */ width: 100%; /* 若是豎向滾動(dòng)定位,則應(yīng)設(shè)置高度 */ height: 100%; } {{item.title}}
如果你是豎向的滾動(dòng)定位,則你必須設(shè)置高度,橫向定位的話,應(yīng)該設(shè)置寬度,否則無法定位元素4.對(duì)于覆蓋在視頻上的文字
小程序端能夠使用cover-view來進(jìn)行覆蓋視頻,但是,App端暫不支持 cover-view、cover-image 組件之間的嵌套,使得在小程序上能夠?qū)崿F(xiàn)的布局,app端則樣式錯(cuò)亂
app端使用了原生子窗體subNav來實(shí)現(xiàn)覆蓋
使用后綴名為nvue的文件
px:以750寬的屏幕為基準(zhǔn)動(dòng)態(tài)計(jì)算的長度單位,與vue頁面中的rpx理念相同。(一定要注意nvue里的px,和vue里的px邏輯不一樣)
wx:與設(shè)備屏幕寬度無關(guān)的長度單位,與vue頁面中的px理念相同
使用nvue的注意點(diǎn)
在pages.json中進(jìn)行subNav的配置
{ "path": "pages/video/video", "style": { "app-plus": { /* 子窗體定位 */ "subNVues":[{ "id": "videoChild", "path": "pages/video/index", "style": { "position": "absolute", "left": "0px", "bottom": "0px", "width": "750px", "height": "100px", "background": "transparent" } }] } } }
將要設(shè)置子窗體的頁面放入同一個(gè)文件夾,在index.nvue中,文字的放置應(yīng)該是在text中,在pages.json中也應(yīng)寫死寬度,不能使用百分比,支持flex布局,同時(shí),在index.nvue中你要是想設(shè)置背景色,則應(yīng)該使用background-color
subNVue 子窗體與 vue/nvue 頁面通信
/* list.vue文件 */ this.$nextTick(() => { uni.$emit("children", Object); }) /* index.nvue文件 */5.animation動(dòng)畫created() { uni.$on("children", (data) => { this.$nextTick(() => { console.log(data); }) }) }, /* 在頁面銷毀前移除監(jiān)聽事件 */ beforeDestroy(){ uni.$off("children"); },@{{shopname}}
設(shè)置動(dòng)畫形成不同效果,使用不同的動(dòng)畫時(shí)間
6.指定每次分割數(shù)組的長度this.imageList.push(...res.data.result.list); for (let i = 0; i < this.imageList.length; i++) { if (!this.imageList[i].index) { this.imageList[i].index = parseInt(35 + Math.random() * (10 - 5)) + "s"; } } .itemImg { width: 1000upx; height: 318upx; animation: imageMove linear infinite alternate; } @keyframes imageMove { 0% { transform: translateX(0); } 50% { transform: translateX(-30%); } 100% { transform: translateX(0); } }
開始的時(shí)候我想的有點(diǎn)多,想著每次指定分割長度后再進(jìn)行操作,實(shí)際上只要直接操作就可以了
let cateList = []; this.cateLength = cateList.length; let temporaryList = []; if (cateList.length > 10) { for (let i = 0; i < cateList.length; i += 10) { let list = cateList.slice(i, 10 + i); temporaryList.push(list); } this.cateList = temporaryList; }
正在努力學(xué)習(xí)中,若對(duì)你的學(xué)習(xí)有幫助,留下你的印記唄(點(diǎn)個(gè)贊咯^_^)
往期好文推薦:
實(shí)現(xiàn)單行及多行文字超出后加省略號(hào)
判斷iOS和Android及PC端
使用vue開發(fā)移動(dòng)端管理后臺(tái)
原生js實(shí)現(xiàn)瀑布流及微信小程序中使用左右兩列實(shí)現(xiàn)瀑布流
畫三角形
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/105853.html
摘要:其實(shí)大部分坑在在官網(wǎng)都有介紹具體位置在在中使用模塊官方文檔中總結(jié)了很多坑,但我只說一下我今天遇到的坑不支持中的過濾器解決辦法從后臺(tái)獲取數(shù)據(jù)后始用對(duì)數(shù)據(jù)進(jìn)行處理,例子始用過濾器時(shí)始用僅為示例,并非真實(shí)接口地址。 其實(shí)大部分坑在 uni-app在官網(wǎng)都有介紹 具體位置在 在 uni-app 中使用 Vue.js 模塊 官方文檔中總結(jié)了很多坑,但我只說一下我今天遇到的: 坑1:uni-app...
摘要:當(dāng)時(shí)下載了一個(gè),下載了官方提供的示例教程。關(guān)于項(xiàng)目目錄開發(fā)規(guī)范一定要遵守,直接通過官網(wǎng)學(xué)習(xí)即可。最后就是發(fā)布安卓包和蘋果包了。我將自己做的第一個(gè)新聞列表新聞詳情程序打包,安裝到了安卓手機(jī)上測(cè)試了下,效果非常棒。 本人微信公眾號(hào):前端修煉之路,歡迎關(guān)注 背景介紹 大概在今年的十月份左右,我了解到Dcloud推出了uni-app。當(dāng)時(shí)下載了一個(gè)Hbuilder X,下載了官方提供的hell...
摘要:目錄功能框架圖開發(fā)工具是一個(gè)使用開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到響應(yīng)式以及各種小程序微信支付寶百度頭條快手釘釘淘寶快應(yīng)用等多個(gè)平臺(tái)功能框架圖開發(fā)工具輕巧極速強(qiáng)大的語法提示專為打造 目錄 What is uni-app 功能框架圖 IDE開發(fā)工具 HBuilderX Wh...
閱讀 3526·2021-11-17 17:00
閱讀 3931·2021-08-09 13:46
閱讀 2935·2019-08-30 15:54
閱讀 709·2019-08-30 13:54
閱讀 3013·2019-08-29 17:13
閱讀 3318·2019-08-29 14:00
閱讀 3048·2019-08-29 11:11
閱讀 1478·2019-08-26 10:15