入職一段時間了，才進新公司的做的項目就是小程序，第一周寫了靜態頁面，我的地址和新增地址兩個頁面的js邏輯用緩存寫的，起初沒想到那么細的邏輯，居然斷斷續續寫了兩天，后來來了個新同事寫了購物車頁面的邏輯。第二周由於公司其他人在趕其他小程序的項目，我和新同事的小程序項目就放了兩天，組長讓我們寫用vue做的后台管理系統的幾個頁面，先是看代碼，話說vue我只看教程寫過外賣app的項目，當時搭建框架我還過了三四遍才懂（前端新手從接觸前端開始完全自學的，這個公司也是我做前端找的第一個公司），拉下后台管理系統的代碼之后看的第一感覺是代碼量好大，好多組件好復雜，怎么辦我可能看不懂，更要命的是當時才換了pro的新電腦，webstorm還沒裝破解版的，nodejs也沒弄，還有環境變量沒設置，感覺所有頭痛的問題全碰到了！環境變量那個找網上教程怎么弄都沒弄好，到現在我也覺得很奇怪，nodejs安裝好了，直接npm install命令行能用了，直接仔細看代碼了，這次看代碼發現好多我還是能看懂的。
1是路由搭建跟自己試手的項目原理差不多的，由於實際項目頁面多很多，因此配置的頁面也非常多，第一次看到這種代碼真的嚇到了。
2是url用到了原型鏈,在入口函數main.js加了Vue.prototype.url = “”，后面頁面調用直接，this.url，之前為了面試倒是惡補了原型鏈繼承的知識點，但是實際到底怎么用沒接觸過，這算是學習到了
3是后台系統進入初始化登錄，是通過監聽$route屬性的變化進入登錄界面
watch: {
$route() {
if (!localStorage.getItem("login")) {
this.$router.push("/login");
}
}
}
This.$router.push({path:””}
4是請求用了axios，由於這個項目的好多一級目錄和二級目錄都寫好了，因此新寫頁面倒是簡單，看着模版寫就是了,敲代碼發現還有跨域處理設置
This.axios.post(url, params,{“widthCredentials”:true}).then(()=>{}).catch(()=>{})
5是整個項目用到了element-ui，這個聽在深圳的好基友提到過（同樣是自學她比我厲害多了），找到文檔試着寫頁面發現確實很好用，可以節省好多css代碼，每個組件的樣式部分的style標簽標有scoped屬性時表明style里的css樣式只適用於當前組件元素，公司的這個項目主要用到了el-table
二、微信小程序部分
vue的頁面寫完之后繼續寫小程序，第一天寫接口完全是懵逼狀態，公司發的api文檔是以前項目用的模版，有一些地方沒有改，第一天我完全不在狀態，又請教同事，第二天寫起來就好多了，下面總結一下小程序的坑，小程序很多坑文檔中是沒有的
1、去掉button的默認樣式，在css樣式加
2、navigator點擊時會有個默認背景，去掉默認樣式添加屬性hover-class="none"
3、切換既有輪播效果又可以自己點擊切換
首先內容板塊用輪播圖結構包起來，每個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});
}
解析連續圖片的時候,會發現圖片之間會有間隔,這是因為微信小程序本身的img標簽自帶間隔
解決:在通用wxss中設置
.wxParse-img{
display: flex;
}
5、金額格式化顏色：金額紅色#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;
},
6、微信支付過程
調用公司自己的接口傳總價（返回生成付款接口所需參數值）——成功——調用微信付款接口（wx.requestPayment）——成功提示付款成功——成功回調改變訂單狀態——跳轉到訂單列表頁面
調用微信付款接口（wx.requestPayment)——失敗提示“已取消支付”
如果是在微信開發者工具測試支付，接口調用成功會出現生成的付款二維碼，如果是手機微信上測試會直接彈出微信付款的界面，當時第一次用完全瓜了，以為手機微信上測試和微信開發者工具上測試一樣，心想難不成手機微信上支付還要拿個手機再掃碼付款么？誰會那么瓜，沒錯，是我了。
7、商品頁常見功能：
規格彈出后選擇好默認規格，選擇數量，增加和減少數量按鈕都必須加一個判斷函數
加入購物車、立即購買點擊后彈出規格界面，規格界面的確認按鈕條件渲染出來的，分別對應加入購物車和立即購買兩種類型；
加入購物車后購物車圖標有徽章顯示當前商品添加的商品數量；進入購物車通過結算跳轉到確認訂單頁面；
立即購買的確認后跳轉到確認訂單頁面
8、生成訂單邏輯：
a從商品詳情頁立即購買跳轉到確認訂單頁面
b是當商品詳情頁添加數量后跳轉購物車頁面，在購物車頁面點擊結算跳轉到確認訂單頁面
c確認訂單頁面收到的訂單狀態分這兩個方向；
9、滾動穿透bug
商品詳情頁規格彈出層包括三部分：商品介紹+規格部分+按鈕，規格部分用view，overflow:scroll/auto;達到滾動效果，規格部分所有點擊事件用的bind會冒泡，導致底部商品介紹頁跟着滾動；百度了方法，主要有兩種，1是給遮罩層加catchtouchmove屬性，值為“{{true}}”,2是catchtouchmove=“move”，js部分寫一個move名的空函數，這兩種我都試了發現有bug，雖然規格部分滾動底部頁面起效果了，當規格部分滾動到底部再往上滑時，底部的介紹頁還是會跟着滑動；並且彈出層的商品介紹和按鈕滑動底部還是會滑；如果在整個彈出層加上catchtouchmove，規格部分又不能滾動了；
解決辦法：規格部分用scroll-view來寫，scroll-view、遮罩層、整個彈出層都加上catchtouchmove=“move”(js部分寫一個move名的空函數），整個彈出層滾動的確不會讓底部滾動，但還是會出現規格部分滾動到規格底部時，介紹頁又出現滑動，只能說總體上好一點，最好的辦法還是彈出層寫事件不用冒泡的就不會出底部滑動的效果
10、獲取用戶頭像、昵稱
直接用open-data組件可在頁面顯示，具體查看文檔
11、返回頁面時將當前頁面的數據傳遞給上一層頁面，代碼如下，做項目是在下單時選擇地址時用到的，有個疑問是下單已有地址情況下進入地址列表——再新添地址——保存新地址頁面，再返回到下單頁面就不是隔一層頁面了，所以我最先寫的s[s.length - 3]，測試后發現沒效果，打印s查看發現雖然我從下單頁面跳轉了兩次頁面，但是s[s.length - 2]才是下單頁面，查資料明白s頁面第一個元素為首頁，最后一個元素為當前頁面。
12、詳情頁面購買彈出層
過渡對display屬性不起效果
13、小程序圖表
有個小項目是基於微信小程序的數據做分析，后來也做成圖表類的小程序了，起初項目用了echarts，體積超級大，都超過2M了，於是跟一起開發的妹子說我這邊重新在網上找個圖表插件，然后發現了wxcharts,地址https://github.com/xiaolin3303/wx-charts-demo