微信小程序项目和后台管理系统总结

时间 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({});

十二、详情页面购买弹出层

过渡对display属性不起效果

1三、小程序图表

有个小项目是基于微信小程序的数据作分析，后来也作成图表类的小程序了，起初项目用了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();

}