V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
noahlam
V2EX  ›  JavaScript

美团 mpvue 入门教程

  •  1
     
  •   noahlam · 2018-04-19 14:13:58 +08:00 · 16401 次点击
    这是一个创建于 2413 天前的主题,其中的信息可能已经有所发展或是发生改变。

    美团小程序框架 mpvue 入门教程

    自打写了 美团小程序框架 mpvue 蹲坑指南, 一发不可收拾,今天趁周末空闲,来写个 mpvue(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷。

    另外,我还专门为本文做了一个简单的项目,如果懒得从头开始搭项目的童鞋,可以直接去我的 github上克隆到本地, 安装一下依赖,即可直接在此基础在开发,不需要做任何配置。如果你觉得该项目对有帮助, 请顺便给我 Star,你们的支持是我最大的动力,谢谢!

    好了,我们进入主题,首先,请允许引用一下美团官方对 mpvue 的介绍

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

    主要特性

    使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:

    1. 彻底的组件化开发能力:提高代码复用性
    2. 完整的 Vue.js 开发体验
    3. 方便的 Vuex 数据管理方案:方便构建复杂应用
    4. 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
    5. 支持使用 npm 外部依赖
    6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
    7. H5 代码转换编译成小程序目标代码的能力

    开始

    学习最好的方式就动手,我们就徒手撸一个 demo 项目出来跑一跑,看看到底有没有官方说的那么好。 如果你有过 vue 的开发经历,相信你会对这个过程非常熟悉,甚至你都不需要安装其他工具, 直接用 vue-cli 创建项目,如果你一起没安装过 vue-cli,那么你要先运行一下命令

    npm install --g vue-cli
    

    安装完 vue-cli 以后,我们就可以运行一下命令,来自动构建一个项目(期间会询问你是否使用一些工具 /插件, 请根据自己的实际情况选择 y 或 n,对于不懂得该选 y 还是 n 的,统统选 n )

    vue init mpvue/mpvue-quickstart test-wxapp
    

    然后 进入我们创建的项目,并安装依赖

    cd test-wxapp
    npm i
    

    最后,在运行一下我们的开发服务

    npm run dev
    

    项目就跑起来了,这个时候,我们打开微信开发者工具,选择小程序,然后新建一个,项目目录填 我们项目目录下的dist目录 test-wxapp/dist,就可以看到效果了

    进阶

    到此为止,一个基本的项目就完成了,但是,本文的目的不是让你学会搭一个空项目的,空项目的话,我觉得官方教程做的已经够好了。 接下来,我们来删掉几个示例文件,然后一步步添加页面. 首先,我们看一下项目的配置文件 /src/main.js 里面的初始内容如下:

    import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    App.mpType = 'app'
    
    const app = new Vue(App)
    app.$mount()
    
    export default {
      // 这个字段走 app.json
      config: {
        // 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去
        pages: ['pages/logs/main', '^pages/index/main'],
        window: {
          backgroundTextStyle: 'light',
          navigationBarBackgroundColor: '#fff',
          navigationBarTitleText: 'WeChat',
          navigationBarTextStyle: 'black'
        }
      }
    }
    

    这里的 config 字段下面的内容,就是整个小程序的全局配置了,其中pages是页面的路由,window则是页面的一些配置(大部分都是顶部栏的配置) ,这些配置,最终都会被打包到原生小程序的app.json,对这些配置不了解的,建议看一下微信方法的小程序文档,这里不做赘述。

    我们先把/src/pages 下面的counterlogs两个文件夹删掉,只保留一个index ,顺便把 /src/components 文件夹下面的文件也全删掉, 然后把/src/main.js 里面的 config.pages里面多余的路由也删掉,只保留一条['^pages/index/main'],这样目前就只有个 index 页面,

    然后我们打开/src/pages/index/index.vue 我们把里面多余的代码删掉,只保留一个基础骨架

    <template>
      <div class="container">
           我是首页
      </div>
    </template>
    
    <script>
    
    export default {
      data () {
        return { }
      },
      methods: {},
    
      created () {}
    }
    </script>
    
    <style scoped>
    
    </style>
    

    tip /src/utils/index.js 是一个公共函数库,里面只有一个简单的格式化日期函数,不要也可以删掉

    到目前为止,一个干净的空项目就算是 ok 了,接下来我们来对微信原生的一些反人类的东西来做一下优化。

    一、先用 mptoast 组件代替官方提供的 wx.showToast, wx.showToast 诸多不便我就不说了,关键是还有坑 小程序基础库比较低的,不管你怎么设置,总是会在弹窗里面加一个钩钩,有时候我想弹出错误消息也是打钩, 严重误导用户,字数上还有限制有带 icon 的不能超过 7 个字,你说说,你说说 7 个字够干嘛的, 那我们来看看 mptoast,据官方介绍mptoast 具有轻量,配置少,冗余少,使用简单,可定制性强等特点

    我们开根据官方介绍,从 npm 引入并配置

    npm i vuex
    npm i mptoast -D
    

    在项目的主配置文件(一般位于 src/main.js )加入以下代码

    import mpvueToastRegistry from 'mptoast/registry'
    mpvueToastRegistry(Vue)
    

    在你需要弹窗的页面,引入组件,并注册,然后在页面内加入一个你注册的组件,就可以在 js 里面调用 this.$mptoast()了, 以下是一个简单的实例

    <template>
      <div>
        <-- 省略其他代码 -->
        <mptoast />
      </div>
    </template>
    
    <script>
    import mptoast from 'mptoast'
    
    export default {
      components: {
        mptoast
      },
      data () {
        return {}
      },
      methods: {
        showToast () {
          this.$mptoast('我是提示信息')
        },
      }
    }
    </script>
    

    使用起来还是蛮简单的

    二,用 promise 封装异步请求函数 在小程序的环境下面,要想发送一个外部请求,我们只能使用小程序官方提供的 wx.request 方法, 但是该方法的代码风跟跟 Jquery 年代的 Ajax 一样,都散靠回调来处理请求响应,如果有很多层回调, 就会有很多层嵌套,这让我们这些平时被 async-await 惯坏的人怎么接受?

    所以,建完基本项目,我们要做的第一件事,就是用 wx.request 自己封装一个基于 promise 的异步请求方法。 我们先来看一下 wx.request 的一个官方示例代码

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

    可以看到,每次请求都要发送一大堆的东西,重点少这些东西里面,很可能对于一个项目来说, 绝大部分都是固定不变的,那这样,不是冗余了么。

    tip: 更多 wx.request 参数,请参考 微信官方文档

    我们分析一下,第一个参数是 url,也就是我们请求的地址,这个应该是每次都不一样的,但是,不一样的应该也只是 url 的最后一部分, 接口名称的位置不一样,前面的服务器地址一般都是一样的,例如http://www.abc.com/api/member/login 对于同一个项目的所有接口 服务器地址http://www.abc.com/api/应该都是一样的,不一样的只是后面的接口名称member/login, 那我们可以把 url 拆分成 服务器地址 + 接口名称,这样做也方便后期上线的时候,切换服务器地址。

    第二个参数是请求的参数,请求的参数应该是每次都不一样的,所以这个我们就不做修改(事实上实际应用中, 经常有可能出现需要每个接口都带一个 token 的,我们也可以在这里统一加上去,不过这里就不做深入)

    第三个参数是 请求头,这个一般同一个项目里面,这些都是一样的,所以我们就写死。 这里还有一个参数method请求方法, 这里因为使用默认值 GET,所以就没列出,我们这边需要做设置,因为现在前后分离的模式,现在基本上大部分都是 POST 请求,所以我们这边也写死成 method:'POST'

    最后一个就是处理请求结果回调函数,示例里面只有一个请求成功的回调,其实我们应该再加一个请求实例的处理函数, fail,而我们封装这个函数的重点,就是要用 promise 来处理这两个回调函数,使它们可以用 async-await 的语法

    // 假设以下代码在 `/src/utils/requestMethod.js`
    
    let serverPath = 'http://www.abc.com/api/'
    export function post(url,body) {
        return new Promise((resolve,reject) => {
            wx.request({
                  url: serverPath + url    // 拼接完整的 url
                  data: body
                  method:'POST',
                  header: {
                      'content-type': 'application/json'
                  },
                  success(res) {
                    resolve(res.data)  // 把返回的数据传出去
                  },
                  fail(ret) {
                    reject(ret)   // 把错误信息传出去
                  }
                })
        })
    }
    

    有了这样的封装,我们就可以在其他地方引入 上面这个文件,然后使用 post 函数请求

    import {post} from '/src/utils/requestMethod.js'
    // 需要注意的是,这行代码必须要在 async 修饰的函数里面才能正确调用
    let res = await post('member/login',{name:myname})
    

    如果你觉得每次都要 import 这个文件很麻烦,那我们也可以把它挂在到 Vue(mpvue)的原型(prototype)上,我们打开/src/main.js文件,然后在里面加入以下代码

    import {post} from '/src/utils/requestMethod.js'
    Vue.prototype.$post = post
    

    这样,我们就可以在 Vue(mpvue)的所有实例里面,直接使用 this.$post()来调用,只要一行代码,

    // 这行代码同样需要在 async 修饰的函数里面才能正确调用
    let res = await this.$post('member/login',{name:myname})
    

    怎么样?是不是比原生的方便很多呢?

    结束语

    当然,跑起来以后,你可能还会遇到各种问题,这里我有对我自己遇到的问题做了一些总结 美团小程序框架 mpvue 蹲坑指南,希望对你有帮助, 还有官方文档也是很不错的哦

    1 条回复    2019-10-30 20:34:08 +08:00
    JaneHan
        1
    JaneHan  
       2019-10-30 20:34:08 +08:00
    你好,我想问下开发环境 vendor 过大 1.7M 怎么分包缓解它过大无法压缩
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1444 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:32 · PVG 01:32 · LAX 09:32 · JFK 12:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.