mpvue项目 最近用mpvue开发了一个家庭私人医生签约的小程序项目.记录总结一下,开发过程中遇到的一些问题. 关于页面进栈出栈的状态值问题 页面进出栈,会触发onLoad/unLoad事件.出栈不触发vue的destroyed事件,状态值是不reset的. check-group和radio-group的问题 很多坑,尽量别用 value绑定选中值,值无法绑定item(object类型),只能绑定item.value(string类型)的值.想到一个方法:可以通过item.jsonItem…

前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一致的(某些功能由于受限于小程序环境本身的原因而不能使用),这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程序. 如果之前还未曾用过Vue这个框架的话,建议你可以快速浏览一下Vue的官方文档(https://cn.vuejs.org/v2/guide/) 起手式:必要的开发环境…

在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在Visual Studio Code里面打开项目文件夹,我们可以看到类似如下的文件结构: firstapp ├── package.json ├── project.config.json ├── static ├── src │ ├── components │ ├── pages │ ├── ut…

在上一章节中,我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvue开发小程序的第一步.今天我们将进一步来了解和学习mpvue / Vue的其他重要功能. 既然mpvue是基于Vue的,那么就没有理由不进一步学习一下Vue最核心的东西:组件.组件系统是Vue应用开发中最具价值的特性之一,在前文中其实我们就已经有在使用组件了,比如App.vue和首页index.vue就是两个Vue组件. 组件是一种抽象,…

前言: 最近接到小程序的开发需求,由于之前也没开发过小程序,心情还是有点激动.先花15分钟看一遍小程序官方文档,再花10分钟看一遍mpvue官方文档,然后拿着原型图和UI图就开干.踩了不少坑,写篇博客记录一下.PS:小程序官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/ ,mpvue官方文档: http://mpvue.com/ mpvue: mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,…

接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下. 官网地址:http://mpvue.com/ 1.快速上手 http://mpvue.com/mpvue/quickstart/ 跟着官网提示走,搭建一个mpvue的小程序项目 注意,这里我用yarn代替了npm才安装成功. 2.分包机制 mpvue-loader 1.1.2-rc.2之后,优化了build后的文件生成结构,生成的目录结构保持了源文件夹下的目录结构,有利于对分包的支持. 3.注意事项:新增的页面需要重新 np…

在上一篇文章中,我们熟悉了一下通过vue-cli生成的mpvue工程代码骨架的基本结构,大致了解了每一个部分的代码到底要放到何处.从本文起我们就开始涉及真正的编码部分,学习使用Vue的语法去编写小程序. 为了清楚起见,我们将要对vue-cli生成的代码做一个清理工作,具体如下: 删掉src/components.src/pages.src/utils三个目录下的所有代码文件 将src/App.vue文件中的内容重置成: <script> export default {} </scrip…

在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法.在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,让每个部分都保持功能简洁.条理清楚.各司其职,这样会让代码变得更易理解和维护,间接的也提升了代码的健壮性,降低出现Bug的几率,即使出现Bug,也会更容易进行定位和调试.   由于mpvue采用的是Vue框架的基础设施,所以大部分的功能都是和Vue一致的.但是,mpvue的代码毕竟最终还是要转译成小程序原生框架下的代码的,由于小程序框架本…

mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/demo地址 :https://github.com/ccwyn/mpvuedemo/tree/master/m…

未标题-1.png mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. Mpvue官网:http://mpvue.com/ demo地址 :https://github.com/ccwyn/mpvuedemo/tr…