mpvue将vue项目转换为小程序


Posted in Javascript onSeptember 30, 2018

一、 mpvue简介

mpvue:是由 美团点评团队出品的小程序开 发的一款基于 vue的框架, 从整个 Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发微信小程序的能力。

使用 mpvue开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:

l 彻底的组件化开发能力:提高代码

l 完整的 Vue.js 开发体验

l 方便的 Vuex 数据管理方案:方便构建复杂应用

l 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload

l 支持使用 npm 外部依赖

l 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

l H5 代码转换编译成小程序目标代码的能力

它的目标是:在未来最理想的状态下,可以一套代码可以直接跑在多端: WEB、微信小程序、支付宝小程序、Native(借助weex)。不过由于各个端之间都存在一些比较明显的差异性,从产品的层面上讲,不建议这么做,这个框架的官方他们对它的期望的也只是开发和调试体验的一致

原生微信小程序、 mpvue、WePY这三种开发小程序方式的比较

二、mpvue开发流程

1、小程序账号配置

1)前往https://mp.weixin.qq.com/wxopen/waregister?action=step1根据指引填写信息和提交相应的资料,申请小程序帐号。在菜单 “设置”-“开发设置”获取小程序的 AppID 。

2)在菜单 “设置”-“开发设置”中配置服务器域名,必须是https开头的域名

2、安装开发工具

前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

打开小程序开发者工具,用微信扫码登录开发者工具,准备开发小程序。

3、mpvue生成项目

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目

$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖

$ cd my-project

$ npm install

# 启动构建

$ npm run dev

Npm run dev运行成功后,本地目录下会生成一个dist文件,这个文件就是生成的小程序相关代码。

在小程序中新建项目,填写上一步获取的 appid,便于后面可以在手机上预览,真机测试,小程序的文件目录就是本地项目目录的dist文件。

三、mpvue开发中的规范

1、生命周期函数

除了 vue本身的生命周期外,mpvue还兼容了小程序的生命周期,

app 部分:

onLaunch,初始化

onShow,当小程序启动,或从后台进入前台显示

onHide,当小程序从前台进入后台

page 部分:

onLoad,监听页面加载

onShow,监听页面显示

onReady,监听页面初次渲染完成

onHide,监听页面隐藏

onUnload,监听页面卸载

onPullDownRefresh,监听用户下拉动作

onReachBottom,页面上拉触底事件的处理函数

onShareAppMessage,用户点击右上角分享

onPageScroll,页面滚动

onTabItemTap, 当前是 tab 页时,点击 tab 时触发 (mpvue 0.0.16 支持)

注意点 :

created:这个钩子是有bug的,所有页面的created函数会在项目加载的时候被一起调用,而且进入页面的时候不会在被调用,所以这个函数基本就不能使用了,用小程序的onLoad钩子代替

mounted:你如果从页面B返回页面A,页面A的mounted钩子不会被触发,因为页面没有被重新加载,如果有需要每次页面展示都要调用的逻辑,使用小程序的onShow代替

2、mpvue转换的部分规则

1) 微信小程序的页面的 query 参数是通过 onLoad 获取的,mpvue 对此进行了优化,直接通过 this.$root.$mp.query 获取相应的参数数据

2) 小程序里所有的 BOM/DOM 都不能用,因此v-html 、 v-text 不能用。

el:this.$refs...styles.width=offsetWIdth --> :style="{'width':offsetWidth}"

获取节点信息,

wx.createSelectorQuery().select(className).boundingClientRect().exec(res=>{
在此处获取到节点的信息: left,top,width,height})

3) 不支持部分复杂的 JavaScript 渲染表达式,我们会把 template 中的 {{}} 双花括号的部分,直接编码到 wxml 文件中,由于微信小程序的能力限制(数据绑定),所以无法支持复杂的 JavaScript 表达式。

目前可以使用的有 + - * % ?: ! == === > < [] .,剩下的还待完善。

<!-- 这种就不支持,建议写 computed -->

<p>{{ message.split('').reverse().join('') }}</p>

4) 不支持过滤器,渲染部分会转成 wxml ,wxml 不支持过滤器,所以这部分功能不支持。

5) 不支持在 template 内使用 methods 中的函数。

6) 不支持 官方文档: Class 与 Style 绑定 中的 classObject 和 styleObject 语法。

<template>
<!-- 支持 -->
<div class="container" :class="computedClassStr"></div>
<div class="container" :class="{active: isActive}"></div>
<!-- 不支持 -->
<div class="container" :class="computedClassObject"></div>
</template>
<script>
export default {
data () {
return {
isActive: true
}
},
computed: {
computedClassStr () {
return this.isActive ? 'active' : ''
},
computedClassObject () {
return { active: this.isActive }
}
}
}
</script>

7) 不支持在组件上使用 Class 与 Style 绑定,将class与style绑定在组件最外层div上

8) 列表渲染 需要注意一点, 嵌套列表渲染,必须指定不同的索引!

<!-- 在这种嵌套循环的时候, index 和 itemIndex 这种索引是必须指定,且别名不能相同,正确的写法如下 -->

<template>
<ul v-for="(card, index) in list">
<li v-for="(item, itemIndex) in card">
{{item.value}}
</li>
</ul>
</template>

9) 小程序不支持路由,因此,路由跳转使用小程序的页面导航 api代替

this.$router.push-->wx.navigateTo() //进入子页面
this.$router.replace-->wx.reLaunch()//打开新页面

10) 获取当前页面地址

this.$route.fullPath-->getCurrentPages()[0].route

11) 接口返回参数结构调整,小程序的 request请求接口返回的数据会在外层添加一个data

res:{
res:{ data:{
code:'000000', --> code:'000000',
data:{...} data:{...}
}   }
}

12) 不支持本地图片用作背景图,可以使用网络图片、或者 base64,或者使用img、image标签

13) 上拉加载 /下拉刷新,选用小程序的全局api,scroll-view中无法使用

14) 不支持 css媒体查询,css样式避免标签选择器,不易于维护

15) mpvue-wxParse富文本解析

1)安装npm i mpvue-wxparse

2)组件内

<template>
<wxParse :content="article" />
</template>
<script>
import wxParse from 'mpvue-wxparse'
components: {wxParse},
</script>
<style>
@import url("~mpvue-wxparse/src/wxParse.css");
</style>
Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
angularJs中ng-model-options设置数据同步的方法
Sep 30 #Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 #Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 #Javascript
使用angularjs.foreach时return的问题解决
Sep 30 #Javascript
angular将html代码输出为内容的实例
Sep 30 #Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 #Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 #Javascript
You might like
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
总监职责范文
2013/11/09 职场文书
校庆筹备方案
2014/03/30 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
大学生实习证明
2015/06/16 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android