将iview-weapp中的dist文件夹(此处我重命名为iview,以便区分)复制到mpvue项目的输出目录中(默认是dist,编译后的vue代码在此)
最近,很多人给我留言,问我说怎么在mpvue项目中引入小程序原生框架中的自定义组件。
介绍:iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称,大幅度降低了学习成本,是一套一套高质量的微信小程序 UI 组件库。
iview组件库中,通过Vue.use注册了iview到项目中后,在组件内调用iview组件时默认都是通过CamelCase的方式引用iview组件的,HTML本身是大小写不敏感的,vue官网也推荐在template中使用kebab-case标签,iview官网也提供了修改的方法,具体操作如下:
作者简介 赵伟麟,2011年就职于创新工场旗下点心OS,2014年加入携程酒店事业部,从事Android研发工作。擅长基于组件的业务架构,系统架构,建模,性能优化和重构,关注应用系统的扩展性和耦合性,追求简洁的代码。本文来自赵伟麟在“携程技术沙龙——移动开发工程实践与性能优化”上的分享。 *视频由“IT大咖说”提供,时长约37分钟,请在WiFi环境下观看。更多视频可在大咖说平台观看* 酒店业务部门是携程旅行的几大业务之一,其业务逻辑复杂,业务需求变动快,经过多年的研发,已经是一个代码规模庞大的工程,如何规
首先一个 APP 软件是一个大的系统,我们通常可以把这个大的系统划分为许多个小的模块,比如:登录注册功能,首页展示功能、个人信息功能等等某个具体的模块的功能。然后我们就可把这几个相对独立的模块分别划分给不同的人员进行开发。
为了提升代码的逼格,之后代码改为Vue文件组件,之前代码虽然读起来容易理解,而且适合在小的项目中使用,但是有如下缺点: 全局定义(Global definitions) 强制要求每个 component 中的命名不得重复 字符串模板(String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏 没有构建步骤(No build step) 限制只能使用
在实际中,有些时候我们需要从SD卡中加载一张很大的图片到内存中,但是如果你手机存储很小的话,如果直接将这张大图片放入内容就会导致分配失败等异常问题。所以我们就需要一种手段,将大图片也能正常的加载到内存,而不出现异常的情况。
最近开始用mpvue框架,所以遇到了一些坑,这篇文章记录下关于input组件的一个坑。老司机请略过。 小程序里做一个登录页,输入手机号和密码进行登录。很简单吧,用了iview之后页面很快撸出来了,但是点击输入框敲打键盘之后发现无论输什么东西全部都输不进去,这尼玛什么情况。预览到手机上进行同样的输入竟然是可以的。
答案:像iview源码中clickoutside引入了v-click-outside-x作为依赖,感兴趣的童鞋可以看文档链接
webpack ensure 有人称它为异步加载,也有人称为代码切割,他其实就是将 js 模块给独立导出一个.js 文件,然后使用这个模块的时候,再创建一个 script 对象,加入到 document.head 对象中,浏览器会自动帮我们发起请求,去请求这个 js 文件,然后写个回调函数,让请求到的 js 文件做一些业务操作。
刚进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。
打开项目hep-admin-web工程,在src目录下创建一个local的目录,再在local目录下创建lang的文件夹,此文件夹用于存放国际化文件,国际化文件包括三个en-US.js、zh-CN.js、zh-TW.js,文件内容分别如下:
loader的定义:一个导出了一个函数的node模块儿。当某些资源或文件需要转换时这个函数被调用。并且这个函数或方法有权调用webpack提供的Loader API。
公司的一个各种依赖比较老的项目,习惯了之前的iview和stylus开发,刚接手还是有很多不习惯的地方。
Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的render函数 要做这一个组件 其实并不难 看一下Vue官方示例 再找个UI组件库 差不多就能写出来 如果对项目有兴趣 可以fork或克隆项目 自行研究 有问题或BUG欢迎提issues
就是要一个富文本编辑器,然后有图片上传功能,因为vue-quill-editor是将图片转为base64编码,所以当图片比较大时,提交后台时参数过长,导致提交失败。
1.在src/components目录下新建User.vue文件,同时再新建User目录,在User目录下新建UserAdd.vue和UserList.vue两个文件
login #0 GitHub https://github.com/Coxhuang/iView-login #1 环境 "vue": "^2.5.2", "axios": "^0.19.0", "vue-axios": "^2.1.4", "vue-router": "^3.0.1", "view-design": "^4.0.0" // iView-UI 组件 iView – UI组件 axios – 发送http请求 localStorage – 存储TOKEN #2 实现功能 登录 获取TOKEN
前沿:中后台应用中表单需求颇多,左手一个表单,右手又是一个表单,无穷无尽,如果用模版一个个来写,不单写起来费时费力,而且看起来也是天花乱坠,于是这个时候你会去设想,那有没有什么方式可以去替换琐碎的手写表单模版的方式呢?让表单是“配出来”的,而不是撸出来的,让你轻松解决 form 表单,也不再为表单而烦恼。答案就是:动态表单
所谓IOC,即控制反转(Inversion of Control,英文缩写为IoC)
这个h()函数本质上是createElement 函数,这个函数的作用就是生成一个 VNode节点(虚拟节点),它不是一个实际的 DOM 元素。叫createNodeDescription(创建节点描述),我们是通过它所包含的信息会来告诉 Vue 页面上需要渲染什么样的节点,再通过diff算法可以追踪dom的变化
之前看过一篇写关于图片滤镜的文章,蛮有兴趣,因此作出了这个小 DEMO,可以切换多种图片滤镜并提供图片下载功能。
WPF为我们准备了完善的命令系统,你可能会问:“有了路由事件为什么还需要命令系统呢?”。事件的作用是发布、传播一些消息,消息传达到了接收者,事件的指令也就算完成了,至于如何响应事件送来的消息事件并不做任何限制,每个接收者可已用自己的行为来响应事件。也就是说,事件不具有约束力。命令和事件的区别就在于命令具有约束力。
最近,陆陆续续搞 了一个 UniUsingComponentsWebpackPlugin 插件(下面介绍),这是自己第三个开源项目,希望大家一起来维护,一起 star 呀,其它两个:
本身集成并没有vue的部分,我们采用的方式是把ui-css部分拿来使用,js效果自己用jquery写到methods里
截至目前Vue在GitHub上的Star数已经高达152601,还有绝大数像笔者一样不经常star别人的Vue友们(可恨可气)。Vue因其友好程度让更多前端爱好者加入到其中,开源项目对程序员来说是很有用的。你可以通过读代码并且在现有项目的基础上构建一些东西来学习,因为如果想提高你的 Vue 开发技术,那么花些时间来了解开源项目是很值得的。
之前写了一个小程序倒计时的demo,在网上查看了一下,计时器很少有demo,现在来写一个。
对于MVC、MVP、MVVM,这都是Android开发的一种架构,随着日积月累的开发,很对人对这几种模式是再熟悉不过了。不过当初我在学习的时候是因为看一个开源项目的源码是MVP架构的,也找个很多文章,发现很多文章不是全是概念,就是解释的含糊不清,所以写一篇文章来分享,让像我一样的小白可以快速理解这几种架构模式。
最近收到了一个需求,管理系统需要上线一个活动,但是活动是根据地区上线的,最小范围到市,于是有了下面这个组件 页面展示如图:
在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架。
来源: 铁皮饭盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e
前端三杰 Angular、React、Vue 都推荐单页面应用 SPA 开发模式,它们都有自己的前端路由解决方案:
Form表单 #1 环境 "view-design": "^4.0.0", "vue": "^2.5.2", #2 原生form <template> <form> <input type="text" v-model="form.username" placeholder="用户名"> <input type="text" v-model="form.password" placeholder="密码"> <button @click="submitForm">登录</02
现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要,因为基础有boostrap,组件库有:easyui,elementui,iview,ionic等等。但我个人练习自己如何写好一个css框架,对自己前端能力的提升还是有帮助的。所以本人以此为目标和动力。展开了这个系列的博客之旅。开篇以button为起点。 一、与美术交流获取得这些信息 1. 按钮状态:普通状态、鼠标悬停、选中状态、禁用状态 2. 按
之前创建的组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法。它只是一个接收参数的函数。 在下面这个例子中,我们标记组件为 functional,这意味它是无状态 (没有响应式数据),无实例 (没有 this 上下文)。
最近比较忙,忙着工作交接,忙着招人、忙着各种会,更新很少,这一篇也是作为本入门系列的最后一篇了,以后可能会写一些自己在前端这块的心得或者体会了,无关乎使用什么框架,可能就是原生的js、dom、编程模式或者框架相关,比如vue比如ng等等,入门篇虽然每一篇都写的比较粗糙,主要是因为我没有一个好的规划,想到哪里写到哪里,整体比较乱,不过无论怎样,但是都涉及了vue的一个知识点,这也是我几年内不常写博客,所以写一篇文章之前没有一个大纲和规划,这一点我会在后期的文章中注意。 这一篇文章会把上一片剩下
最近在学习mpvue,记一下苹果X安全区域的适配问题 判断机型工具类 全局组件mixin 安全距离css 页面标签class类处理 # 判断机型工具类 safe-area.js let cache = null export default function getSafeArea() { return new Promise((resolve, reject) => { if (cache != null) { // 如果有缓存不行行调用 resolve(cache)
第一、肯定会有人问,基于Vue的UI组件库有那么多优秀的,你为什么非要自己搞一套呢?这不又在重复造轮子吗?其实不然,虽然,基于Vue开源的UI组件有很多,诸如:Elements-ui、iview、cube-ui等等,但能在学习Vue的同时开发一套基于Vue的UI组件,不是更能巩固学习好Vue的重要特性--->组件
这是一篇个人博客搭建的记录博客,也是一篇关于Flask和Vue的简单"工具书",最后的代码会包含Web开发中常用的功能。(不全,只是使用频率相对高的)
由 vue-router 产生的每个页面,它本质上也是一个组件( .vue),主要承载当前页面的 HTML 结构,会包含数据获取、数据整理、数据可视化等常规业务。
前段时间在组内做了一下现有的代码分析,发现很多以前的legacy code多线程的使用都不算是最佳实践,而且坏事的地方在于,刚毕业的学生,因为没有别的参照物,往往会复制粘贴以前的旧代码,这就造成了坏习惯不停的扩散。所以本人就总结分析了一下Android的多线程技术选型,还有应用场景。借着和组内分享的机会也在简书上总结一下。因为自己的技术水平有限,有不对的地方还希望大家能多多指正。(代码的例子方面,肯定不能用我们自己组内产品的源代码,简书上的都是我修改过的)
初识 MVVM 谈起 MVVM 设计模式,可能第一映像你会想到 WPF/Sliverlight,他们提供了的数据绑定(Data Binding),命令(Command)等功能,这让 MVVM 模式得到
补间动画,就是开发者只需要指定动画的开始,动画的结束的“关键帧”,而动画变化的“中间帧”由系统计算,并且补齐。这就是补间动画。
使用vuePress开发,她能够很好的嵌入vue组件代码,使得文档能够准确的加载并预览组件,vuePress怎么使用可以看上一篇文章 VuePress搭建永久文档/博客网站
简单的上传文件,先把文件上传到input框只展示文件名,不走接口,之后点击确定上传按钮统一上传
IT派 - {技术青年圈} 持续关注互联网、大数据、人工智能领域 移动端UI框架 Mint UI(饿了么团队) 中文官网:http://mint-ui.github.io/#!/zh-cn 描述
领取专属 10元无门槛券
手把手带您无忧上云