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