寫在有道筆記上，uni項(xiàng)目實(shí)踐，轉(zhuǎn)過(guò)來(lái)格式不太好看，先做此記錄吧。
- 看了uniapp多端開發(fā)，感覺不錯(cuò)，還有模板商城，直接拿過(guò)來(lái)用
- 用過(guò)vue就看一下不支持的部分
- 用upx，750upx為全屏寬度；如同小程序的rpx
- 電商模板 更新下單流程、分類、列表
npm i -g @vue/cli@latest
沒有webpack的那些配置文件，那如果要修改怎么改，應(yīng)該是hbuilderx內(nèi)置了
沒有設(shè)置router的文件額
看了下url是pages/component/text/text
應(yīng)該是直接對(duì)應(yīng)的文件夾目錄與文件名；那后面就會(huì)有蛋疼的
就像是原來(lái)的xx.html 文件url
components 下的顯示不出來(lái)，components和pages的。vue文件沒有啥區(qū)別
哦哦哦 原來(lái)是用page.json來(lái)注冊(cè)的
每個(gè)可顯示的頁(yè)面，都必須在 pages.json 中注冊(cè)。如果你開發(fā)過(guò)小程序，那么pages.json類似app.json。如果你熟悉vue，這里沒有vue的路由，都是在pages.json里管理。
但是貌似也不能修改router額
2019年5月6日15:56:38 總結(jié)
通過(guò)代碼中的 if else 來(lái)區(qū)分不同端的代碼，如果一開始只有web的代碼的話，那就沒啥負(fù)擔(dān)，以后要改造為小程序的時(shí)候也比較方便；就是代碼就比較臃腫混亂了
寫法基本和vue差不多，但是很多標(biāo)簽和跳轉(zhuǎn)方法是和小程序差不多的，如果沒有寫過(guò)小程序的話上手還是會(huì)有障礙
不知道能不能自定義路由；暫時(shí)未找到
以及webpack等配置文件集成到了編輯器中，修改的話和之前的方式不同
想著cli版本的應(yīng)該會(huì)差不多，但由于下載cli3.0折騰了十分鐘沒下成功，就先擱置了
再怕的一點(diǎn)就是 出了問(wèn)題不好找答案；不過(guò)想想之前的wepy用的人更少，還不是這樣寫出來(lái)了
再就是以后的維護(hù)了，新的人來(lái)接手的話，如果沒用過(guò)uni；那就要會(huì)vue和小程序
新的項(xiàng)目是否值得一試呢？這個(gè)項(xiàng)目比較小、比較簡(jiǎn)單可以一試
看到能直接用的模板，想到vue的項(xiàng)目的話也可以找找這些模板吧，都不用設(shè)計(jì)頁(yè)面了
云打包后返回的鏈接下載不了，說(shuō)是啥key不存在
可能有些人以為js等于瀏覽器里的js。其實(shí)js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基于js規(guī)范補(bǔ)充了window、document、navigator、location等專用對(duì)象。
選擇器有2個(gè)變化：*選擇器不支持；元素選擇器里沒有body，改為了page。微信小程序即是如此。
基于下載的那個(gè)商城的模板做的測(cè)試；生成的h5代碼放到服務(wù)器可以訪問(wèn)（pom.js不寫vue或者gulp就是直接把文件丟過(guò)去）http://192.168.119.120:9720/#/，在本機(jī)的web服務(wù)器不能，我想是因?yàn)槟J(rèn)的那些css、js路徑是從根目錄開始的
[圖片上傳中...(clipboard (1).png-fafa6c-1560844459769-0)]publicPath String 引用資源的地址前綴，僅發(fā)布時(shí)生效。參考：publicPath
果然加了這個(gè)本機(jī)也能運(yùn)行了
manifest.json "h5":{ "publicPath":"./" }
- 但是代碼中引入的圖片居然都是/static的；現(xiàn)在是改為../../static了，可是生成后的代碼層級(jí)關(guān)系不一樣了呀，難怪用那個(gè)；不知道能不能用@符號(hào)
- 回憶一下vue的做法，圖片都在assets里打包的時(shí)候做處理然后放到static里
- 下面一步就是要試試之前vue上的插件，方不方便用過(guò)來(lái)
- 又到了糾結(jié)的時(shí)候，用還是不用
- 也就是 一個(gè)請(qǐng)求的封裝、store的管理
- 用的好處有學(xué)習(xí)的新的技術(shù)，小程序的開發(fā)，以及之后可能的多端，ios和android；由于要考慮多端，而不得不面對(duì)不熟的小程序等問(wèn)題，這將是導(dǎo)致煩躁的一大問(wèn)題，再就是如果現(xiàn)在先不管小程序，但是如果以后要轉(zhuǎn)的話也是蛋疼，不過(guò)肯定不重新開發(fā)小程序要輕松，如果是以小程序開發(fā)為主的話，那肯定要用這個(gè)；但是現(xiàn)在是以h5開發(fā)為主，小程序只是計(jì)劃想要，現(xiàn)在所增加的負(fù)擔(dān)就感覺沒必要；
- 代價(jià)就是，不同的寫法等學(xué)習(xí)成本，原來(lái)代碼不能復(fù)用，以后有沒有人維護(hù)
- 不要想著一下子就做的很規(guī)范完美，先用這個(gè)項(xiàng)目練練手，能做出來(lái)再說(shuō)
- 這種小眾的技術(shù)就是怕無(wú)法和其他的項(xiàng)目一起維護(hù)，但是vue對(duì)于之前的jq項(xiàng)目也是一樣的呀；、這個(gè)的技術(shù)棧就是vue和小程序，以后也肯定是找會(huì)小程序的人維護(hù)；
- 以后的項(xiàng)目是否都用uni來(lái)開發(fā)，如果只有一個(gè)的話，不怕，之前的wepy也是只有一個(gè)啊
- uni-app 內(nèi)置了常用的樣式變量，采用 scss 預(yù)處理方式，文件名為 uni.scss，在代碼中無(wú)需 import 這個(gè)文件即可使用這些樣式變量。
- pages.json格式化之后，在ios微信上頂部搜索欄的背景色就恢復(fù)不了半透明狀態(tài)了；后發(fā)現(xiàn)原來(lái)的代碼也有這個(gè)問(wèn)題，當(dāng)滑動(dòng)很多然后滾回頂部的時(shí)候就不會(huì)到半透明；這個(gè)是pages.json>app-plus>titleNView>"type": "transparent",設(shè)置的
- onReachBottom 這個(gè)方法是頁(yè)面自帶的，參考這里；
- dcloud的搜索做的還不錯(cuò)，很多問(wèn)題直接在這搜就行
- 用的熟練后應(yīng)該會(huì)比較順手，現(xiàn)在是切換的陣痛期吧
- 雖然不推薦使用HTML標(biāo)簽，但實(shí)際上如果開發(fā)者寫了div等標(biāo)簽，也會(huì)被編譯器轉(zhuǎn)換為view標(biāo)簽，類似的還是有span轉(zhuǎn)text、a轉(zhuǎn)navigator等。
- vue文件里的style沒有scoped 但是生成的css上帶有了組件特有的標(biāo)識(shí)，應(yīng)該是默認(rèn)支持了
- uni-app的H5版使用注意事項(xiàng)
具體技術(shù)細(xì)節(jié)備忘
- 點(diǎn)擊態(tài)用 hover-class="common-hover"；原來(lái)就是點(diǎn)擊的時(shí)候添加的這個(gè)類名，樣式是在app.vue下面的定義的；默認(rèn)類名是button-hover
- 狀態(tài)欄40px 標(biāo)題欄88px 一共128px；但我頁(yè)面不用管默認(rèn)的狀態(tài)欄
onPageScroll(e){ //兼容iOS端下拉時(shí)頂部漂移 if(e.scrollTop>=0){ this.headerPosition = "fixed"; }else{ this.headerPosition = "absolute"; } }, //下拉刷新 onPullDownRefresh(){ this.loadData('refresh'); }, //加載更多 onReachBottom(){ this.loadData(); },
很多變量名可以借鑒
seckill-section 秒殺專區(qū)
VScroll 記得是加overflow: hidden; 不是auto；以及再套一層div;better-scroll 在小程序里無(wú)效，可以直接用原生的滾動(dòng)，不會(huì)有沖突
盡量使用 scroll-view來(lái)滾動(dòng)吧，兼容下小程序的樣式，但是它會(huì)加很多層div，所以高度就不要寫在 scroll-view標(biāo)簽上了，就寫到內(nèi)部的元素上
better-scroll 需要 添加listenScroll或者 :listenScroll="true" @scroll="xx'來(lái)接受 :probeType="3" 要選這個(gè)，在它自己彈性滾動(dòng)的時(shí)候也會(huì)觸發(fā)
組件里使用 slot 嵌套的其他組件時(shí)不支持 v-for
我擦 導(dǎo)致在小程序上 分類頁(yè)面不能滾動(dòng)
首頁(yè)現(xiàn)在沒有v-for；不不我看了還是有的啊，為啥可以，哦 因?yàn)槭醉?yè)只有一個(gè)滾動(dòng)區(qū)域，有時(shí)候也會(huì)有問(wèn)題
反正 分類頁(yè)面就先用if來(lái)判斷小程序，單獨(dú)的代碼吧，就不混在vscroll上了
小程序首頁(yè)的dom沒有被scroll-view包裹
小程序的組件并沒有把組件標(biāo)簽去掉，這會(huì)導(dǎo)致很多類名樣式上的問(wèn)題
this.$emit('update:tabCur', index);子組件還可以這樣更新父組件變量啊
better-scroll swiper 滾動(dòng)觸發(fā)點(diǎn)擊
組件里面不能用 onload；用created mounted
跳轉(zhuǎn)
uni.navigateTo({ url: /pages/product/product?id=${id} })
如何加百度統(tǒng)計(jì)呢；這個(gè)沒有router，不能監(jiān)聽路由的變化啊
他自帶的登錄https://dev.dcloud.net.cn 可查看 uni-app 在微信小程序、原生App不同平臺(tái)的統(tǒng)計(jì)數(shù)據(jù)，比如新增用戶、日活用戶、留存等。
沒有h5啊
在 H5 平臺(tái)組件特有的 class 屬性生效的辦法 input的沒試，但是我自己組件想沒有scoped 的效果 >>> 不行啊，是寫法問(wèn)題？
.input >>> .custom-placeholder-class { color: #FF3333; }
刷新頁(yè)面會(huì) 頁(yè)面全部出棧，只留下新的頁(yè)面，就沒有歷史記錄返回了，只能返回首頁(yè)
用了 onPageScroll 后有時(shí)會(huì)報(bào)錯(cuò)[system] Not Found：Page；應(yīng)該也是和刷新頁(yè)面有關(guān)系，
刷新有onPageScroll 的當(dāng)前頁(yè)，然后點(diǎn)擊某個(gè)按鈕跳轉(zhuǎn)下個(gè)頁(yè)面，還是會(huì)觸發(fā)一次，如果是從上一個(gè)頁(yè)面進(jìn)來(lái)然后再點(diǎn)擊就不會(huì)；蛋疼；為了兼容可能的小程序就還是用onPageScroll 這個(gè)方法來(lái)監(jiān)聽頁(yè)面滾動(dòng)吧，就不用window的方法了
// 返回不會(huì)執(zhí)行onHide，前進(jìn)不會(huì)執(zhí)行onUnload、destroyed
觸底事件就用onReachBottom
betterScroll與swiper，滾動(dòng)的沖突；誤觸發(fā)點(diǎn)擊事件，換了swiper-vue版本的，解決了小的banner圖滑動(dòng)觸發(fā)點(diǎn)擊的問(wèn)題，但是新的問(wèn)題是大的頁(yè)面的滑動(dòng)也會(huì)觸發(fā)；
swiper 第二頁(yè)開始，滑動(dòng)結(jié)束會(huì)觸發(fā)點(diǎn)擊事件導(dǎo)致跳商品詳情了
和是什么頁(yè)面沒有關(guān)系，用同樣的頁(yè)面還是會(huì)第二個(gè)開始有問(wèn)題
后來(lái)想用一個(gè)頁(yè)面fixed到最頂層，然后再swiper的各種事件的時(shí)候控制其顯示和隱藏來(lái)控制頁(yè)面能否點(diǎn)擊，但是在
解決方案：通過(guò)provide / inject，將首頁(yè)的isSwiper變量傳到VGoods商品組件，為true時(shí)候不讓其跳轉(zhuǎn)，
swiper的設(shè)置 on: { // 在切換開始的時(shí)候設(shè)置為true slideChangeTransitionStart: () => { this.isSwiper = true }, // 動(dòng)畫結(jié)束的設(shè)為false，在頁(yè)面沒滾動(dòng)過(guò)去，回彈回來(lái)也會(huì)觸發(fā)，條件寬一點(diǎn)，讓其更多少能設(shè)為false transitionEnd: () => { setTimeout(() => { this.isSwiper = false }, 100) } }
- location.href無(wú)法跳轉(zhuǎn)當(dāng)前連接的 非tabBar 頁(yè)面；如在http://192.168.100.22:8080/#/pages/public/login 無(wú)法跳轉(zhuǎn)到 location.href='http://192.168.100.22:8080/#/pages/product/product?id=586100436399' 商品詳情；但是可以location.跳轉(zhuǎn)到首頁(yè)；
- 可以跳轉(zhuǎn)其他ip的所有頁(yè)面
// 由于uni對(duì)location.href限制，故做如下處理 href(url) { /* * 同源tabBar頁(yè)面未刷新的跳轉(zhuǎn)；由于未刷新后面的reload還是會(huì)執(zhí)行;處理后刷新跳轉(zhuǎn)，且加了一個(gè)歷史記錄，需要返回兩下； * 同源非tabBar頁(yè)面不跳轉(zhuǎn)；處理后刷新跳轉(zhuǎn) * 非同源所有頁(yè)面正常刷新跳轉(zhuǎn) * * 最好還是要刷新跳轉(zhuǎn)，防止store里的登錄信息沒有更新到頁(yè)面 * 理論上應(yīng)該都是同源的鏈接 * */ // 由于uni對(duì)與同源的非tabbar的鏈接不跳轉(zhuǎn)，故通過(guò)pushState設(shè)置后再reload location.href = url; // 新URL必須與當(dāng)前URL同源，否則 pushState() 會(huì)拋出一個(gè)異常。 history.pushState({}, "", url); location.reload() }
- 應(yīng)該是自帶的 loading 與網(wǎng)絡(luò)不給力，點(diǎn)擊屏幕重試；我就是說(shuō)那個(gè)頂部的loading是哪來(lái)的，應(yīng)該是和網(wǎng)絡(luò)請(qǐng)求有關(guān)
<div class="uni-async-error"> 網(wǎng)絡(luò)不給力，點(diǎn)擊屏幕重試 </div>
- 組件內(nèi)（頁(yè)面除外）不支持onLoad生命周期。
- 單頁(yè)應(yīng)用跟蹤 ，要開啟，只支持history模式; uni改為了history模式，測(cè)試服務(wù)器用node做的容器，我就加上了 connect-history-api-fallback,就好了
<script src="https://unpkg.com/alloylever"></script> <script> try { //vconsole 手機(jī)上模擬的控制臺(tái) AlloyLever.config({ cdn: 'https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js', entry: ".header-title,.tit,.uni-page-head,.vconsole" //點(diǎn)擊這個(gè)DOM元素6次 彈出控制臺(tái) }) } catch (e) { console.log(e) } </script>
- 設(shè)置頁(yè)面title，頁(yè)面關(guān)閉不會(huì)觸發(fā)onHide，返回按鈕的時(shí)候沒有觸發(fā)onHide，觸發(fā)了onUnload，不寫onUnload的時(shí)候，返回title也會(huì)變回去，但是再點(diǎn)進(jìn)新手攻略，onShow觸發(fā)了，但是title沒有變，不知為啥，反正加上onUnload就好了
onShow(){ document.title="新手攻略" }, onHide(){ document.title="淘多多" }, onUnload(){ document.title="淘多多" },
"safearea": { //安全區(qū)域配置，僅iOS平臺(tái)生效 我丟
不管什么屏幕寬度，底部tabbar高度固定為50px，頂部page-head固定為44px；所以這里不要用upx
CSS內(nèi)使用vh單位的時(shí)候注意100vh包含導(dǎo)航欄，使用時(shí)需要減去導(dǎo)航欄和tabBar高度，部分瀏覽器還包含瀏覽器操作欄高度，使用時(shí)請(qǐng)注意。
