YS分销商城项目（前端）总结

魏晓巍

发布于 2020.02.06 21:29 阅读 2724 评论 0

YS分销商城是一款基于微信公众号的商城系统，其中后台的分销功能比较复杂，而移动端与后台管理在逻辑上则比较简单，但是本次开发用到了一些新的UI和技术，也出现了一些问题，所以在这里认真总结。

一、YS分销商城项目使用到的技术

前端的管理系统与移动端都使用了vue-element-admin作为基础架构。

在公司开发过程中，后台管理通常使用vue-element-admin，而移动端则不使用，本次开发过程中第一次使用vue-element-admin作为移动端的框架。不得不说vue-element-admin作为一款为vue定制服务的框架，拥有很多优秀的特性，拿来作为移动端开发也是非常合适的。

在后台管理系统中使用了element-ui作为ui组件，这是比较常见的用法；而在移动端的开发过程总，我们选择了vant（一款有赞前端团队封装的移动端组件），这款组件库的优势在于它封装了一些商城常用的组件，比如商品卡片，商品导航栏等。

由于商城系统存在分销和支付功能，所以在移动端的开发过程中，还使用到了微信提供的分享（用于分销功能）接口和支付接口。

二、开发过程中遇到的问题与收获

由于之前开发过类似的项目，只是移动端之前使用了jsp，本次开发使用的是vue-element-admin，所以开发中的一些技术和处理方式都借鉴了之前的项目，正是由于对微信公众号开发认识不够深入，导致造成了很多错误。而在后台开发过程中遇到的问题则比较少。下面总结一下开发过程中遇到的问题以及解决的方式。

1.微信公众号不支持vue的hash路由方式作为微信获取signature签名的url

微信官方提供的JS-SDK（微信公众平台面向网页开发者提供的基于微信内的网页开发工具包）中，需要开发人员通过config接口注入权限，在微信环境中正确获取权限后，才可以正确配置分享功能。在前端，我们通常使用微信提供的js文件进行参数的获取一下信息，这里不过多赘述了。在使用这个文件提供的获取信息的方法，我们需要传递两个参数，分别是当前页面的url地址与微信公众号的唯一身份证明appid，返回的数据则是以下几个参数。在使用这个方法的时候，我们传递的url这个参数，必须是不带“#”的地址，如果带了“#”,返回的signature签名就会是错误的，从而导致获取不到config接口的注入权限。

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

导致这个问题的原因就是在vue-router路由对象中，路由有两种模式：hash和history，而默认的是hash模式。在往常的项目开发中，我们在开发后台管理系统的时候通常不注重路由模式，使用的路由模式都是默认的hash模式，从来没有使用过history模式作为路由模式。简单来说，history模式较hash模式来说，在路由地址上去除了“#”，通过这样的改变，让路由地址符合获取signature签名的形式。

2.ios设备不支持使用当前页面url获取signature签名

在成功的解决了由于url地址中带有“#”造成的获取signature签名错误的问题后，又出现了另外一个比较严重的问题，就是ios设备在获取signature签名的时候，仍然不能正确获取到signature签名。这个问题是由于ios需要发送进入的第一个页面的url，作为获取signature签名的凭证，所以我们要在第一个页面就获取到url的地址，并且将它保存到内存中。在这里我们首先判断内存中是否已经存储了第一个页面的地址，如果没有存储，则将当前地址存入内存，通过这样的方式我们就可以成功获取到第一个页面的url了。

在获取到第一个页面的url地址之后，在使用获取微信签名的方法时，我们通过navigator.userAgent方法获取到设备信息，并且通过includes方法判断配置信息中是否存在“iPhone”与“iPad”字符串，如果存在则说明是ios设备，在这时我们获取signature签名时就是用第一个内存中存储的第一个页面的url地址，否则使用当前url地址。通过这样的处理方法后，我们就可以成功的对ios和Android设备进行获取正确的signature签名。

3.微信支付回调的使用

微信支付是我们在微信公众号商城系统中开发常用的一个接口，在之前的项目开发中也使用过微信支付接口，但是在本项目的开发过程中，由于在基础代码上犯了一个错误，并且微信支付只有在部署的线上环境才可以测试，所以一直没有关注到出现的问题，由于犯得错误比较低级，没有特别说明的必要，我在这里总结一下微信支付的接口使用以及回调的使用，加以总结，杜绝以后再犯类似错误。

微信支付接口使用时，和分享功能一样，需要配置参数，与分享不同的是，分享使用的是前端获取signature签名以及其他信息，而支付接口需要后台配合来获取这些信息，这样的获取方式保证了支付的安全性。在成功传入正确参数后，微信会调用支付模块来进行支付操作，在支付结束后，我们通过回调函数，可以对返回的信息进行处理，从而进行下一步操作。

微信支付结束后，会返回三种回调信息，分别是：get_brand_wcpay_request:ok（支付成功）get_brand_wcpay_request:cancel（支付取消）、get_brand_wcpay_request:fail（支付失败）以及total_fee（调用支付JSAPI缺少参数）。在开发过程中，我将这四种状态分为三种情况，分别是支付成功、已取消支付与支付失败。通过回调函数判断回调信息是否与对应信息相同，来对这些状态进行判断，并且进行回调。由于项目中在支付前就已经生成了订单，所以这三种状态我都处理为提示对应信息后跳转到订单页面。

WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                'appId': that.payInfo.appId,     //公众号名称，由商户传入
                'timeStamp': that.payInfo.timeStamp + '',//时间戳，自1970年以来的秒数
                'nonceStr': that.payInfo.nonceStr, //随机串
                'package': that.payInfo.package,
                'signType': that.payInfo.signType,//微信签名方式：
                'paySign': that.payInfo.sign, //微信签名
              },
              //回调函数
              function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  that.$toast.success('支付成功！');
                  that.$router.replace({path: '/mine-order'});
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                  that.$toast('已取消支付！');
                  that.$router.replace({path: '/mine-order'});
                } else {
                  that.$toast.fail('支付失败！');
                  that.$router.replace({path: '/mine-order'});
                }
              });
        }).catch(() => {
          // on cancel
        })

4.vant组件的使用

本次开发是第一次使用vant组件，在之前的移动端开发过程中，我是用的比较多的是weui，weui作为微信公众号发开组件还是不错的，但是他也有很多问题，比如：组件样式过于单一，组件功能不全等，所以在使用的过程中可能需要很多其他第三方的库来进行补充。本次使用的vant组件是有赞商城前端开发团队封装的组件库，不仅提供了多种多样的组件，还提供了商城系统中常使用的商品卡片，商品导航栏等，为开发提供了很大的便利。但是由于vant组件官网给出的资料较少，而且有些组件封装的比较死，使用起来可能不太灵活，但是这完全不影响vant成为一款优秀的前端组件库。由于第一次使用vant，遇到了一些问题，下面加以总结。

(1).vant组件的引入

第一步，通过npm i vant -S在项目入安装vant组件。

第二部，在main.js文件中引用和使用vant组件。

通过安装以及全局引用vant组件，就可以在项目中使用vant组件了。

(2).组件中价格格式问题

之前的项目开发中，没有使用过封装起来的商品卡片，对于向内传值存在着误解，有一些组件需要传递以元为单位的价格，有些组件需要传递以分为单位的价格，一旦没有注意价格的格式，就会造成显示错误。而vant组件中的价格格式也不是固定的，在商品卡片中使用的是以元为单位的格式，而在提交订单栏使用了以分为单位的格式，不知道为什么vant团队这样封装，在使用过程中我比较迷惑。

//vant提供的商品卡片组件，价格以元为单位
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>

//vant提供的提交订单栏组件，价格以分为单位
<van-submit-bar
  :price="3050"
  button-text="提交订单"
  @submit="onSubmit"
/>

(3).组件中的样式问题

在使用vant的button按钮组件的过程中，遇到了一些问题，就是在自定义按钮内文字颜色的时候，使用行间样式或者一般的声明方法是不行的，在打包后会被vant组件自带的样式覆盖，所以要使用deep进行样式的声明。通过这样的方式，才能彻底改变组件文字颜色。

  .btn1 /deep/.van-button--danger .van-button__text{
    color: #ffffff !important;
  }

  .btn1 /deep/.van-button__text{
    color: #ffffff !important;
  }

由于vant组件是第一次使用，解除的时间也很短，在这里不能详细介绍所有的功能，在接下来的工作和学习中，会着重对vant组件进行学习和总结，在以后的文章中加以介绍。

5.element-ui使用过程中遇到的问题

element-ui是一款使用比较多，使用时间比较长的ui组件库，但是在本次开发过程中，遇到了一个小问题，在这里把它总结一下。

本次开发过程中，由于要对商品价格进行管理，所以使用了element-ui中的InputNumber计数器，在对价格进行管理的时候需要保留两位小数，InputNumber组件自身提供了一个数值精度的属性precision，可以通过这个属性来控制保留几位小数，但是在开发过程中发现，对于整数的数组，这个属性并不会发挥作用，比如：2.00这个数字，在赋值给绑定的对应变量时，会变成2。为了解决这个问题，在调用接口的时候，在需要保留两位小数点的变量后面加上Fixed(2)，以保证传递的参数是正确的保留两位小数的数字。

三、本次项目开发的心得体会

这次项目的时间是在年底临近春节，项目要求比较急，并且第一次使用vant组件以及第一次使用vue-element-admin来作为移动端的框架，所以遇到了一些不太好解决的问题，在解决问题以及开发项目的过程中，我有一些体会以及对自己的反思。

首先，作为一名前端的开发人员，对于前端技术特别是基础的技术要熟练，这次项目由于一些技术上的不足，导致问题迟迟没有解决，非常的不应该。第二，对于一个技术或者一个库要深挖其中的原理和用法，要做到胸有成竹，只有这样在开发过程中才能顺利解决问题。第三，认识到了自己和其他优秀开发人员的差距，对于一些细节的问题很难及时发现，由于经验上的不足会对一些问题固步自封或者毫无头绪，这是开发经验上的不足，也是技术上的差距。

在这次项目结束后，要对技术上的不足之处多作提高，对于运用过的技术及时巩固，对于新技术及时学习，跟上时代的步伐，在一点一滴中积累和进步。

发表评论