前段时间刚写完一个mpvue的小程序，现在得闲必须赶紧记录和总结一下，不然很多东西又要忘了

我是比较熟悉vue的语法，但是也犹豫过是用原生还是用mpvue，因为那时候原生小程序已经相当成熟而mpvue才刚出来（踩坑和填坑的前人还很少）

所以我学习了几天原生的框架和语法，果断选择了mpvue，真的是没有对比就没有伤害，对比原生体验不要太好

mpvue是一个使用 Vue.js 开发小程序的前端框架，他是将我们写的vue文件重新编译成wxml等文件，最后的底层实现还是用的小程序语法，所以原生小程序语法也是比较重要的，而且像很多下拉刷新，到底部请求下一页什么的等等很多地方也是要用到小程序api的，所以建议大家在入坑之前还是了解一些小程序语法比较好

附上官方文档http://mpvue.com/#_1

项目配置

使用官方的5分钟上手，生成一个基本框架，后来开发也没有手动修改过他的配置

用到了4个插件

mpvue-weui ui库，相当方便轻量好使

官网地址：http://kuangpf.com/mpvue-weui/#/

mpvue-toast 一个基于mpvue的简单弹窗组件

因为mpvue目前还不支持全局的组件，所以没有办法像vue组件引入一次就能在所有页面使用，但是mpvue团队已经在考虑新增全局组件功能了

github地址：https://github.com/linrui1994/mpvue-toast

sass 不多介绍

全局安装：npm install sass-loader node-sass --save-dev

在style节点加上lang=”scss”，这样就可以愉快地使用sass进行开发了

mpvue-router-patch 在mpvue 中使用 vue-router 兼容的路由写法

当知道mpvue不支持vue-router的时候我还是非常难受，还好mpvue团队后面发布了这个插件，非常简单好用

github地址：https://github.com/F-loat/mpvue-router-patch

<u>接下来的3个插件我没有用过但是和mpvue-router-patch一样是mpvue团队发布的，感觉应该也不差，也推荐给大家如果需要可以花时间了解一下</u>

mpvue-echarts 适用于 Mpvue 的 ECharts 组件

github地址：https://github.com/F-loat/mpvue-echarts

微信小程序富文本解析组件 适用于 Mpvue 的微信小程序富文本解析自定义组件

github地址：https://github.com/F-loat/mpvue-wxParse

mpvue-entry自动生成各页面的入口文件 集中式页面配置，自动生成各页面的入口文件，优化目录结构，支持新增页面热更新

github地址：https://github.com/F-loat/mpvue-entry

ajax请求封装拿走不谢

let urlPath = '' // 项目的域名
export function post(url, data) {
  wx.showLoading({
    title: '努力加载中',
  })
// 由于微信不会保存后端用于登陆验证的cookie，这里需要自己从登陆返回的数据里取到cookie，然后本地缓存，请求时在header里带上cookie
  let header = {} 
  url === 'user/loginworker' // 通过传进来的url判断是否是登陆页
    ? header = {} 
    : header = {
      'content-type': 'application/x-www-form-urlencoded',
      'cookie': wx.getStorageSync("sessionid")
    } 
  return new Promise((resolve, reject) => {
    wx.request({
      url: urlPath + url,
      data: data,
      method: 'get',
      header: header, success(res) {
        console.log(res)
        if (res.statusCode === 200) {
          if (res.data === 9999) { // 与后端的后端返回9999表示cookie失效
            wx.showModal({
              content: '登陆超时请重新登陆',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  wx.navigateTo({
                    url: '../../pages/login/main',
                  })
                }
              }
            })
          } else if (res.data.code && res.data.code !== 200) { // 若返回coode码且不等于200表示传入参数有问题
            res.message = res.data.message, reject(res)
          } else resolve(res)
            // 存储cookie
          res.data.message === '登录成功。' ? wx.setStorageSync("sessionid", res.header["Set-Cookie"]) : ""
        }else {
          res.message = '服务器错误请求失败'
          reject(res)
        }
        wx.hideLoading()
      }, fail(err) {
        err.message = '请求超时请稍后再试'
        reject (err)
        wx.hideLoading()
      }
    })
  })
}

image

生命周期钩子

created是vue的生命周期在mpvue里所有页面的created函数会在项目加载的时候被一起调用，可用性不大，可以使用onShow()代替，但是onShow()只有在隐藏又显示后才会显示,也就是第一次加载不会执行

 created() {
    console.log('created')
  },
  mounted() {
    console.log('mounted')
  },
  onLoad() {
    console.log('onLoad')
  },
  onShow() {
    console.log('onShow')
  },
  onUnload() {
    console.log('onUnload')
  },
  onHide() {
    console.log('onHide')
  },

image

页面跳转后并没有销毁页面实例

比如一个搜索页面，页面第一次进来所有的数据都是空的，但你搜索一次之后，input框就有值了，这个时候再跳转到其他页面或者返回之后再进入这个页面那个值依然存在，页面跳转后并没有销毁页面实例，而是将其推入页面栈中，所以会保存之前的旧的数据，目前为止看到的比较统一的解决办法就是：在onShow()或者onLoad()手动清空

关于微信直播

这个小程序需要引入监控相当于是直播功能，这个组件也是有点坑

Live-player组件本身只能播放，如果想要在组件上加功能，像什么全屏静音播放暂停之类的功能需要使用wx.createLivePlayerContext()方法，而且由于live-player层级是最高的，如果你需要在组件上加功能比如点一下全屏再点下退出全屏或者加css样式，你必须写在 cover-view cover-image上面，直接加在live-player上是没用的

<live-player id='liveInfo' src="" mode="live" autoplay='false' @bindstatechange="statechange" binderror="error">
    <cover-image @click="requestFullScreen"></cover-image>
</live-player>

image

你以为这样就完了嘛，不，如果你有一个直播列表，比如一个屏幕同时有一个以上的live-player组件那么你全屏的时候就会发现其余的组件因为层级的原因全部覆盖在你全屏的那个组件之上

解决办法：全屏是v-if隐藏其余的组件，退出时再显示

作者：没事儿啊
链接：https://www.jianshu.com/p/e22590a2f4bc
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。