⼩程序项⽬和后台管理系统总结
  ⼊职⼀段时间了，才进新公司的做的项⽬就是⼩程序，第⼀周写了静态页⾯，我的地址和新增地址两个页⾯的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 (!Item("login")) {
this.$router.push("/login");
}
}
}
js实现轮播图最简代码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' >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，地址github/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) {
Fixed(2) + '元';
}
}],
yAxis: {
title: '租赁⾦额 (元)',
format: function(val) {
Fixed(2);
},
min: 0
},
width: rect.width,
height: rect.height
});
}).exec();
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。