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


Posted in Javascript onMay 22, 2018

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

mpvue你可以使用你熟悉的vue框架语法,双向绑定让你不用再使用wx的this.setData了,你可以使用npm方便的引入第三方了,真的是贫穷限制了我的想象力啊。个人感觉mpvue比wepy更加简单,上手更加方便,mpuve五分钟教程快速构建。

项目git地址:mpvue-demo(代码注释很全,使用mpvue很简单构建一个小程序,拓展)

step1: 查看文档快速构建simple mpvue project

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

这里我取消了vuex(状态管理)和ESlint(代码检查),因为个人不喜欢检测空格和;的规范,你可以根据你的需求配置。

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

step2:修改代码,微信开发者工具打开dist目录,查看是否发生改变。

step3:封装api和http请求(这里使用的是flyio,除了请求取消,其他功能基本相似axios,大小只有4kb,是axios的三分之一)

package.json加入依赖或者npm install flyio

var Fly=require("../lib/wx") //wx.js为您下载的源码文件
// var Fly=require("flyio/dist/npm/wx") //npm引入方式
var fly=new Fly(); //创建fly实例

//添加拦截器
fly.interceptors.request.use((config,promise)=>{
  //给所有请求添加自定义header
  config.headers["X-Tag"]="flyio";
  return config;
})
//配置请求基地址
fly.config.baseURL="https://wendux.github.io/"
...

Page({
 //事件处理函数
 bindViewTap: function() {
  //调用
  fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
   //输出请求数据
   console.log(d.data)
   //输出响应头
   console.log(d.header)
  }).catch(err=>{
   console.log(err.status,err.message)
  })
  ...
 })
})

step4: 将flyio封装的请求和项目api作为组件库挂载在原型对象上,这样不用每个vue单页面都import 封装的js,直接使用this.$http调用方法。(flyio官方文档)

httpUtil.js

var Fly=require("../lib/wx") //wx.js为您下载的源码文件
// var Fly=require("flyio/dist/npm/wx") //npm引入方式
var fly=new Fly(); //创建fly实例

//添加拦截器
fly.interceptors.request.use((config,promise)=>{
  //给所有请求添加自定义header
  config.headers["X-Tag"]="flyio";
  return config;
})
//配置请求基地址
fly.config.baseURL="https://wendux.github.io/"
...

Page({
 //事件处理函数
 bindViewTap: function() {
  //调用
  fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
   //输出请求数据
   console.log(d.data)
   //输出响应头
   console.log(d.header)
  }).catch(err=>{
   console.log(err.status,err.message)
  })
  ...
 })
})

apiUtil.js

/**
 * Created by yuchen on 2018/4/2.
 */
//封装httpApi
import request from './httpUtil'
const host = "https://XXX.cn"
const api = {
 // test地址
 authorList:() => request.get(`${host}/index/list_author_recommend.html`)
}

// export default api
export default { //作为组件库(install)
 install: function(Vue,name="$http") {//自定义名字(vue-resource也使用$http)
  Object.defineProperty(Vue.prototype, name, { value: api });//将组件库挂载在原型对象上
 }
}

step5:vue组件(mpvue官方项目中就创建了card组件,这里注意class需要写在组件内部里面,不然渲染不出来)

step6:页面跳转和传参(这里mpvue不支持vue-router)

使用微信的页面跳转方法,然后跳转页面使用this.$root.$mp.query获取参数。

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

下载weui.css放入项目中,import引入css,如:import '../static/weui/weui.css'

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

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

补充下使用mpvue需要注意的地方(具体参考官方文档)

1.新增页面需要npm run dev重启一下。

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

3.暂不支持在组件上使用 Class 与 Style 绑定,需要在组件内部书写。

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.通过this.$root.$mp.query进行获取小程序在 page onLoad 时候传递的 options。通过this.$root.$mp.appOptions进行获取小程序在 app onLaunch/onShow 时候传递的 options。

8.使用this.$root.$mp.query获取参数需要在monted中获取,在created中会报Cannot read property 'query' of undefined 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现简单模态窗口,背景灰显
Nov 14 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
小程序实现五星点评效果
Nov 03 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 #Javascript
安装vue-cli的简易过程
May 22 #Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 #Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 #Javascript
Vue页面骨架屏的实现方法
May 22 #Javascript
Angular网络请求的封装方法
May 22 #Javascript
vue input输入框模糊查询的示例代码
May 22 #Javascript
You might like
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
python僵尸进程产生的原因
2017/07/21 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python和opencv实现抠图
2018/07/18 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
什么是java序列化,如何实现java序列化
2012/11/14 面试题
面试后的感谢信范文
2014/02/01 职场文书
学生感冒英文请假条
2014/02/04 职场文书
国防教育标语
2014/10/08 职场文书
民用住房租房协议书
2014/10/29 职场文书
员工自我评价范文
2015/03/11 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书