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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
合作指挥官:孟斯克
2020/03/16 星际争霸
php 获取本机外网/公网IP的代码
2010/05/09 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python去掉字符串中空格的方法
2014/03/11 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
在双python下设置python3为默认的方法
2018/10/31 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
毕业生自我鉴定实例
2014/01/21 职场文书
企业内控岗位的职责
2014/02/07 职场文书
yy生日主持词
2014/03/20 职场文书
合作协议书范本
2014/10/25 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
小学数学教师研修日志
2015/11/13 职场文书
七年级作文之冬景
2019/11/07 职场文书
用Python提取PDF表格的方法
2021/04/11 Python