最近一直在开发微信小程序,趁着空闲时间总结下使用情况. 现在项目目前使用的是 mpvue:^1.0.11 版本,后续看看更新情况. 文档在此: http://mpvue.com/mpvue/#_2 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ np…

更多内容请查看 我的新博客 地址 : 前言 16年小程序刚出来的时候,就准备花点时间去学学.无奈现实中手上项目太多,一个接着一个,而且也没有开发小程序的需求,所以就一拖再拖. 直到上周,终于有一个小程序的项目.如果现在学小程序,时间上肯定来不及了(就给了一周的时间).正好前段时间看到美团开源了一个使用vue来开发微信小程序的框架 mpvue.因为平时vue用的多,所以就决定使用 mpvue 来开发. mpvue 介绍 我们看一下mpvue官网上的介绍: mpvue 是一个使用 Vue.js 开发…

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

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

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

mpvue-meituan mpvue-meituan 是一款使用mpvue开发的实战小程序项目,完全仿制美团官方外卖点餐小程序开发而成,项目的框架结构完全按照企业开发架构搭建而成.结合了原生小程序的开发能力和Vue能力,使小程序开发起来更加便捷高效,项目使用了比较流行的Vuex框架来作为全局的状态数据管理,使数据交互更加的便捷,结合了sass的使用让写Css样式更加的得心应手.目前市面上有很多使用mpvue开发的示例Demo,但是那些示例Demo都过于简单,没有提供一套系统的框架结构,借鉴的意…

前言 最近有点闲,想起关注已久的mpvue写小程序,所以稍微肝了半个多月写了个github版的微信小程序,已上线.现在总结一下遇到的坑. 扫码体验. 项目地址.https://github.com/cheesekun/wx-github mina坑 scroll-view 高度 可滚动视图区域. 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height. 小程序提供的scroll-view组件,想让他能滚动,就要给他提供一个固定的高度. 我们一般需求是…

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

npm install --global  vue-cli vue脚手架 vue init mpvue/mpvue-quickstart  my-project 创建一个基于mpvue-quickstart的新摸板 在此我们需要命名我们的项目名称 我们开发小程序的appid, vux可选择性安装, ESlint可选择性安装 cd my-project npm install 安装依赖包 npm run dev 启动构架 出现上面这个表示算是编译通过,但是不一定表示成功,我们打开我们的小程序编译器…

用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null onShareAppMessage 是于微信小程序Pages的生命周期钩子,顾这个方法不能写到 methods里 实例生命周期 同 vue,不同的是我们会在小程序 onReady 后,再去触发 vue mounted 生命周期,详细的 vue 生命周期文档请看生命周期钩子 beforeCreate created beforeMount mounted beforeUpdate u…

1.简言 为期一个半月的小程序开发,其中夹杂其他项目的功能迭代,跌跌撞撞的将项目完成了,今天中秋节放假前一天,以此来记录下此次打怪升级的心得与分享其中遇到花费时间的问题. 因为此次开发的是一个类电商项目,从先发布一个上线一个招募页招募用户,在开发文章页面,文章详情,商品详情,sku联动,创建订单,绑定银行卡,创建customer,购买支付,订单列表(全部,未付款,已发货,已收货),订单详情,物流详情,用户信息,地址管理,成立团队,分享与发布到朋友圈推广等.不想原生小程序的结构目录复杂,数据绑定不…

最近公司部门负责人提出需求需要开发一款微信小程序,由于本人之前是做前端开发的,对于小程序开发一窍不通,但是很多时候我们都是把不会做变成我会学.于是便在网上寻找小程序开发教程,相比于相生的小程序开发,本人更倾向于美团的mpvue框架,因为此框架是基于vue开发的,而恰恰我前端开发技术就是vue,甚是美哉,花了半天时间学习了一下mpvue,便开始了小程序开发之旅,当然mpvue小程序开发也有很多坑. mpvue是由美团研发的一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,…

小程序也做了几个小功能模块了,总觉得需要总结一下,踩坑什么的还是得记录一下啊. 好吧,其实是为了方便回顾 首先,说到小程序框架,大家都知道wepy,不过,我是没用过 美团开发团队到mpvue到是个实在到东西,因为自己之前用到vue,所以上手可以说是难度很低 坑可以说还是很多的,下面说说我自己遇到的,当然是想到哪写到哪了,见谅,哈哈 一 filter 首先vue支持的filter,过滤器,mpvue明确说明了不支持,不支持,不支持 所以,一些数据需要在methods里面直接重构一下数据,然后再赋值…

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

mpvue... 坑 怎么说呢,去github看一下,发现还是有很多问题没有解决... 不支持filter 亲,到现在还没有支持filter哦.只能用替代方法了,用computed或者渲染前先处理数据.无奈... 组件只能有一个slot 这个还是有影响的,只能限制一下组件了.无奈... 计算属性一定要有返回值 不能直接return,这样会返回undefined,在小程序上会有提示 关于showToast自定义图片路径问题 自定义的图片要放到编译后的文件夹跟目录,如dist/wx/images;…

从vue到mpvue再到微信小程序,这么几天下来感觉被搞晕了.三者之间的很多功能存在差异,项目也快接近尾声了,坑也踩了很多了,现在给后来的你们一点总结性经验: 1. 在模板中,动态插入HTML的v-html指令不可用 这条很好理解,小程序的界面并不是基于浏览器的BOM/DOM的,所以不能动态的在界面模板里直接插入HTML片段来显示. 题外话,如果有在小程序里插入html片段的需求怎么办?可以用<rich-text>组件或者wxParse(https://github.com/icindy/wx…

在上一章节中,我们列举了在Vue中能用但在mpvue中不能用或需要特别注意的特性,在实际开发前了解一下还是很有必要的,可以避免浪费找错误的时间. 如果你使用过原生的小程序框架,你一定经历过或思考过怎么解决以下的问题: 怎么存放可全局访问的变量? 页面跳转的时候,怎么传递参数到下一个页面比较好? 页面返回上一页的时候,怎么传递当前页的数据到上一页? 多个页面间需要同步数据,怎么做比较好? 网上一搜,解决的方法通常也是五花八门的,什么通过app上的globalData啊.通过存取storage啊.通…

背景 在一pc端的web项目里,由于某些特性需要由动态语言处理,所以只在有需要使用vue来处理数据的页面,直接引入vue.js来处理.由于刚开始并没有打算使用前端来渲染数据和处理交互,所以使用了一些非vue的ui和插件,导致后来冲突坑点不少.非vue模块化下使用vue,虽然不能import vue文件,使用组件方式也有点恶心,但处理一些事情还是不错的. 使用formdata提交表单数据 先上代码 var that = this; var myForm = document.getElementB…

再一次开发订餐系统中,遇到订餐页面引入头部商品列表,底部组件时,报错,模块编译失败,未进入缓存区. 我以为是新添加的模块没有重新启动导致的,然后重新与运行npm run dev后还是失败, 最后经过反复测试, 当在父组件中引入子组件时,如果命名Header/header  Section/section  Footer/footer三个组件时.就会报错 解决办法: 改变命名规则,header换成CardHeader后就可以正常使用.这个坑让我爬了半天,官方文档中也并未做出声明,具体原因还未做分析…

1.组件嵌套组件时,子组件作用域bug 组件A内的slot包含子组件B的话,无法正常使用变量(这种情况下,B组件的template错误地使用了A的作用域). 我的解决方案:减少一层组件提炼,即这种情况下,将A和B合并成新组件C,可配合使用mixin解决部分代码冗余问题. 2.上传图片到阿里云oss 我们采用了'服务端签名后直传'方案,即在服务端通过完成签名,然后前端直传数据到OSS,这样,AccessKey就不会暴露在前端页面了,而且对服务器的压力比较小. 我们从服务器拿到签名后,需要按一定格式…

mpvue项目里做API与数据分离统一管理 小程序里请求数据接口使用wx:request,因为考虑项目比较大,最好把wx:request封装起来,统一使用管理 utils.js 配置开发环境和线上环境接口 let util = {}; const ajaxUrl = process.env.NODE_ENV === 'development' // 测试接口地址 ? 'code.net.cn/api' // 线上接口地址 : 'https://api.code.net.cn'; util.API…

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

我们创建好mpvue项目之后,找到src/main.js打开在后面添加一行代码 (注意:不能在const app = new Vue(App) 之前添加) Vue.prototype.globalData = getApp().globalData 这行代码的意思就是,将小程序的全局变量,挂载在Vue的原型上,这样我们在不同的页面就都可以获取到全局数据了 不同页面使用 this.globalData获取或者添加修改既可 比方说我需要存储用户一些基本信息可以这样 this.globalData.u…

最近在做微信小程序,技术栈为mpvue+iview weapp组件库. 因项目需求,要用到日期+时间选择器,iview组件库目前还未提供时间日期选择器的组件,小程序官方组件日期时间也是分开的,在简书上看到一位老哥用小程序官方的多列选择器在小程序上实现了日期+时间选择. 于是借鉴老哥的代码,换成了vue的写法,简单粗暴,用mpvue的小伙伴可以了解一下.闰年平年等细节问题有精力的小伙伴自己去搞. <template> <div> <picker mode="multi…

这个东西有顾名思义是碎片,和之前的Activity对应. 坑1:一般情况都会想当然的以为进程被杀掉之后,Fragment也会被回收 其实,Fragment有自己的生命周期,有自己的管理器(FragmentManager),也即:包含Fragment的进程被干掉,Fragment不一定会被回收,而是由FragmentManager来决定生死. Q:如何验证上面的说法?A:如果是一般正常的流程“打开-关闭”软件,Fragment的确被回收了.但是如果使用“腾讯手机管家”之类的内存清理工具,清理内存(…

用了MUI之后,才发现,那坑比我想象之中的要多得多,有些是H5的坑,有些是plus的坑,接下来我一一来吐槽一番. IOS下面,上拉的时候,速度稍微快一点,表头自动隐藏,等你不拉的时候又自动显示 这种情况,在Android下面是正常的.why? 因为mui框架的头部header和底部nav都是采用的fixed布局 <header id="header" class="mui-bar mui-bar-nav action-head" 而IOS下面压根就不支持fix…

总结一下: 事件序列的定义:从手触摸屏幕(含)到离开屏幕(含)期间所发生的一系列交互事件.主要由ACTION_DOWN.ACTION_MOVE.ACTOIN_UP.ACTION_CANCEL等组成,其中一次事件序列中,DOWN和UP都只有最多一个,MOVE有若干个,可以为0个.定律:某个View只有将ACTION_DOWN处理(消费)掉,才会有机会处理后面的ACTION_MOVE和ACTION_UP. 定律:正常情况下,一个事件序列只能被一个View 拦截且消耗. 因为一旦一个元素拦截了某事件,…