用mpvue构建小程序的方法(步骤地址)

Mpvue是一个使用Vue.js(美团开源项目)开发小程序的前端框架。该框架基于Vue.js内核，mpvue修改Vue.js的运行时和编译器实现，使其在小程序环境下运行，从而为小程序开发引入了一整套Vue.js开发经验。

Mpvue，可以使用熟悉的vue框架语法，双向绑定使得使用wx的this.setData变得没有必要。您可以使用npm方便地介绍第三方。真的是贫穷限制了我的想象力。个人认为，mpvue比wepy更简单，使用更方便，MPV UE的五分钟教程构建很快。

项目的Git地址：mpvue-demo(代码注释非常完整，使用mpvue很容易构建一个小程序并进行扩展)

步骤1:查看文档以快速构建简单的mpvue项目

#全局安装vue-CLI $ npminstall-全局vue-CLI #基于mpvue-quickstart模板创建一个新项目$ vueinit mpvue/mpvue-quick start my-project #安装依赖于$ cd my-project$ npm install#开始构建$ npm运行dev。这里我取消了vuex(状态管理)和ESlint(代码检查)，因为个人不喜欢检测空格和；您可以根据自己的要求配置规格。

步骤2:修改代码，微信开发者工具打开dist目录，看看是否有变化。

Step3:封装api和http请求(这里用的是flyio，除了请求取消，其他功能基本和axios差不多，大小只有4kb，是axios的三分之一)

Package.json加入依赖项或npm安装flyio

Varfly=require('./lib/wx')//wx.js是你下载的源代码文件//varfly=require(' flyio/dist/NPM/wx ')//NPM介绍方法var Fly=new Fly()；//创建fly实例//为所有请求添加interceptor fly . interceptors . request . use((config，promise)={//添加自定义header config . headers[' x-tag ']=' flyio '；返回配置；})//配置请求基址fly . config . base URL=' https://wendux.github.io/'.页面({//事件处理程序bindwiewtap 3360 function(){//调用fly . get(' http://10 . 10 . 180 . 81/Doris User/log in '，{xx:6})。然后((d)={//输出请求数据console.log(d.data) //输出响应头console.log (d.header)})。catch(err={ console . log(Err . status，Err。消息)}).})})步骤4:将flyio封装的请求和项目API作为组件库挂载到原型对象上，这样。$http可用于直接调用方法，而无需为每个vue单个页面导入封装的js。(flyio官方文件)

httpUtil.js

Varfly=require('./lib/wx')//wx.js是你下载的源代码文件//varfly=require(' flyio/dist/NPM/wx ')//NPM介绍方法var Fly=new Fly()；//创建fly实例//为所有请求添加interceptor fly . interceptors . request . use((config，promise)={//添加自定义header config . headers[' x-tag ']=' flyio '；返回配置；})//配置请求基址fly . config . base URL=' https://wendux.github.io/'.页面({//事件处理程序bindwiewtap 3360 function(){//调用fly . get(' http://10 . 10 . 180 . 81/Doris User/log in '，{xx:6})。然后((d)={//输出请求数据console.log(d.data) //输出响应头console.log (d.header)})。catch(err={ console . log(err . status，err.message))

/* * *由Yucheng 2018/4/2创建。*///封装来自“”的http API导入请求。/httputil ' const host=' https://XXX . cn ' const API={//test address authorlist :()=request . get(` $ { host }/index/list _ author _ recommend . html `) }//export default API export default {//as component library(install)install 3360 function(vue，Name=' $ http '){//custom Name(vue-resource也使用$ http)object . defineeproperty(vue . prototype，Name，{ value:api//在原型对象上挂载组件库}}step5:vue组件(卡组件已经在mpvue官方项目中创建，请注意类需要写在组件内部，否则无法渲染)

步骤6:页面跳转和参数传输(这里mpvue不支持vue路由器)

使用微信的页面跳转方法，然后跳转到页面，使用这个。$root。$mp.query获取参数。

Step7:引入weui测试效果(根据你的需求，引入ui库，不支持elementUI，或者不使用)。

下载weui.css并将其放入项目中。“导入”引入了css，例如：“导入”./static/weui/weui.css '

补充使用mpvue时的注意事项(详见官方文件)

1.添加页面需要npm运行dev才能重新启动。

2.小程序中所有的BOM/DOM都不能用，也就是说v-html指令不能用。

3.目前不支持组件上类和样式的绑定，需要在组件内部编写。

4.mpvue可以支持小程序的原生组件，如picker、map等。需要注意的是，本机组件上的事件绑定需要通过vue的事件绑定语法进行绑定，比如bindchange='eventName '事件，需要写成@change='eventName '。

5.mpvue建议使用v-model.lazy绑定来优化性能。此外，当在旧的基本库下的输入框中输入v-model时，光标可能会被重置。

6.写页面跳转时，传入动态参数，需要写成：url，比如navigator url=' './test/main？id=' id hover-class='none ' .

7.用这个。$root。$mp.query获取页面加载时小程序传递的选项。用这个。$root。$mp.appOptions获取应用程序启动/展示时小程序传递的选项。

8.用这个。$root。需要在monted中获取用于获取参数的$mp.query，并且无法读取未定义的属性“query ”,这将在created中报告。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。