js_脚本之家,快速了解

2020-04-30 作者:网站首页   |   浏览(155)

时间: 2019-12-18阅读: 80标签: mpvue一、概念

一、 mpvue简介

mpvue是美团修改了Vue.js的runtime和compiler使其可以运行在小程序环境中,从而引入了整套Vue.js开发体验的小程序框架。

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

二、优化细节1、实例生命周期

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

不同于vue的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期

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

yzc216亚洲城,除了 Vue 本身的生命周期外(详细的 vue 生命周期文档请看生命周期钩子),mpvue 还兼容了小程序生命周期,这部分生命周期钩子的来源于微信小程序的 Page, 除特殊情况外,不建议使用小程序的生命周期钩子。

l 完整的 Vue.js 开发体验

2、模板语法

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

几乎全支持官方文档:模板语法,但需要注意的是:

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

(1)组件:由于要预编译出 wxml,只能使用单文件组件(.vue 组件)的形式进行支持,不支持:动态组件,异步组件,自定义 render,inline-template,X-Templates,script type="text/x-template"字符串模版,Slot(scoped 暂时还没做支持)。

l 支持使用 npm 外部依赖

(2)不要在选项属性或回调上使用箭头函数,.eg:

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

 //箭头函数是和父级上下文绑定在一起的,this 不会是如你做预期的 Vue 实例,且 this.a 或 this.myMethod 也会是未定义的created: () = console.log(this.a)vm.$watch('a', newValue = this.myMethod())

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

(3)页面内可以通过this.$root.$mp.query(需要在onLoad生命周期触发之后使用)获取小程序在 page onLoad 时候传递的 options(如query参数等)。组件内通过**this.$root.$mp.appOptions**获取小程序在 app的 onLaunch/onShow 时候传递的 options,.eg:

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

 //pages/list/index.vuemethods:{ toNewsDetail(item) { let url = `/pages/newsDetail/main?newsId=${item.id}`; wx.navigateTo({url}) }}//pages/detail/index.vue onReady() { this.getNewsDetail({ id: this.$root.$mp.query.newsId//获取URL传来的参数 }); },

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

(4)mpvue 可以支持小程序的原生组件,建议开发过程中直接使用微信小程序:表单组件,.eg:

二、mpvue开发流程

picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange"!--需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"-- view  当前选择: {{date}} /view/picker

1、小程序账号配置

(5)列表渲染,嵌套列表渲染,必须指定不同的索引。示例:

1)前往 “设置”-“开发设置”获取小程序的 AppID 。

!-- 在这种嵌套循环的时候, index 和 itemIndex 这种索引是必须指定,且别名不能相同,正确的写法如下 --template ul v-for="(card, index) in list" li v-for="(item, itemIndex) in card" {{item.value}} /li /ul/template

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

(6)事件处理器

2、安装开发工具

列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@@regionchange,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既map @regionchange="functionName" @end="functionName" @begin="functionName"mapbind 和 catch 事件(.stop阻止冒泡)同时绑定时,只触发 bind ,catch 不会被触发。小程序里没有键盘事件(键盘修饰符),默认(.prevent)事件,removeEventListener(.once)事件,.self没有可以判断的标识.capture(1.0.9支持)使用捕获

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

// 事件映射表,左侧为 WEB 事件,右侧为 小程序 对应事件{ click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touchend: 'touchend', tap: 'tap', longtap: 'longtap', input: 'input', change: 'change',//在 input 和 textarea 中 change 事件会被转为 blur 事件 submit: 'submit', blur: 'blur', focus: 'focus', reset: 'reset', confirm: 'confirm', columnchange: 'columnchange', linechange: 'linechange', error: 'error', scrolltoupper: 'scrolltoupper', scrolltolower: 'scrolltolower', scroll: 'scroll'}

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

(7)因为编译到 wxml,小程序不会生成节点,暂不支持在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class、 style 等样式属性。

3、mpvue生成项目

!--不生效,建议写在内部顶级元素上--card  /cardcard : /cardcard @click="clickFun" /cardcard v-show="showIf" /card//可用 v-if 代替

# 全局安装 vue-cli

(8)不支持在 template 内使用 部分复杂的 JavaScript 渲染表达式,methods 中的函数,过滤器,v-html指令。我们会把 template 中的{{}}双花括号的部分,直接编码到 wxml 文件中,由于微信小程序的能力限制(数据绑定),所以无法支持复杂的 JavaScript 表达式。目前可以使用的有 - * % ?: ! == === [] .,剩下的还待完善。

$ npm install --global vue-cli

!-- 这种就不支持,建议写 computed --p{{ message.split('').reverse().join('') }}/p!-- 但写在 @event 里面的表达式是都支持的,因为这部分的计算放在了 vdom 里面 --ul li v-for="item in list" div @click="clickHandle(item, index, $event)"{{ item.value }}/p /li/ul

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

(9)不支持keep-alive、transition

$ vue init mpvue/mpvue-quickstart my-project

(10)不支持官方文档:Class 与 Style 绑定中的classObject和styleObject语法。可以用 computed 方法生成 class 或者 style 字符串,从性能考虑,建议不要过度使用

$ cd my-project

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

$ npm install

3、注意事项

$ npm run dev

(1)开启单个页面的“下拉刷新”,你需要在该页面文件夹中建一个.json文件,在.json文件中配置

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

{ "enablePullDownRefresh":true}

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

(2)如果你先全局注册store,你需要先在src/main里添加在注册到vue实例中:

三、mpvue开发中的规范

Vue.prototype.$store = store

1、生命周期函数

(3)底部导航的图片你需要放在static文件夹下,否则不会正常显示

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

(3)精简 data 数据。冗余数据不要挂在 data 里,所有在 data/props/computed 中的数据,每次变更都会从微信小程序的 JSCore 进程,通过 setData 序列化成字符串后发送到 JSRender 进程。所以,如果你的数据量巨大的时候,会导致页面非常卡顿。

onLaunch,初始化

(4) 优化长列表性能

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

避免在 v-for 中嵌套子组件,这样可以优化大部分部分 setData 时的冗余数据。通过实践发现 wx:if 和 hidden 的优化肉眼不可见,所以或许可以试试直接通过样式 display 来展示和隐藏。

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

(5)建议使用v-model.lazy绑定方式以优化性能,v-model在老基础库下输入框输入时可能存在光标重设的问题。

onLoad,监听页面加载

(6)如果你有小程序和H5复用代码的需要,业务代码需要保持对 WEBVue.js的兼容性,建议不要在代码中直接调用小程序API,更好的选择是通过桥接适配层屏蔽两端差异。

onShow,监听页面显示

(7)如何捕获 app 的 onError。由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:

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

export default { // 只有 app 才会有 onLaunch 的生命周期 onLaunch () { // ... }, // 捕获 app error onError (err) { console.log(err) }}

onHide,监听页面隐藏

二、使用

onUnload,监听页面卸载

通过Vue.js命令行工具vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目:

onPullDownRefresh,监听用户下拉动作

npm install --global vue-cli//全局安装vue-cli,如果你已安装@vue/cli,你需要拉取2.x模板:npm install -g @vue/cli-intvue init mpvue/mpvue-quickstart project name//创建一个基于 mpvue-quickstart 模板的新项目cd my-project //进入项目目录npm install //安装依赖npm run dev //启动构建

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

如果使用vue cli 3先拉取 2.x 模板(详情参考本人博客:)

onShareAppMessage,用户点击右上角分享

onPageScroll,页面滚动

onTabItemTap, 当前是 tab 页时,点击 tab 时触发

注意点 :

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.boundingClientRect().exec(res=>{在此处获取到节点的信息: left,top,width,height})

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

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

``

{{ message.split.join }}

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

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

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

export default {data () {return {isActive: true}},computed: {computedClassStr () {return this.isActive &amp;#63; 'active' : ''},computedClassObject () {return { active: this.isActive }}}}

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

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

{{item.value}}

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

this.$router.push-->wx.navigateTo() //进入子页面this.$router.replace-->wx.reLaunch 获取当前页面地址this.$route.fullPath-->getCurrentPages()[0].route11) 接口返回参数结构调整,小程序的 request请求接口返回的数据会在外层添加一个datares:{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

import wxParse from 'mpvue-wxparse'components: {wxParse},@import url("~mpvue-wxparse/src/wxParse.css");

本文由yzc216亚洲城发布于网站首页,转载请注明出处:js_脚本之家,快速了解

关键词: yzc216亚洲城