这几天贴太多代码了,弄几张图吧,js-class-overflow类外面加一个滚动条,固定的高度 .js-class-overflow{ position: relative...; column-count:2; column-gap: 20rpx; padding-bottom:50rpx; .js-class-data-list
文 | 严灏 上周,知晓程序向大家分享了「知了地铁」小程序的上手体验。同时,我们也在这篇文章中提过,会与大家讨论有关小程序中手势缩放功能的实现。...关注知晓程序(微信号 zxcx0101),回复「知了地铁」,看「知了地铁」小程序上手体验文章。...今天,知晓程序就为大家带来有关手势缩放功能的实现方法,以及手势缩放实现在小程序中的局限和问题。 手势动态检测 首先,我们需要获得用户的触摸事件。...以上就是知晓程序(微信号 zxcx0101)带来的手势缩放图片功能的实现教程。虽然目前手势缩放并不能完美实现,但也希望大家可以举一反三,通过这个思路,创造出体验更好的小程序。...如果你希望讨论有关小程序开发中的问题,关注知晓程序(微信号 zxcx0101)并点击菜单栏中的「加群交流」,就能获得加入知晓程序开发讨论群的方式,与大家一同讨论小程序开发。
美团点评是最早受邀接入小程序的公司之一,早在2017年1月小程序于微信客户端正式上线之前,公司里的一些部门就已经开始实践小程序开发了,胡成全所在酒店旅游事业群下的美团酒店小程序就是其中一员。...在对框架的能力设计上,mpvue 会尽可能多地适配和复用了Vue.js 解决方案,包括代码构建、文档的支持等,这使得原本熟悉 Vue.js 的开发者,在切换到 mpvue 的时候基本上可以做到零成本,不用再去学习另外一套框架规范...mpvue 选择 Vue.js 作为小程序开发规范,但同时也支持微信小程序的原生开发方式,因为对小程序开发框架来说,无论是 mpvue 还是 wepy,最终编译出来的代码都必须符合小程序语法规范,区别在于引入的框架不同...关于mpvue和wepy的异同,一张表可以看清: ?...wepy 最初的定位是提供小程序的组件化开发能力,同时对小程序本身的能力限制做了大量的补充和完善;之后对 Vue.js 语法进行了大量的适配支持,但这需要巨大的开发量。
从今天开始带领大家实现一款云开发版的校园二手商城小程序 技术选型 1,前端 微信小程序原生框架 css JavaScript 2,管理后台 云开发Cms内容管理系统 web网页 3,数据后台 小程序云开发...这节可以作为选看,后面会手把手的教大家写一款属于自己的校园二手商城小程序。 我们经过前面小程序基础和云开发基础的学习,今天就来带大家实现一个综合项目,上线一款属于自己的微信商城小程序。...我们先在自定义组件searchInput.wxml里随便写一句话,然后在首页里引用这个自定义组件,看能不能展示出来。 ?...如上图,就可以在app.js里做云开发环境的初始化了。只有初始化好云开发环境id,我们才可以使用云开发功能。...然后home.js里的代码也要稍做改造。 ? 这样我们的数据就可以在页面上显示出来了。 ?
mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架。...框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。...如果没有,这里将带你了解小程序组件,注意,他并不是dom,因此与H5有相当多的不同,这也就是你把H5跑的好好的js代码直接copy到小程序中,跑步起来的间接而非直接原因,再者,这里也像你透露了一下api...,等好用到哭(别的语言早就有,而js没有)的一些特性的话,那我也拦不住你,你可以不去了解他,然而,你也不可能用mpvue用得很爽,因为这里都是用es6来写的。...css,js等在线验证的网站https://codepen.io/ 7、我说说我遇到的坑。
正文 本Demo完成共耗费近两周,也是在空余时间去写的,因为涉及到新知识JS、HTML和CSS3,所以也是边学习边写,代码编写上有什么不当处,还需小伙伴在评论处指明,帮助本人更上一层楼!...homepage.wxml 在这里本人承认当初写的时候偷了下懒,有些标签属性我直接用style写了,但真正开发时,最好把每个标签的style写在.wxss文件里,通过自定义的class名称(或者id),...总结 总体来说,代码没什么难度,只有三个页面,只是为了熟悉JS和CSS3而写的一个Demo,看过代码后的朋友就能知道可优化的地方很多的。...然后再来说说我对微信小程序的看法: 真的是“小”程序,官方指明程序大小最多不可超过1M,1M啊!...朋友们,所以就说明了小程序是没什么功能的,只能满足该应用的本能作用,所以针对手机上的低频应用,我是觉得可以舍App取其小程序,因为我就这么做了,比如美团外卖、饿了么、金山词霸等等。
https://www.cnblogs.com/yangfengwu/p/11624796.html 注:后面的所有教程都是使用自己封装的mqtt.js,这节说一下该包的使用说明 ? 新建项目 ?...2,复制A工程小程序里面的paho-mqtt.js mqtt.js public.js到工程的utils目录 ? ? 3,修改MQTT连接信息 ? ?.../utils/mqtt.js"); MQTT.ConnectMqtt()//链接MQTT 注:调用MQTT.ConnectMqtt() 以后,默认内部运行是自动断线重连,用户可把此函数放在需要连接的地方
我刚开始写一些技术文章是研究 Babel 插件的时候,就从那里开始讲: Babel 是一个 JS 的编译器,把高版本语法的代码,转换成低版本的代码,并且会自动引入 polyfill。...JS 的,后面我发现 postcss 就是 css 版的 babel,而且配置方式啥的都一样。...后来发现小程序调试工具、跨端引擎调试工具很多也都是用 Chrome DevTools 来调试,其实它们也是对接了 CDP,这样就可以用 Chrome DevTools 来调试它们的代码了。...这是我学习调试的经历:发现网页和 Node.js 的调试都可以用 Chrome DevTools 和 VSCode Debugger 调试,了解了下它们的原理都是基于 CDP,而且小程序调试工具、跨端引擎调试工具等可以用...我研究网页和 node 调试的过程中,顺便也搞懂了跨端引擎、小程序调试工具的原理和 Puppeteer 的原理。 这个案例也同样可以说明有了技术深度的同时也会拥有技术广度。
要加入项目和测试接口 上回书说,切完了页面,把HTML文件啊,CSS,JS,IMG图片什么都扔到相应的开发环境目录里,把链接神码的都搞好,然后在开发环境里把你的页面能运行起来,就像这样, 你的自己电脑上搞好的页面的访问路径是这样的...之后,就开始狂写JS了么? NO NO NO。。。 接下来,要开始做前端的模块分析和JS的结构的设计。装B一点的说法,就叫做“前端架构设计”。 还是老样子,随便百度一张网页设计图,给大家演示一样。...各个步骤带你走 但是在这个小文章中,咱们就大概演示个套路就得了,原图挺长的我只用QQ截了个半截, ? 切图的时候是从页面的结构去考虑,而写JS的时候是写各种功能,要从功能上去考虑。...它的数量是否可以根据后端数据进行自动配置?数量是固定的么?...指望在一篇文章里把这里的事儿都写清楚,这想法有点太奢侈了。 好了,长话短说,至少这7个功能块,是7个function方法。到这里,你可以开始狂写JS了。
可以看到,它正确的加上了样式: 用到的这些原子 class 就是 tailwind 提供的: 这里的 p-1 是 padding:0.25rem,你也可以在配置文件里修改它的值: 在 tailwind.config.js...并且这些 class 都可以通过配置来统一修改。 感受到原子化 css 的好处了么?...当然,社区也有一些反对的声音,我们来看看他们是怎么说的: 一堆 class,可读性、可维护性太差了 真的么? 这种把 css 写在 html 里的方式应该是更高效才对。...想想为啥 vue 要创造个单文件组件的语法,把 js、css、template 放在一个文件里写,不就是为了紧凑么?...之前你要在 css、js 文件里反复跳来跳去的,查找某个 class 的样式是啥,现在不用这么跳了,直接在 html 里写原子样式,它不香么?
而是当用户点击不同设置按钮的时候,通过请求获取实时的小用例列表,然后通过js的操作展示在这个div上。...但是具体效果我们可以先在html里写死俩个,效果调好了,我们在用js实现,最后删掉这俩个展示用的小用例接口html代码 即可。...这个左侧大div中,我们设置了三个按钮,然后还有一个真正装小用例列表的div,这个小div就是我们后续用js控制刷新展示的div。...我们现在先在这个小div里写几个小用例实体,设计下展示效果: 暂时我们先用这个方式吧~ 关于点击效果和上下调整位置的功能,我们之后再加即可。...所以删掉这三个demo展示,然后去写js,新建这个刷新小用例列表的函数 然后这个里面我们用js实现的话,是需要去从后台获取到小用例数据才可以。
对 tailwindcss 早有耳闻,但在我以前的观念里,tailwindcss 那简直就是开历史倒车,所谓的原子化 css,不就是早年的 bootstrap 么?我怎么可能接受这样的技术方案?...一个非常明显的感受就是,css 分离的方式,思维经常被打断,不连贯,但是 arkUI 写布局就非常舒适,我现在甚至可以做到直接一口气把样式写完,然后再看一眼预览,发现就跟设计图长得一样,但是我以前写 css...的时候,就很难做到这一点 1、tailwindcss 拯救了我 所以我就想,前端里面有没有什么 css in js 的方案,可以做到类似 arkUI 的开发体验。...我这里就简单介绍一下如何在 vite + react 的项目中引入 ✓后续我准备在我的小程序项目中引入 tailwindcss,如果考虑到要兼容 PC 端,兼容我之前的那一套响应式方案,那么复杂度就上来了...main.js 中,引入该 css 文件,搞定。
小程序 WePY - 支持组件化的小程序开发框架 mpvue - 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系,目前支持多端小程序,如:微信,支付宝,百度...,深度性能优化,支持跨小程序平台开发,完全兼容原生小程序组件 uni-app - 可以兼容多端小程序,比如支付宝,微信小程序,还可以开发快应用和native 更多资源请参考微信小程序开源资源汇总...CSS icon - 使用css写的icon,可以减少iconfont和图片所占的大小,其实主要是好玩,可以研究研究怎么写的 codepen - 在网页上快速写代码,可以免去打开编辑器去敲代码...等打包工具的话,为了 css 兼容,可以使用这个,css,less,scss 都可以用 压缩 js,css,html base64 加密解密 css3 中的阴影生成工具 - 可以让...) - 精髓三连击 CSS 揭秘 - 讲 CSS 使用技巧 ES6 标准入门(第 3 版) 编写可维护的 JavaScript - 红皮书作者写的,主要是 JS 编码规范,代码风格
: .btn { ... } 然后,其它人只要复制这个 CSS 到他的项目里,然后在 HTML 用上 CSS 类名,就可以直接用上我写的效果啦。...能不能只写一种样式就能兼容手机和电脑端呢?程序员们开始通过百分比,em,rem,优化布局等方式,使得屏幕变小后样式还是不会乱。 这种写 CSS 的思路就叫做 响应式 布局,兼容了手机和网页。...Ryan Dahl 编写了第一个最初版本的 Node.js,使得 JavaScript 除了可以在浏览器里运行,也可以在拥有 Node.js 平台的地方运行,比如自己电脑的终端里。...聪明的程序员发现,不管你写 Express.js 还是 Koa.js 不就是写响应函数么?...而浏览器里有一个监听浏览器地址改变的功能,单页应用的开发者就想了:我只要监听地址 url 的变化,再用 JS 渲染对应的页面组件,不就可以实现前端控制路由了么?这就是前端路由的基本思想。
小程序 WePY - 支持组件化的小程序开发框架 mpvue - 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系,目前支持多端小程序,如:微信,支付宝,百度...,支持跨小程序平台开发,完全兼容原生小程序组件 uni-app - 可以兼容多端小程序,比如支付宝,微信小程序,还可以开发快应用和native 更多资源请参考微信小程序开源资源汇总 CSS PostCSS...icon - 使用css写的icon,可以减少iconfont和图片所占的大小,其实主要是好玩,可以研究研究怎么写的 codepen - 在网页上快速写代码,可以免去打开编辑器去敲代码,可以解决电脑上没有...css 兼容,可以使用这个,css,less,scss 都可以用 压缩 js,css,html base64 加密解密 css3 中的阴影生成工具 - 可以让 UI 根据这个去写阴影,后续直接...CSS 揭秘 - 讲 CSS 使用技巧 ES6 标准入门(第 3 版) 编写可维护的 JavaScript - 红皮书作者写的,主要是 JS 编码规范,代码风格,写出一些让后续开发者能看懂的代码
否则,就变成,他们什么都想好了,就差个写程序的了。 前端开发的工作流程,这个说的范围就可大可小了。...先说小的工作流程,就是产品经理出需求,UI出设计图,前端岗切图和写JS,后端同学准备好后台环境和数据接口,然后前端读取接口获取数据,生成页面DOM,并控制相关UI交互。...html,css,js,这三者之间的关系,可以用一栋楼来比喻,html是楼的主体钢筋水泥;CSS是楼的外观装修;JS是电梯,开关一类的东西。...首先要明确一点,JS是前端的一部分,但前端不是JS,前端往最小里说,它也是html、css、js三者的组合。所以提升你的目标可以是提升JS,但眼睛不能只盯在JS上面,就是说你前端的格局要大。...但如果你jQuery用的比较6,基本上你在前端行里找个工作问题不大,贴近市场么。 刚才说的那一段,也就是我不太赞同前端新手通过在家自学的方式,来提升JS的原因。就是压力小,动力就小,进度就小。
10、同事说,他在写i++的时候总觉的自己写的是 我艹………有木有同感???? 【如果大家对程序员,web前端感兴趣,想要学习的,关注一下小编吧。...面试官:“知道什么是继承么”。应聘者:“我是孤儿没什么可以继承的”。面试官:“知道什么叫对象么?”。应聘者:“知道,不过我工作努力,上进心强,暂时还没有打算找对象。”。面试官:“知道多态么?”。...33、IT工程师=加班狂+程序员+测试工程师+实施工程师+网络工程师+电工+装卸工+搬运工+超人,有同感的转走。 34、 用一句话总结了HTML,CSS,JS的关系。...HTML是名词,JS是动词,CSS是形容词和副词。 35、我是个程序猿,一天我坐在路边一边喝水一边苦苦检查bug。这时一个乞丐在我边上坐下了,开始要饭,我觉得可怜,就给了他1块钱,然后接着调试程序。...媛说:”别傻了,我们根本就是两个世界里的人,就像在JS里永远都无法调用JAVA类一样,我们之间也是不可能的。” 猿沉默了很久,转身离开了。一个月之后,他在开源社区公布了dwr的完整代码。
正在写的时候收到稀土圈公众号开源库功能上线的通知,英雄所见略同。...前后端代码写在同一份文件,根据注释条件编译输出不同内容 AlloyTeam/Mars 腾讯AlloyTeam移动Web前端知识库 winstonjs/winston node日志库 wepyjs/wepy 小程序组件化开发框架...库 wycats / handlebars.js 前端模版引擎 ElemeFE/element 饿了么前端团队的Vue组件库(业界比较早的vue组件库) ElemeFE/mint-ui 饿了么前端团队的移动端...,将sql编译成js代码 thejameskyle/babel-handbook babel工具书 babel/babel babel js编译器,可以用最新语法写js lcxfs1991/blog...js可以调用java库。
CSS 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? CSS选择符有哪些?哪些属性可以继承? CSS优先级算法如何计算? CSS3新增伪类有那些? 如何居中div?...让页面里的字体变清晰,变细用CSS怎么做?...知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?...JQuery一个对象可以同时绑定多个事件,这是如何实现的? Node.js的适用场景?...C有一艘小船和一个可以上锁的箱子。C愿意在A和B之间运东西,但东西只能放在箱子里。只要箱子没被上锁,C都会偷走箱子里的东西,不管箱子里有什么。
领取专属 10元无门槛券
手把手带您无忧上云