寫在有道筆記上贾漏，uni項(xiàng)目實(shí)踐，轉(zhuǎn)過來格式不太好看藕筋，先做此記錄吧纵散。

1. 看了uniapp多端開發(fā)，感覺不錯，還有模板商城伍掀，直接拿過來用
2. 用過vue就看一下不支持的部分
3. 用upx掰茶，750upx為全屏寬度；如同小程序的rpx
4. 電商模板 更新下單流程硕盹、分類符匾、列表

clipboard.png

5. npm i -g @vue/cli@latest

6. 沒有webpack的那些配置文件，那如果要修改怎么改瘩例，應(yīng)該是hbuilderx內(nèi)置了

7. 沒有設(shè)置router的文件額

8. 看了下url是pages/component/text/text

9. 應(yīng)該是直接對應(yīng)的文件夾目錄與文件名啊胶；那后面就會有蛋疼的

10. 就像是原來的xx.html 文件url

11. components 下的顯示不出來，components和pages的垛贤。vue文件沒有啥區(qū)別

12. 哦哦哦 原來是用page.json來注冊的

13. 每個可顯示的頁面焰坪，都必須在 pages.json 中注冊。如果你開發(fā)過小程序聘惦，那么pages.json類似app.json某饰。如果你熟悉vue，這里沒有vue的路由善绎，都是在pages.json里管理黔漂。

14. 但是貌似也不能修改router額

15. 2019年5月6日15:56:38 總結(jié)

16. 通過代碼中的 if else 來區(qū)分不同端的代碼，如果一開始只有web的代碼的話禀酱，那就沒啥負(fù)擔(dān)炬守，以后要改造為小程序的時候也比較方便；就是代碼就比較臃腫混亂了

17. 寫法基本和vue差不多剂跟，但是很多標(biāo)簽和跳轉(zhuǎn)方法是和小程序差不多的减途，如果沒有寫過小程序的話上手還是會有障礙

18. 不知道能不能自定義路由；暫時未找到

19. 以及webpack等配置文件集成到了編輯器中曹洽，修改的話和之前的方式不同

20. 想著cli版本的應(yīng)該會差不多鳍置，但由于下載cli3.0折騰了十分鐘沒下成功，就先擱置了

21. 再怕的一點(diǎn)就是 出了問題不好找答案送淆；不過想想之前的wepy用的人更少税产，還不是這樣寫出來了

22. 再就是以后的維護(hù)了，新的人來接手的話偷崩，如果沒用過uni辟拷；那就要會vue和小程序

23. 新的項(xiàng)目是否值得一試呢？這個項(xiàng)目比較小环凿、比較簡單可以一試

24. 看到能直接用的模板梧兼，想到vue的項(xiàng)目的話也可以找找這些模板吧放吩，都不用設(shè)計(jì)頁面了

25. 云打包后返回的鏈接下載不了智听，說是啥key不存在

26. Dcloud,hbuilderX開發(fā)uni-app第一天踩坑記錄

27. 可能有些人以為js等于瀏覽器里的js。其實(shí)js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基于js規(guī)范補(bǔ)充了window到推、document考赛、navigator、location等專用對象莉测。

28. 選擇器有2個變化：*選擇器不支持颜骤；元素選擇器里沒有body，改為了page捣卤。微信小程序即是如此忍抽。

29. 基于下載的那個商城的模板做的測試；生成的h5代碼放到服務(wù)器可以訪問（pom.js不寫vue或者gulp就是直接把文件丟過去）http://192.168.119.120:9720/#/董朝，在本機(jī)的web服務(wù)器不能鸠项，我想是因?yàn)槟J(rèn)的那些css、js路徑是從根目錄開始的
    [圖片上傳中...(clipboard (1).png-fafa6c-1560844459769-0)]

30. publicPath String 引用資源的地址前綴子姜，僅發(fā)布時生效祟绊。參考：publicPath

31. https://uniapp.dcloud.io/collocation/manifest?id=h5

32. 果然加了這個本機(jī)也能運(yùn)行了

manifest.json "h5":{ "publicPath":"./" }

4. 但是代碼中引入的圖片居然都是/static的；現(xiàn)在是改為../../static了哥捕，可是生成后的代碼層級關(guān)系不一樣了呀牧抽，難怪用那個遥赚；不知道能不能用@符號
5. 回憶一下vue的做法扬舒，圖片都在assets里打包的時候做處理然后放到static里

• 下面一步就是要試試之前vue上的插件，方不方便用過來
• 又到了糾結(jié)的時候鸽捻，用還是不用

1. 也就是 一個請求的封裝呼巴、store的管理
2. 用的好處有學(xué)習(xí)的新的技術(shù)，小程序的開發(fā)御蒲，以及之后可能的多端衣赶，ios和android；由于要考慮多端厚满，而不得不面對不熟的小程序等問題府瞄，這將是導(dǎo)致煩躁的一大問題，再就是如果現(xiàn)在先不管小程序碘箍，但是如果以后要轉(zhuǎn)的話也是蛋疼遵馆，不過肯定不重新開發(fā)小程序要輕松，如果是以小程序開發(fā)為主的話丰榴，那肯定要用這個货邓；但是現(xiàn)在是以h5開發(fā)為主，小程序只是計(jì)劃想要四濒，現(xiàn)在所增加的負(fù)擔(dān)就感覺沒必要换况；
3. 代價就是职辨，不同的寫法等學(xué)習(xí)成本，原來代碼不能復(fù)用戈二，以后有沒有人維護(hù)
4. 不要想著一下子就做的很規(guī)范完美舒裤，先用這個項(xiàng)目練練手，能做出來再說
5. 這種小眾的技術(shù)就是怕無法和其他的項(xiàng)目一起維護(hù)觉吭，但是vue對于之前的jq項(xiàng)目也是一樣的呀腾供；、這個的技術(shù)棧就是vue和小程序鲜滩，以后也肯定是找會小程序的人維護(hù)伴鳖；
6. 以后的項(xiàng)目是否都用uni來開發(fā)，如果只有一個的話徙硅，不怕黎侈，之前的wepy也是只有一個啊

• uni-app 內(nèi)置了常用的樣式變量，采用 scss 預(yù)處理方式闷游，文件名為 uni.scss峻汉，在代碼中無需 import 這個文件即可使用這些樣式變量。
• pages.json格式化之后脐往，在ios微信上頂部搜索欄的背景色就恢復(fù)不了半透明狀態(tài)了休吠；后發(fā)現(xiàn)原來的代碼也有這個問題，當(dāng)滑動很多然后滾回頂部的時候就不會到半透明业簿；這個是pages.json>app-plus>titleNView>"type": "transparent",設(shè)置的
• onReachBottom 這個方法是頁面自帶的瘤礁，參考這里；
• dcloud的搜索做的還不錯梅尤，很多問題直接在這搜就行
• 用的熟練后應(yīng)該會比較順手柜思，現(xiàn)在是切換的陣痛期吧
• 雖然不推薦使用HTML標(biāo)簽，但實(shí)際上如果開發(fā)者寫了div等標(biāo)簽巷燥，也會被編譯器轉(zhuǎn)換為view標(biāo)簽赡盘，類似的還是有span轉(zhuǎn)text、a轉(zhuǎn)navigator等缰揪。
• vue文件里的style沒有scoped 但是生成的css上帶有了組件特有的標(biāo)識陨享，應(yīng)該是默認(rèn)支持了
• uni-app的H5版使用注意事項(xiàng)

具體技術(shù)細(xì)節(jié)備忘

1. 點(diǎn)擊態(tài)用 hover-class="common-hover"；原來就是點(diǎn)擊的時候添加的這個類名钝腺，樣式是在app.vue下面的定義的抛姑；默認(rèn)類名是button-hover
2. 狀態(tài)欄40px 標(biāo)題欄88px 一共128px；但我頁面不用管默認(rèn)的狀態(tài)欄

onPageScroll(e){ //兼容iOS端下拉時頂部漂移 if(e.scrollTop>=0){ this.headerPosition = "fixed"; }else{ this.headerPosition = "absolute"; } }, //下拉刷新 onPullDownRefresh(){ this.loadData('refresh'); }, //加載更多 onReachBottom(){ this.loadData(); },

5. 很多變量名可以借鑒

6. seckill-section 秒殺專區(qū)

7. VScroll 記得是加overflow: hidden; 不是auto艳狐；以及再套一層div;better-scroll 在小程序里無效定硝，可以直接用原生的滾動，不會有沖突

8. 盡量使用 scroll-view來滾動吧毫目，兼容下小程序的樣式蔬啡，但是它會加很多層div唁毒，所以高度就不要寫在 scroll-view標(biāo)簽上了，就寫到內(nèi)部的元素上

9. better-scroll 需要 添加listenScroll或者 :listenScroll="true" @scroll="xx'來接受 :probeType="3" 要選這個星爪，在它自己彈性滾動的時候也會觸發(fā)

10. 組件里使用 slot 嵌套的其他組件時不支持 v-for

11. 我擦 導(dǎo)致在小程序上 分類頁面不能滾動

12. 首頁現(xiàn)在沒有v-for；不不我看了還是有的啊粉私，為啥可以顽腾，哦 因?yàn)槭醉撝挥幸粋€滾動區(qū)域，有時候也會有問題

13. 反正 分類頁面就先用if來判斷小程序诺核，單獨(dú)的代碼吧抄肖，就不混在vscroll上了

14. 小程序首頁的dom沒有被scroll-view包裹

15. 小程序的組件并沒有把組件標(biāo)簽去掉，這會導(dǎo)致很多類名樣式上的問題

16. this.$emit('update:tabCur', index);子組件還可以這樣更新父組件變量啊

17. better-scroll swiper 滾動觸發(fā)點(diǎn)擊

18. swipe組件滑動時會觸發(fā)item內(nèi)的點(diǎn)擊事件

19. 組件里面不能用 onload窖杀；用created mounted

20. 跳轉(zhuǎn)

uni.navigateTo({ url: /pages/product/product?id=${id} })

14. 自從H5設(shè)置了devServer的proxy漓摩，就在一直練websocket，不明原因入客，并沒有使用websocket

clipboard (1).png

15. uni-app能用什么UI框架管毙？http插件 axios?

16. 如何加百度統(tǒng)計(jì)呢；這個沒有router桌硫，不能監(jiān)聽路由的變化啊

17. 他自帶的登錄https://dev.dcloud.net.cn 可查看 uni-app 在微信小程序夭咬、原生App不同平臺的統(tǒng)計(jì)數(shù)據(jù)，比如新增用戶铆隘、日活用戶卓舵、留存等。

18. 沒有h5啊

19. 在 H5 平臺組件特有的 class 屬性生效的辦法 input的沒試膀钠，但是我自己組件想沒有scoped 的效果 >>> 不行啊掏湾，是寫法問題？

.input >>> .custom-placeholder-class { color: #FF3333; }

18. 刷新頁面會 頁面全部出棧肿嘲，只留下新的頁面融击，就沒有歷史記錄返回了，只能返回首頁

19. 用了 onPageScroll 后有時會報(bào)錯[system] Not Found：Page雳窟；應(yīng)該也是和刷新頁面有關(guān)系砚嘴，

20. 刷新有onPageScroll 的當(dāng)前頁，然后點(diǎn)擊某個按鈕跳轉(zhuǎn)下個頁面涩拙，還是會觸發(fā)一次际长，如果是從上一個頁面進(jìn)來然后再點(diǎn)擊就不會；蛋疼兴泥；為了兼容可能的小程序就還是用onPageScroll 這個方法來監(jiān)聽頁面滾動吧工育，就不用window的方法了

21. // 返回不會執(zhí)行onHide，前進(jìn)不會執(zhí)行onUnload搓彻、destroyed

22. 觸底事件就用onReachBottom

23. betterScroll與swiper如绸，滾動的沖突嘱朽；誤觸發(fā)點(diǎn)擊事件，換了swiper-vue版本的怔接，解決了小的banner圖滑動觸發(fā)點(diǎn)擊的問題搪泳，但是新的問題是大的頁面的滑動也會觸發(fā)；

24. swiper 第二頁開始扼脐，滑動結(jié)束會觸發(fā)點(diǎn)擊事件導(dǎo)致跳商品詳情了

25. 和是什么頁面沒有關(guān)系岸军，用同樣的頁面還是會第二個開始有問題

26. 后來想用一個頁面fixed到最頂層，然后再swiper的各種事件的時候控制其顯示和隱藏來控制頁面能否點(diǎn)擊瓦侮，但是在

27. 解決方案：通過provide / inject艰赞，將首頁的isSwiper變量傳到VGoods商品組件，為true時候不讓其跳轉(zhuǎn)肚吏，

swiper的設(shè)置 on: { // 在切換開始的時候設(shè)置為true slideChangeTransitionStart: () => { this.isSwiper = true }, // 動畫結(jié)束的設(shè)為false方妖，在頁面沒滾動過去，回彈回來也會觸發(fā)罚攀，條件寬一點(diǎn)党觅，讓其更多少能設(shè)為false transitionEnd: () => { setTimeout(() => { this.isSwiper = false }, 100) } }

• location.href無法跳轉(zhuǎn)當(dāng)前連接的 非tabBar 頁面；如在http://192.168.100.22:8080/#/pages/public/login 無法跳轉(zhuǎn)到 location.href='http://192.168.100.22:8080/#/pages/product/product?id=586100436399' 商品詳情斋泄；但是可以location.跳轉(zhuǎn)到首頁仔役；

1. 可以跳轉(zhuǎn)其他ip的所有頁面

// 由于uni對location.href限制，故做如下處理 href(url) { /* * 同源tabBar頁面未刷新的跳轉(zhuǎn)是己；由于未刷新后面的reload還是會執(zhí)行;處理后刷新跳轉(zhuǎn)又兵，且加了一個歷史記錄，需要返回兩下卒废； * 同源非tabBar頁面不跳轉(zhuǎn)沛厨；處理后刷新跳轉(zhuǎn) * 非同源所有頁面正常刷新跳轉(zhuǎn) * * 最好還是要刷新跳轉(zhuǎn)，防止store里的登錄信息沒有更新到頁面 * 理論上應(yīng)該都是同源的鏈接 * */ // 由于uni對與同源的非tabbar的鏈接不跳轉(zhuǎn)摔认，故通過pushState設(shè)置后再reload location.href = url; // 新URL必須與當(dāng)前URL同源逆皮，否則 pushState() 會拋出一個異常。 history.pushState({}, "", url); location.reload() }

• 應(yīng)該是自帶的 loading 與網(wǎng)絡(luò)不給力参袱，點(diǎn)擊屏幕重試电谣；我就是說那個頂部的loading是哪來的，應(yīng)該是和網(wǎng)絡(luò)請求有關(guān)

<div class="uni-async-error"> 網(wǎng)絡(luò)不給力抹蚀，點(diǎn)擊屏幕重試 </div>

26. 組件內(nèi)（頁面除外）不支持onLoad生命周期剿牺。
27. 單頁應(yīng)用跟蹤 ，要開啟环壤，只支持history模式; uni改為了history模式晒来，測試服務(wù)器用node做的容器，我就加上了 connect-history-api-fallback,就好了

<script src="https://unpkg.com/alloylever"></script> <script> try { //vconsole 手機(jī)上模擬的控制臺 AlloyLever.config({ cdn: 'https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js', entry: ".header-title,.tit,.uni-page-head,.vconsole" //點(diǎn)擊這個DOM元素6次 彈出控制臺 }) } catch (e) { console.log(e) } </script>

29. 設(shè)置頁面title郑现，頁面關(guān)閉不會觸發(fā)onHide湃崩，返回按鈕的時候沒有觸發(fā)onHide荧降，觸發(fā)了onUnload，不寫onUnload的時候攒读，返回title也會變回去朵诫，但是再點(diǎn)進(jìn)新手攻略，onShow觸發(fā)了薄扁，但是title沒有變剪返，不知為啥，反正加上onUnload就好了

onShow(){ document.title="新手攻略" }, onHide(){ document.title="淘多多" }, onUnload(){ document.title="淘多多" },

30. uni-app 為 iOS（iPhoneX）底部安全區(qū)適配

31. "safearea": { //安全區(qū)域配置泌辫，僅iOS平臺生效 我丟

32. 不管什么屏幕寬度，底部tabbar高度固定為50px九默，頂部page-head固定為44px震放；所以這里不要用upx

33. CSS內(nèi)使用vh單位的時候注意100vh包含導(dǎo)航欄，使用時需要減去導(dǎo)航欄和tabBar高度驼修，部分瀏覽器還包含瀏覽器操作欄高度殿遂，使用時請注意。