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 03 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 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函数
2008/10/03 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Python远程linux执行命令实现
2020/11/11 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
类的返射机制中的包及核心类
2016/09/12 面试题
汉语专业应届生求职信
2013/10/01 职场文书
在校生自我鉴定
2014/01/23 职场文书
运动会邀请函范文
2014/01/31 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
高考升学宴答谢词
2015/01/20 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
Java版 单机五子棋
2022/05/04 Java/Android