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获取父节点方法
Aug 20 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
养殖项目策划书范文
2014/01/13 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
个性婚礼策划方案
2014/05/17 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
个人投资合作协议书
2014/10/12 职场文书
外出培训学习心得体会
2016/01/18 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
微信小程序实现聊天室功能
2021/06/14 Javascript
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL