手记

想高效开发小程序,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。


0人推荐
随时随地看视频
慕课网APP