mpvue开发项目总结(从0到上线)

1.简言

为期一个半月的小程序开发，其中夹杂其他项目的功能迭代，跌跌撞撞的将项目完成了，今天中秋节放假前一天，以此来记录下此次打怪升级的心得与分享其中遇到花费时间的问题。

因为此次开发的是一个类电商项目，从先发布一个上线一个招募页招募用户，在开发文章页面，文章详情，商品详情，sku联动，创建订单，绑定银行卡，创建customer,购买支付，订单列表(全部，未付款，已发货，已收货)，订单详情，物流详情，用户信息，地址管理，成立团队，分享与发布到朋友圈推广等。不想原生小程序的结构目录复杂，数据绑定不方便，唯一的好处只用踩官方小程序的坑，所以考虑使用美团的mpvue，查找文档可以使用在mpve的基础上更接近vue风格开发，不用写个vue页面还要在写个main.js配置小程序json配置，路由和配置写在一起，并且帮你做了flyio和拦截器的封装和常用方法的封装，可以根据你的业务架构在此基础上更改你的框架。使用下图的倒数第二个，传送门：mpvue-cli (感谢spencer1994对社区做出的贡献)

2.将在mpvue-simple-cli的基础上更改自己的业务结构，封装自己的方法和组件，添加自己的常量与封装方法。

将自己项目分享，只有简单的三个test页面demo，没有一点业务代码，封装的方法有些保留，可以分享，UI使用有赞mpvue-zanu，感兴趣可以简单看一下，希望对你有一些帮助，本人只是一个工作不久的小白，写的代码有点kou jiao，望见谅。

项目地址：mpvue-project

3.记录下在开发中遇到的坑吧以及解决办法，小问题不做记录，希望有遇到同样问题的小伙伴能及时解决，或者有更赞的方法希望给我指正。

1.mpvue生命周期问题以及小程序生命周期，mpveue created每个页面都会加载一次，其余方法只会进来执行一次，如果需要更新页面可以使用小程序的onShow。

2.tabBar只能使用本地图片,不能使用网络图片，建议81px x 81px,跳转到带tabBar对应的页面只能使用wx.switchTab,并且不能传参数，可以使用vuex，如登录状态。

3.改版后使用wx.getUserInfo()不再弹出授权弹窗，使用wx.getSetting，成功回调里判断是否授权过用户信息 。可以使用button组件弹出授权弹窗。

<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo" class="fun-btn">使用微信登录</button>

4.同一路由切换，会保留上一个页面的数据，如这个issue(https://github.com/Meituan-Dianping/mpvue/issues/140),可以在加载时使用下面方法，先将数据恢复为默认数据。

onLoad (options){
  Object.assign(this, this.$options.data()) // 解决相同保留上一个页面的数据 （https://github.com/Meituan-Dianping/mpvue/issues/300）
}

5.手机线上video在ios上黑屏或赚菊花，安卓正常。看到社区上记录了关于所有小程序video的问题(https://developers.weixin.qq.com/community/develop/doc/0006e2923d09c0fc88d6aea965b800)，也没有发现有人给出解决方法，经过调查时因为七牛云的路径中带中文，因此admin后台上传视频不要有中文，微信api下载图片路径也不能有中文,否则也下载不了，会有转码问题。

6.在写遮罩层和弹出框会出现触摸穿透和滚动穿透，可以使用touchMove.stop和touchend.stop

<scroll-view :scroll-y="hideModal"  @touchmove.stop="moveStop" >
    //滚动内容 hideModal是否弹出弹出框
</scroll-view>
<!-- 底部弹出框 -->
<div class="modals" v-if="!hideModal" @touchmove.stop="moveStop" @touchend.stop="moveStop">

7.分享到朋友圈，微信小程序不提供api，只能通过canvas然后在保存图片到手机，可以使用wx.getSystemInfo获取设备信息，根据宽高来自使用，因为手机dpi不同，因为可能不止画一张图片，如果使用wx.getImageInfo嵌套的话会一个一个请求依次进行，导出加载慢白屏时间多，因此只有将微信小程序api promise化异步加载，网上有人说使用bluebird,发现在mpvue会报如下错误，因此业内推荐使用es6-promise,并且使体积更小。

 import Promise from 'es6-promise' // 业内推荐使用es6-promise (bluebird会报错，并且es6-promise比bluebird体积小三倍)

const wxGetImageInfo = this.wxPromisify(wx.getImageInfo)

fly.all([
        wxGetImageInfo({
          src: 'https://xxxx.png'
        }),
        wxGetImageInfo({
          src: 'https://xxxxxx.jpeg'
        }),
        wxGetImageInfo({
          src: 'https://xxxx.jpg'
        })
      ]).then(function (res) {}) 

wxPromisify(fn) {
        return function (obj = {}) {
          return new Promise((resolve, reject) => {
            obj.success = function (res) {
              resolve(res)
            }

            obj.fail = function (res) {
              reject(res)
            }

            fn(obj)
          })
        }
      },       

8.分享到朋友圈，生成二维码，只能是线上发布程序，并且A与C方案有10万条限制，可以使用B方案。

9.在mpvue封装vue组件的时候不推荐将要双向绑定的input封装到组件中,我试过很多办法，虽然解决了父子组件间双向绑定通讯问题，但一直解决不了光标闪烁问题，影响体验，花了一定时间之后没有再尝试解决，就没有封装Input到其中。

10.注意小程序页面跳转的几个方法，注意栈的问题，使用wx.navigateTo和wx.redirecTo会有页面计入栈，虽然可以传参数更新页面，但是支付成功后到订单详情返回后会到下单页面，希望到购买商品页面，如美团外卖逻辑，因此在选择地址后使用wx.navigateBack，但是返回到上一页面又不能添加参数更细地址，因此使用eventBus解决地址数据更新，选择地址页面使用event.emit(''AddressDataChanged,address),

下单页面监听事件，更改数据，event.on('AddressDataChanged',this, function(newAddress){})

// event.js(eventBus)
let events = {}

function on(name, self, callback) {
  var tuple = [self, callback]
  var callbacks = events[name]
  if (Array.isArray(callbacks)) {
    callbacks.push(tuple)
  } else {
    events[name] = [tuple]
  }
}

function remove(name, self) {
  var callbacks = events[name]
  if (Array.isArray(callbacks)) {
    events[name] = callbacks.filter((tuple) => {
      return tuple[0] !== self
    })
  }
}

function emit(name, data) {
  var callbacks = events[name]
  if (Array.isArray(callbacks)) {
    callbacks.map((tuple) => {
      var self = tuple[0]
      var callback = tuple[1]
      callback.call(self, data)
    })
  }
}

exports.on = on
exports.remove = remove
exports.emit = emit

10. map、video、canvas、camera、live-player、live-pusher等组件index问题，可以使用cover-view

11.其中a9cdn-replacer.js与a9cdn-uploader.js 是我们老大写的一键将图片hash值并且上传到七牛云，需要配置，具体参考github：七牛云图片上传

　

-----原创文章，©版权所有，转载请注明标明出处：http://www.cnblogs.com/doinbean