WeUI | 易学教程

10大H5前端框架

阅读更多关于 10大H5前端框架

作为一名做为在前端死缠烂打6年并且懒到不行的攻城士，这几年我还是阅过很多同门从知名到很知名的各种前端框架，本来想拿15-20个框架来分享一下，但在跟几个前辈讨教写文章的技巧时果断被无情的打击了，所以这里我还是低调的只拿出10个框架来个大锅乱炖来简单介绍，凑够字数也就全剧终了。原本写这篇文章想围绕着 CSS 框架来的，但因为目前界内比较流行并遍地开花的主要还是 JS+CSS 模式的框架，并且自己靠着一点 JS 功底，就想专门针对 CSS，所以最后来个大锅乱炖都大致聊聊。下面的框架也没有什么先后顺序之分，我想到啥就写啥啦( 作为前端，我一向都这么的任性 ^_^ )。 Bootstrap 首先说 Bootstrap，估计你也猜到会先说或者一定会有这个( 呵呵了 )，这是说明它的强大之处，拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心，来让自己成长。结果受到周围各种基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才，但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美，所以这也是我最初选择 Bootstrap 的原因之一，它让我做出来的东西好歹能在妹子面前装个逼，不过时间长了难免觉得 Bootstrap 美的让人烦躁，但好在它的每个版本都会有很大的改变，不会让人觉得自己做的网站会跟很多网站撞脸

jquery weui轮播图的使用

阅读更多关于 jquery weui轮播图的使用

jquery weui的轮播图是对第三方插件swiper的一个封装，所以使用时需要引入对应的swiper.min.js文件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>weui轮播图</title> 6 <link href="css/weui.min.css" rel="stylesheet"> 7 <link href="css/jquery-weui.min.css" rel="stylesheet"> 8 <style> 9 img{ 10 width: 100%; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="swiper-container"> 16 <div class="swiper-wrapper"> 17 <div class="swiper-slide"><img src="img/1-2.png" alt=""></div> 18 <div class="swiper-slide"><img src="img/1-3.png" alt=""></div> 19 <div class="swiper-slide"><img src="img/1-3.png" alt=""></div>

weui实现滚动加载的效果

阅读更多关于 weui实现滚动加载的效果

weui是微信公司提供的一个UI框架，在H5开发中一些组件可以直接使用。weui文档地址： http://www.jqweui.cn/components 使用weui，需要引入weui.css和jquery-weui.min.css，还有jquery.min.js和jquery-weui.min.js。库文件下载地址： https://github.com/LuoYiHao/front-end-lib/tree/master/weui 为了实现滚动加载的效果，首先实现加载列表的函数： function getActivityList(pageNum) { //请求消息 if(true){ $.ajaxDirect("/list?pageSize=10&pageNum="+pageNum,'POST',{}, function(data){ list = data.data.list lastPage = data.data.lastPage }, function(){ aiui.toast("请求失败", "text") } ) } } 进入页面先调用接口加载10条数据，并获取当前数据库页数为lastPage。 var pageNum = 1 getActivityList(pageNum) var list var lastPage 然后实现滚动加载： // 上滑加载更多 $

记录我的第一篇博客，【新手向】微信小程序云开发

阅读更多关于记录我的第一篇博客，【新手向】微信小程序云开发

【新手向】微信小程序云开发前言为什么要写博客微信小程序开发小程序云开发概述准备知识储备组件库开源框架环境搭建最后前言偶然看到自己以前写的代码 em…这一坨什么鬼，哈哈哈所以我打算抽空重新写一遍，顺带总结下学到的东西，同时加深对技术点的理解本篇博客主要分享一些自己项目（校园服务、论坛类应用）中采用微信小程序云开发学过的一些东西。会不定期更新博客，包括以下（以后想到其他会增加），因为主要介绍微信小程序云开发，所以这里不涉及搭建后端服务器（以后会写）。 1.云开发实现用户登陆注册 2.云开发实现发布动态（含收藏、评论、点赞） 3.云开发实现消息模板/订阅消息推送 4.调用百度云OCR识别校园卡信息 5.开发自定义组件、模板为什么要写博客一开始接触博客是自己在做项目时，遇到问题，会首先通过搜索引擎寻找解决办法，搜索结果大多数是博文，看多了那些技术大牛写的博文，也开始萌生出自己写博客想法。起初，觉得写博客很浪费时间，需要花时间去思考，去总结，去整理成章，需要花费很多时间，而且感觉自己技术含量低（大学生一枚），写出来没意义，于是又放下了写博客的想法。后来，在某次面试后，感觉自己上大学一年多以来什么都没学会，但是好像又会一点儿什么。于是想写一些值得回味的东西，把自己学过的知识按自己的结构整理记录下来，方便日后查阅巩固，记录自己的成长轨迹，同时加深对技术点的理解

前端简历

阅读更多关于前端简历

简历的本质在写简历之前，我们必须清楚的了解一件事情，那就是简历是什么？它不是人生履历，不是项目清单，也不是技能大放送。简历的存在只有一个目的 —— 帮你约到面试。只要能达到这个目的，简历可以是一段视频，一个开源项目，一张照片，甚至是一行字，比如： I wrote javascript 当然，绝大部分简历的形式，就是我们所熟知的，是一篇文章。即使你通过其他方式获得了面试，当你入职的时候，还是要有这么一份纸质简历的，所以不要想着偷懒。其实简历不只是表现自己，更是传递以下三个信息，增强通过率。是什么（你能做什么？，擅长什么？）比别人好在哪些地方（相比其他同行，你的优势？）如果雇佣你，招聘方会得到什么好处（能不能为企业带来效益？）正如你抉择跳槽，思考要不要留在这个公司的时候，你也可能考虑下面三点待遇（给的钱够不够？福利好不好）环境（同事nice不？老板好不好？事少离家近？工作开心与否？是否帅哥美女多？嗯哼）个人（有晋升机会不？能否再进步？）当然企业和你的相互选择其实正如上面几点中的考量和博弈，当然面试是平等的，是相互选择的结果，所以有你对企业的考量，也有企业对你的考量回归到写简历，和很多人在大学写议论文写作文是不同的，过分的论证会显得自夸，反而容易引起反感，所以要点到为止。这里的技巧是，提供论据，把论点留给阅读简历的人自己去得出。放论据要具体，最基本的是要数字化

微信开发系列——微信订阅号前端开发利器：WeUI

阅读更多关于微信开发系列——微信订阅号前端开发利器：WeUI

阅读目录一、WeUI组件介绍二、组件基本用法 1、引用必须的文件 2、最基础的组件样式 3、其他基础组件效果示例三、自定义组件 1、简单的弹出层 2、图片全屏预览四、使用示例五、总结正文前言：年前的两个星期，学习了下微信公众号的开发。后端基本能够基于盛派的第三方sdk能搞定大部分事宜。剩下的就是前端了，关于手机端的浏览器的兼容性，一直是博主的一块心病，因为博主一直专注于bootstrap的相关组件学习，知道bootstrap做响应式没有任何问题，所以曾经尝试过直接用bootstrap来布局，对于一些简单的栅格布局，bootstrap没有任何问题，可是一旦涉及前端组件这一块的时候，总是找不到合适的移动端组件，什么都要自己去实现，这个开发成本就大了去了。于是乎博主打算另辟蹊径，找找基于微信开发的移动端UI组件，最后找到了微信官方开发的一套前端组件：WeUI。本文原创地址： http://www.cnblogs.com/landeanfen/p/8473755.html 回到顶部一、WeUI组件介绍 WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。有了这个作为基础，妈妈再也不用担心微信开发的浏览器兼容性问题了，微信官方推出的东西应该比较靠谱吧！ WeUI开源地址： https:/

微信小程序的bindtap事件

阅读更多关于微信小程序的bindtap事件

在微信小程序中，要想获取元素的属性值，需要用到 bindtap事件，如果想要正确获取到属性值，对属性的命名还有一定要求如下是正确的方式 data-money-Num="9.93" ： <view class="weui-msg__desc msg_text">我的<text class="msg_text">余额9.93元，</text><navigator url="javascript:void(0);" class="weui-msg__link" bindtap="allDraw" data-money-Num="9.93">全部提现</navigator></view> 如果写成 data-moneyNum="9.93” 就获取不到了，所以要么全小写，要使用驼峰命名方式，就必须中间加 - (短横杠) 下面是完整的饿示例： wxml: <view class="page"> <view class="weui-msg"> <view class="weui-msg__icon-area">  <image src="../../images/money.png"></image> </view> <view class="weui-msg__text-area"> <view

列表渲染与条件渲染

阅读更多关于列表渲染与条件渲染

作者 | Jeskson 来源 | 达达前端小酒馆列表渲染与条件渲染如何渲染数组类型和对象类型的数据渲染数组⾥的所有数据相同的结构是列表渲染的前提，列表等都会有⼏千上万条的数据，它们的共同的特征就是数据的结构相同。 data: { newstitle:[ "幸咖啡", "腾：年", "总投资20亿元", "京数量同⽐增⻓163%", "腾超五千万", ], } 如何把整个列表都渲染出来呢？ <view wx:for="{{newstitle}}" wx:key="*this"> {{item}} </view> wx:for=”{{newstitle}}”，就是在数组newstitle⾥进⾏循环 *this代表在 for 循环中的 item 本身，⽽{{item}}的item是默认的 <view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this"> {{title}} </view> 默认数组的当前项的下标变量名默认为 index 数组当前项的变量名默认为 item，wx:for-item 可以指定数组当前元素的变量名，wx:for-index 可以指定数组当前下标的变量名电影列表⻚⾯ movies: [{ name: "肖申克的救赎", img:"httpsublic/p480bp",

微信小程序 - 表单验证插件WxValidate使用

阅读更多关于微信小程序 - 表单验证插件WxValidate使用

参考文章（1） Github地址： WxValidate 1. 拷贝至util目录 2.项目引入 3.查看wxml匹配规则，通过name 4.在js配置规则 1 import WxValidate from '../../../utils/WxValidate'; 2 3 Page({ 4 5 /** 6 * 页面的初始数据 7 */ 8 data: {}, 9 10 onLoad: function(options) { 11 12 /** 13 * 4-1(先初始化表单) 14 */ 15 this.initValidate(); 16 }, 17 18 19 20 showModal(error) { 21 wx.showModal({ 22 content: error.msg, 23 showCancel: false, 24 }) 25 }, 26 27 28 submitForm(e) { 29 /** 30 * 4-3(表单提交校验) 31 */ 32 const params = e.detail.value 33 if (!this.WxValidate.checkForm(params)) { 34 const error = this.WxValidate.errorList[0] 35 this.showModal(error) 36 return

2019前端UI框架排行榜

阅读更多关于 2019前端UI框架排行榜

在前端项目开发过程中，总是会引入一些UI框架，已为方便自己的使用，很多大公司都有自己的一套UI框架，下面就是最近经常使用并且很流行的UI框架。一.Mint UI 流行指数：★★★★ Mint UI是饿了么团队开发基于 Vue.js 的移动端 UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。官网： https://mint-ui.github.io/#!/zh-cn Github： https://github.com/ElemeFE/mint-ui/ 二.WeUI 流行指数：★★★ WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。官网地址： https://weui.io/ Github： https://github.com/weui/weui.git 三.cube-ui 流行指数：★★★★★ cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。官网地址： https://didi.github.io/cube-ui/#/zh-CN Github： https:/

订阅 WeUI