想高效开发小程序，mpvue了解下（一）

序言

小程序一定是今年热门话题之一，对于我们开发者来讲，开发小程序也是属于我们的技能之一了。从去年我也玩过小程序，但当时处于内测的阶段，各种反人类的设计都有，连es6都不支持，只能说瞎折腾了。到了如今，小程序迎来春天，友好度提高了不少，wepy、taro与mpvue的出现也带来更高的开发效率。

什么是mpvue

是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

上面那段话语，是引用官方文档（http://mpvue.com/）的一段简介，简单的总结下，他有以下几个亮点：

• 跟vue一样的开发体验,包括vuex

• H5代码转换编译成小程序目标代码的能力。

也就是说，只要会vue，学习成本基本为0。这对于前端来讲，开发过程是很舒服的。

完成一个demo

学习一个新知识，实操才是最重要的一环。这一小节，将会完成一个简单的开发流程。

1. 安装vue-cli
   任意框架的使用都离不开脚手架的搭建，而mpvue跟vue一样依赖的便是vuecli，这也是为啥说，掌握vue的原理，基本mpvue也就直接用了。
   首先，安装下vuecli这一脚手架。

    npm install --g vue-cli

安装完后，我们需要执行下vue这一命令，来检测安装是否成功。

 vue 

1. 开始构建项目
   执行以下命令，用来自动构建一个项目（构建过程会进行工具的选择，其中包括Eslint的使用，如果没用过的可以选择n，同时会生成一系列的文件）

 vue init mpvue/mpvue-quickstart test-mpvue

1. 安装依赖以及运行项目
   项目生成后，为了保证运行成功，需要先install一下依赖包，可以使用这一命令。

 npm install

不过呢，由于npm是国外的，因此会下载比较慢，可以考虑下使用cnpm 淘宝镜像来下载依赖，使用以下命令

 npm install -g cnpm --registry=https://registry.npm.taobao.org

运行成功后，便可以直接使用来快速安装依赖。

 cnpm install

1. 微信开发工具
   项目运行成功之后，便下载微信开发工具并且打开小程序的入口，项目目录填的是【test-mpvue】-【dist】；APPID填写的是从【微信公众号】-【设置】-【AppID】获取到的值,项目名称任意填即可。

架构优化

前面的步骤完成后，项目的基本模板已经生成，不过呢，参照小程序的官方文档（https://developers.weixin.qq.com/miniprogram/dev/api/）之后，发现还是有一些硬性的要求，例如wx.request

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

在上面的代码中，header字段是固定的，完全可以封装一个tool，包括url的前缀也是固定不变的，因此可以以传参的方式以及暴露一个promise来进行调用，这样的代码不仅维护性高，而且也具有较强的复用性。

着手开发

1.在项目架构中，找到造轮子的文件夹【src】-【utils】，新建一个文件【request.js】。

let urlPath = 'https://xxx';
export function request(url,data) {
  return new Promise((resolve,reject) => {
    wx.request({
      url: urlPath + url,
      data: data,
      method:'post',
      header: {
          'content-type': 'application/json'
      },
      success(res) {
        resolve(res.data)  
      },
      fail(ret) {
        reject(ret)    
      }
    })
  })
} 

从代码上来看，通过url，data的传参，从而进行wx.request的请求，同时return一个promise实例用于调用。
2.在【src】-【app.vue】中引用request.js文件， 发起请求。

import {request} from '/src/utils/request.js'
exports default{
   mounted () {
     this.fetchData();
   },
   methods:{
     async fetchData(){
        let res = await request('aaaaa',{bbb:''})
     }
   }
}

总结

mpvue结合了原生小程序的开发能力和Vue能力，开发起来能够更加便捷高效，当然也可以像vue一样使用vuex机制进行状态数据管理，这次主要完成了mpvue的使用流程以及开发小程序所应该掌握的多个代码部分 。“纸上得来终觉浅，绝知此事要躬行”，要真正学会mpvue进行开发，还得多敲代码，这样才能够更加深刻地认识mpvue。