快速入门 mpvue 小程序开发 vue小程序开发教程
bigegpt 2024-10-12 06:29 3 浏览
一、概念
mpvue是 美团 修改了 Vue.js 的 runtime 和 compiler 使其可以运行在小程序环境中,从而引入了整套 Vue.js 开发体验的小程序框架。
二、优化细节
1、实例生命周期
不同于vue的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期
除了 Vue 本身的生命周期外(详细的 vue 生命周期文档请看生命周期钩子),mpvue 还兼容了小程序生命周期,这部分生命周期钩子的来源于微信小程序的 Page, 除特殊情况外,不建议使用小程序的生命周期钩子。
2、模板语法
几乎全支持 官方文档:模板语法,但需要注意的是:
(1)组件:由于要预编译出 wxml,只能使用单文件组件(.vue 组件)的形式进行支持,不支持:动态组件,异步组件,自定义 render,inline-template,X-Templates,<script type="text/x-template"> 字符串模版,Slot(scoped 暂时还没做支持)。
(2)不要在选项属性或回调上使用箭头函数,.eg:
//箭头函数是和父级上下文绑定在一起的,this 不会是如你做预期的 Vue 实例,且 this.a 或 this.myMethod 也会是未定义的 created: () => console.log(this.a) vm.$watch('a', newValue => this.myMethod())
(3) 页面 内可以通过 this.$root.$mp.query (需要在 onLoad 生命周期触发之后使用)获取小程序在 page onLoad 时候传递的 options(如:query 参数等)。组件内通过** this.$root.$mp.appOptions**获取小程序在 app的 onLaunch/onShow 时候传递的 options
(4)mpvue 可以支持小程序的原生组件,建议开发过程中直接使用 微信小程序:表单组件,.eg:
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange"><!--需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"--> <view class="picker"> 当前选择: {{date}} </view> </picker>
(5)列表渲染,嵌套列表渲染,必须指定不同的索引。示例:
<!-- 在这种嵌套循环的时候, index 和 itemIndex 这种索引是必须指定,且别名不能相同,正确的写法如下 --> <template> <ul v-for="(card, index) in list"> <li v-for="(item, itemIndex) in card"> {{item.value}} </li> </ul> </template>
(6)事件处理器
- 列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@ @regionchange,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy 中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
- bind 和 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 等样式属性。
<!--不生效,建议写在内部顶级元素上--> <card class="class-name"> </card> <card :style="{height:10+'px'}"> </card> <card @click="clickFun"> </card> <card v-show="showIf"> </card>//可用 v-if 代替
(8)不支持在 template 内使用 部分复杂的 JavaScript 渲染表达式,methods 中的函数,过滤器,v-html 指令。我们会把 template 中的 {{}} 双花括号的部分,直接编码到 wxml 文件中,由于微信小程序的能力限制(数据绑定),所以无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === > < [] .,剩下的还待完善。
<!-- 这种就不支持,建议写 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>
(9)不支持keep-alive、transition
(10)不支持 官方文档:Class 与 Style 绑定 中的 classObject 和 styleObject 语法。可以用 computed 方法生成 class 或者 style 字符串,从性能考虑,建议不要过度使用
<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>
3、注意事项
(1)开启单个页面的“下拉刷新”,你需要在该页面文件夹中建一个.json文件,在.json文件中配置
{ "enablePullDownRefresh":true }
(2)如果你先全局注册store,你需要先在src/main里添加在注册到vue实例中:
Vue.prototype.$store = store
(3)底部导航的图片你需要放在static文件夹下,否则不会正常显示
(3)精简 data 数据。冗余数据不要挂在 data 里,所有在 data/props/computed 中的数据,每次变更都会从微信小程序的 JSCore 进程,通过 setData 序列化成字符串后发送到 JSRender 进程。所以,如果你的数据量巨大的时候,会导致页面非常卡顿。
(4) 优化长列表性能
- 避免在 v-for 中嵌套子组件,这样可以优化大部分部分 setData 时的冗余数据。
- 通过实践发现 wx:if 和 hidden 的优化肉眼不可见,所以或许可以试试直接通过样式 display 来展示和隐藏。
(5)建议使用 v-model.lazy 绑定方式以优化性能,v-model 在老基础库下输入框输入时可能存在光标重设的问题。
(6)如果你有小程序和H5复用代码的需要,业务代码需要保持对 WEB Vue.js 的兼容性,建议不要在代码中直接调用小程序API,更好的选择是通过桥接适配层屏蔽两端差异。
(7)如何捕获 app 的 onError。由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:
export default { // 只有 app 才会有 onLaunch 的生命周期 onLaunch () { // ... }, // 捕获 app error onError (err) { console.log(err) } }
二、使用
通过 Vue.js 命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目:
npm install --global vue-cli//全局安装vue-cli,如果你已安装@vue/cli,你需要拉取2.x模板:npm install -g @vue/cli-int vue init mpvue/mpvue-quickstart <project name>//创建一个基于 mpvue-quickstart 模板的新项目 cd my-project //进入项目目录 npm install //安装依赖 npm run dev //启动构建
如果使用vue cli 3先拉取 2.x 模板(详情参考本人博客:https://my.oschina.net/wangnian/blog/2051369):
然后:安装npm包,运行
本文出处:王念博客。? 著作权归作者所有;如有侵权,请联系删除。
相关推荐
- 恢复软件6款汇总推荐,帮你减轻数据恢复压力!
-
在当今数字化生活中,数据丢失的风险如影随形。无论是误删文件、硬盘故障,还是遭遇病毒攻击,丢失的数据都可能给我们带来不小的麻烦。此时,一款优秀的数据恢复软件就成为了挽救数据的关键。今天,为大家汇总推荐...
- 中兴星星一号刷回官方原版recovery的教程
-
【搞科技教程】中兴星星一号的官方recovery也来说一下了,因为之前给大家分享过了第三方的recovery了,之前给大家分享的第三方recovery也是采用一键刷入的方式,如果细心的朋友会发现,之前...
- 新玩机工具箱,Uotan柚坛工具箱软件体验
-
以前的手机系统功能比较单调,各厂商的重视程度不一样,所以喜欢玩机的朋友会解锁手机系统的读写权限,来进行刷机或者ROOT之类的操作,让使用体验更好。随着现在的手机系统越来越保守,以及自身功能的增强,...
- 三星g906k刷recovery教程_三星g906k中文recovery下载
-
【搞科技教程】看到有一些机友在找三星g906k的第三方recovery,下面就来说一下详细的recovery的刷入方法了,因为手机只有有了第三方的recovery之后才可以刷第三方的root包和系统包...
- 中兴星星2号刷recovery教程_星星二号中文recovery下载
-
【搞科技教程】咱们的中兴星星2手机也就是中兴星星二号手机的第三方recovery已经出来了,并且是中文版的,有了这个recovery之后,咱们的手机就可以轻松的刷第三方的系统包了,如果没有第三方的re...
- 数据恢复软件有哪些值得推荐?这 6 款亲测好用的工具汇总请收好!
-
在数字生活中,数据丢失的阴霾常常突如其来。无论是误删工作文档、格式化重要磁盘,还是遭遇系统崩溃,都可能让我们陷入焦虑。关键时刻,一款得力的数据恢复软件便是那根“救命稻草”。今天,为大家精心汇总6...
- 中兴u956刷入recovery的教程(中兴e5900刷机)
-
【搞科技教程】这次主要来给大家说说中兴u956手机如何刷入第三方的recovery,因为第三方的recovery工具是咱们刷第三方rom包的基础,可是很我欠却不会刷,所以太这里来给大家整理了一下详细的...
- 联想A850+刷recovery教程 联想A850+第三方recovery下载
-
【搞科技教程】联想A850+的第三方recovery出来了,这个第三方的recovery是非常的重要的,比如咱们的手机要刷第三方的系统包的时候,都是需要用到这个第三方的recovery的,在网上也是有...
- 工具侠重大更新 智能机上刷机一条龙完成
-
工具侠是针对玩机的机油开发的一款工具,不管是发烧级别的粉丝,还是普通小白用户,都可以在工具侠上找到你喜欢的工具应用。这不,最新的工具侠2.0.16版本,更新了专门为小白准备的刷机助手工具,以及MTK超...
- shift+delete删除的文件找回6种硬盘数据恢复工具
-
硬盘作为电脑的重要存储设备,如同一个巨大的数字仓库,承载着我们日常工作、学习和生活中的各种文件,从珍贵的照片、重要的工作文档到喜爱的视频、音乐等,都依赖硬盘来安全存放。但有时,我们可能会不小心用sh...
- 使用vscode+Deepseek 实现AI编程 基于Cline和continue
-
尊敬的诸位!我是一名专注于嵌入式开发的物联网工程师。关注我,持续分享最新物联网与AI资讯和开发实战。期望与您携手探寻物联网与AI的无尽可能。这两天deepseek3.0上线,据说编程能力比肩Cl...
- 详解如何使用VSCode搭建TypeScript环境(适合小白)
-
搭建Javascript环境因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件。所以需要首先安装好javascript环境,可以参考文章:https://...
- 使用VSCode来书写你的Jupyter Notebooks
-
现在你可以在VScode里面来书写你的notebook了,使用起来十分的方便。下面来给大家演示一下环境的搭建。首先需要安装一个jupyter的包,使用下面的命令安装:pip3install-ih...
- 使用VSCode模板提高Vue开发效率(vscode开发vue插件)
-
安装VSCode安装Vetur和VueHelper插件,安装完成后需要重启VScode。在扩展插件搜索框中找到如下Vetur和VueHelper两个插件,注意看图标。添加Vue模板打...
- 干货!VsCode接入DeepSeek实现AI编程的5种主流插件详解
-
AI大模型对编程的影响非常之大,可以说首当其冲,Cursor等对话式编程工具渐渐渗透到开发者的工作中,作为AI编程的明星产品,Cursor虽然好用,但是贵啊,所以咱们得找平替,最好免费那种。俗话说,不...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- linux安装minio (74)
- ubuntuunzip (67)
- vscode使用技巧 (83)
- logstashinput (65)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)