使用mpvue开发小程式教程

使用mpvue开发小程式教程

前段时间,美团开源了mpvue这个专案,使得我们又多了一种用来开发小程式的框架选项。由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一致的(某些功能由于受限于小程式环境本身的原因而不能使用),这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程式。

如果之前还未曾用过Vue这个框架的话,建议你可以 加我们QQ群668041364,一起交流学习

起手式:必要的开发环境

工欲善其事必先利其器!在开始写程式码之前,请确保你已经安装了必要的开发环境和工具,以下是几个必需的和可选的工具:

1)node.js

现在,前端工具链基本都依赖Node.js,所以请率先安装它吧。

下载地址:https://nodejs.org/en/download/

安装完成后,开启你的命令列输入如下命令,验证安装是否成功:

node --version

//成功的话输出类似:v10.6.0

npm --version

//成功的话输出类似:6.1.0

然后,我们需要执行以下命令,将npm的下载源切换到国内淘宝的映象,以提高下载时的速度和成功率:

npm set registry https://registry.npm.taobao.org/

2)vue-cli

vue-cli是一个vue专用的专案脚手架工具,可以用于方便的建立vue专案骨架程式码,包括我们要讲到的mpvue的专案程式码。我们可以通过安装node.js后里面包含的npm工具来安装vue-cli,在命令列输入如下命令:

npm install vue-cli -g

安装完成后,输入如下命令进行验证:

vue

// 成功的话会输出如下内容:

// Usage: vue [options]

//

// Options:

//

// -V, --version output the version number

// -h, --help output usage information

//

// Commands:

//

// init generate a new project from a template

// list list available official templates

// build prototype a new project

// create (for v3 warning only)

// help [cmd] display help for [cmd]

3)微信开发者工具

这个工具是开发、除错和模拟执行微信小程式的最核心的工具了,所以必须安装。

下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4)Visual Studio Code + Vetur

Visual Studio Code(简称vscode)是现在非常流行的一个轻量级程式码编辑器,拥有非常多好用的辅助开发外挂,在我的文章中我都会使用这个编辑器来编辑程式码。当然,好用的程式码编辑器有很多,比如Sublime Text、WebStorm等,同样可以达到我们的开发目的,你也尽管用你自己最喜欢的程式码编辑器来写程式码就行了。

下载地址:https://code.visualstudio.com

安装完vscode后,在它的外挂管理器中,查询Vetur并安装,然后重启一下vscode后,外挂即生效:

安装Vetur外挂

Vetur是一款可以提供Vue语法高亮、语法检查和程式码快捷输入等功能的外挂,可以为我们的开发过程提供很多便利。

建立第一个基于mpvue的小程式专案程式码

花了点时间装好了必要的开发环境,下面我们就来建立我们的第一个mpvue小程式专案。这里将用到前面已安装的vue-cli:

vue init mpvue/mpvue-quickstart firstapp

命令列将一步步的引导我们选择或填写专案的配置资讯,如果你还不太明白这些内容的含义,可以先直接全部按回车:

? Project name firstapp

? wxmp appid touristappid

? Project description A Mpvue project

? Author kevinzhang

? Vue build runtime

? Use Vuex? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? 小程式测试,敬请关注最新微信开发者工具的“测试报告”功能

vue-cli · Generated firstapp.

To get started:

cd firstapp

npm install

npm run dev

Documentation can be found at http://mpvue.com

这个过程vue-cli主要是先从远端的程式码仓库中下载了一份注册名为mpvue/mpvue-quickstart的模板程式码,然后根据开发者在命令列提示过程中输入的资讯,生成一份经过配置后的程式码。

这份程式码暂时还执行不起来,因为它还缺少依赖的库,我们需要执行以下命令进行依赖库的安装:

cd firstapp

npm install

经过几分钟的下载安装,依赖库安装到了firstapp目录下,你可以看到该目录下多出了一个node_modules目录。

然后,执行命令让这个程式码执行起来,进入开发模式:

npm run dev

成功执行后,这个专案程式码就进入开发模式,一旦有源代码发生修改,就会触发自动编译。因为mpvue使用的是Vue + HTML Web的开发方式开发小程式,它最终还是需要被转换成小程式的程式码才可以在小程式环境执行,所以这里的自动编译的目的就是要把Web程式码编译成小程式程式码。编译后的程式在dist目录下:

执行并检视结果

上面的步骤中,我们开启开发模式后,其实并不能看到小程式的执行效果,要真正看小程式的执行界面的话,我们还是要借助微信开发者工具。

开启微信开发者工具,选择新增专案:

专案目录选择指向firstapp目录:

点选“确定”按钮,进入小程式开发主界面,在左边的小程式模拟器中就能看到firstapp小程式的执行结果了:

【提醒】记得在微信开发者工具的选单》设定 》编辑设定 中,将“储存时自动编译小程式”勾选上,这样当mpvue的程式码自动编译完成后,模拟器才会自动重新整理界面。

小结

本文先简要介绍一下使用mpvue开发小程式的前期准备,在后面的文章中将一步步讲解mpvue的详细用法。

猜你喜欢