微信小程序項目和後臺管理系統總結

時間 2020-06-04

標籤微信程序項目後臺管理系統總結简体版

原文原文鏈接

　　入職一段時間了，才進新公司的作的項目就是小程序，第一週寫了靜態頁面，個人地址和新增地址兩個頁面的js邏輯用緩存寫的，起初沒想到那麼細的邏輯，竟然斷斷續續寫了兩天，後來來了個新同事寫了購物車頁面的邏輯。第二週因爲公司其餘人在趕其餘小程序的項目，我和新同事的小程序項目就放了兩天，組長讓咱們寫用vue作的後臺管理系統的幾個頁面，先是看代碼，話說vue我只看教程寫過外賣app的項目，當時搭建框架我還過了三四遍才懂（前端新手從接觸前端開始徹底自學的，這個公司也是我作前端找的第一個公司），拉下後臺管理系統的代碼以後看的第一感受是代碼量好大，好多組件好複雜，怎麼辦我可能看不懂，更要命的是當時才換了pro的新電腦，webstorm還沒裝破解版的，nodejs也沒弄，還有環境變量沒設置，感受全部頭痛的問題全碰到了！環境變量那個找網上教程怎麼弄都沒弄好，到如今我也以爲很奇怪，nodejs安裝好了，直接npm install命令行能用了，直接仔細看代碼了，此次看代碼發現好多我仍是能看懂的。css

　　1是路由搭建跟本身試手的項目原理差很少的，因爲實際項目頁面多不少，所以配置的頁面也很是多，第一次看到這種代碼真的嚇到了。html

　　2是url用到了原型鏈,在入口函數main.js加了Vue.prototype.url = 「」，後面頁面調用直接，this.url，以前爲了面試卻是惡補了原型鏈繼承的知識點，可是實際到底怎麼用沒接觸過，這算是學習到了前端

　　3是後臺系統進入初始化登陸，是經過監聽$route屬性的變化進入登陸界面vue

watch: {
        $route() {
if (!localStorage.getItem("login")) {
   this.$router.push("/login");
}
        }
    }

This.$router.push({path:」」}node

　　4是請求用了axios，因爲這個項目的好多一級目錄和二級目錄都寫好了，所以新寫頁面卻是簡單，看着模版寫就是了,敲代碼發現還有跨域處理設置ios

This.axios.post(url, params,{「widthCredentials」:true}).then(()=>{}).catch(()=>{})git

　　5是整個項目用到了element-ui，這個聽在深圳的好基友提到過（一樣是自學她比我厲害多了），找到文檔試着寫頁面發現確實很好用，能夠節省好多css代碼，每一個組件的樣式部分的style標籤標有scoped屬性時代表style裏的css樣式只適用於當前組件元素，公司的這個項目主要用到了el-tablegithub

2、微信小程序部分web

vue的頁面寫完以後繼續寫小程序，第一天寫接口徹底是懵逼狀態，公司發的api文檔是之前項目用的模版，有一些地方沒有改，第一天我徹底不在狀態，又請教同事，次日寫起來就好多了，下面總結一下小程序的坑，小程序不少坑文檔中是沒有的面試

一、去掉button的默認樣式，在css樣式加

　　　　button::after{

　　　　　　border:none;

　　　　　　line-height: 0;

　　　　}

二、navigator點擊時會有個默認背景，去掉默認樣式添加屬性hover-class="none"

三、切換既有輪播效果又能夠本身點擊切換　

　　首先內容板塊用輪播圖結構包起來，每一個swiper-item對應一個板塊內容，常常遇到的問題一是swiper-item裏面的內容若是是數組渲染出來，默認高度沒法撐開，我採用的辦法是添加css<swiper-item class='item' style="position:absolute;height:{{array.length*111}}px">swiper-item對應的數組個數*每一條的高度（高度本身在css設置），同時swiper也加上這個高度，這樣內容就能撐開了；二是輪播圖滑動的時候上面的導航自動切換，方法是在swiper上綁定事件bindchange='tabIndex’，e.detail.current爲輪播圖的當前索引，這樣便可實現雙向切換

　　tabIndex(e){

　　const current = e.detail.current;

　　this.setData({ currentTab: current});

　}

四、富文本插件wxParse解析html標籤拼接圖片使用的bug

　　解析連續圖片的時候,會發現圖片之間會有間隔,這是由於微信小程序自己的img標籤自帶間隔

　　解決:在通用wxss中設置

　　.wxParse-img{

　　display: flex;

　　}

五、金額格式化

顏色：金額紅色#e64340綠色#5dae6c

金額格式化

fmoney(s,n){

n=n>0&&n<=20?n:2;

s=parseFloat((s+'').replace(/[^\d\.-]/g,'')).toFixed(n)+'';

var l=s.split('.')[0].split('').reverse();

var r=s.split('.')[1];

var t='';

for(let i=0;i<l.length;i++){

t+=l[i]+((i+1)%3==0&&(i+1)!=l.length?',':'');

}

return t.split('').reverse().join('')+'.'+r;

六、微信支付過程

調用公司本身的接口傳總價（返回生成付款接口所需參數值）——成功——調用微信付款接口（wx.requestPayment）——成功提示付款成功——成功回調改變訂單狀態——跳轉到訂單列表頁面

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　調用微信付款接口（wx.requestPayment)——失敗提示「已取消支付」

若是是在微信開發者工具測試支付，接口調用成功會出現生成的付款二維碼，若是是手機微信上測試會直接彈出微信付款的界面，當時第一次用徹底瓜了，覺得手機微信上測試和微信開發者工具上測試同樣，心想難不成手機微信上支付還要拿個手機再掃碼付款麼？誰會那麼瓜，沒錯，是我了。

七、商品頁常見功能：

規格彈出後選擇好默認規格，選擇數量，增長和減小數量按鈕都必須加一個判斷函數

加入購物車、當即購買點擊後彈出規格界面，規格界面的確認按鈕條件渲染出來的，分別對應加入購物車和當即購買兩種類型；

加入購物車後購物車圖標有徽章顯示當前商品添加的商品數量；進入購物車經過結算跳轉到確認訂單頁面；

當即購買的確認後跳轉到確認訂單頁面

八、生成訂單邏輯：

a從商品詳情頁當即購買跳轉到確認訂單頁面

b是當商品詳情頁添加數量後跳轉購物車頁面，在購物車頁面點擊結算跳轉到確認訂單頁面

c確認訂單頁面收到的訂單狀態分這兩個方向；

九、滾動穿透bug

商品詳情頁規格彈出層包括三部分：商品介紹+規格部分+按鈕，規格部分用view，overflow:scroll/auto;達到滾動效果，規格部分全部點擊事件用的bind會冒泡，致使底部商品介紹頁跟着滾動；百度了方法，主要有兩種，1是給遮罩層加catchtouchmove屬性，值爲「{{true}}」,2是catchtouchmove=「move」，js部分寫一個move名的空函數，這兩種我都試了發現有bug，雖然規格部分滾動底部頁面起效果了，當規格部分滾動到底部再往上滑時，底部的介紹頁仍是會跟着滑動；而且彈出層的商品介紹和按鈕滑動底部仍是會滑；若是在整個彈出層加上catchtouchmove，規格部分又不能滾動了；

解決辦法：規格部分用scroll-view來寫，scroll-view、遮罩層、整個彈出層都加上catchtouchmove=「move」(js部分寫一個move名的空函數），整個彈出層滾動的確不會讓底部滾動，但仍是會出現規格部分滾動到規格底部時，介紹頁又出現滑動，只能說整體上好一點，最好的辦法仍是彈出層寫事件不用冒泡的就不會出底部滑動的效果

十、獲取用戶頭像、暱稱

直接用open-data組件可在頁面顯示，具體查看文檔

十一、返回頁面時將當前頁面的數據傳遞給上一層頁面，代碼以下，作項目是在下單時選擇地址時用到的，有個疑問是下單已有地址狀況下進入地址列表——再新添地址——保存新地址頁面，再返回到下單頁面就不是隔一層頁面了，因此我最早寫的s[s.length - 3]，測試後發現沒效果，打印s查看發現雖然我從下單頁面跳轉了兩次頁面，可是s[s.length - 2]纔是下單頁面，查資料明白s頁面第一個元素爲首頁，最後一個元素爲當前頁面。

const s = getCurrentPages();//返回值是數組

s[s.length - 2].setData({

address: address,

addressDetail: addressDetail,

showAddress: true

})

wx.navigateBack({});

十二、詳情頁面購買彈出層