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 相关文章推荐
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
canvas实现图像截取功能
Feb 06 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
javascript+Canvas实现画板功能
Jun 23 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替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python中使用序列的方法
2015/08/03 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
NumPy 数组使用大全
2019/04/25 Python
解决yum对python依赖版本问题
2019/07/05 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Python实现ATM系统
2020/02/17 Python
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
婚庆公司开业主持词
2015/06/30 职场文书
学校安全管理制度
2015/08/06 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记