Vue

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

　　　　button::after{

　　　　　　border:none;

　　　　　　line-height: 0;

　　　　}

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});

  　}

 

4、富文本插件wxParse解析html标签拼接图片使用的bug

　　解析连续图片的时候,会发现图片之间会有间隔,这是因为微信小程序本身的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页面第一个元素为首页，最后一个元素为当前页面。

const s = getCurrentPages();//返回值是数组

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

address: address,

addressDetail: addressDetail,

showAddress: true

})

wx.navigateBack({});

12、详情页面购买弹出层

过渡对display属性不起效果

13、小程序图表

有个小项目是基于微信小程序的数据做分析，后来也做成图表类的小程序了，起初项目用了echarts，体积超级大，都超过2M了，于是跟一起开发的妹子说我这边重新在网上找个图表插件，然后发现了wxcharts,地址https://github.com/xiaolin3303/wx-charts-demo

charts2: function() {

var query = wx.createSelectorQuery();

var that = this;

query.select('.chart').boundingClientRect(function(rect) {

that.setData({

canvasWidth: rect.width,

canvasHeight: rect.height

})

//租赁额

new wxCharts({

canvasId: 'canvas2',

type: 'line',

categories: that.data.categories2,

series: [{

name: '租赁量',

data: that.data.leaseData,

format: function(val) {

return val.toFixed(2) + '元';

}

}],

yAxis: {

title: '租赁金额 (元)',

format: function(val) {

return val.toFixed(2);

},

min: 0

},

width: rect.width,

height: rect.height

});

}).exec();

}