入职一段时间了，才进新公司的做的项目就是小程序，第一周写了静态页面，我的地址和新增地址两个页面的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