stylus

强烈推介的几个微信小程序开发小技巧,简单又实用

血红的双手。 提交于 2020-10-27 04:52:23
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家。如果对大家确实有帮助,别忘了点赞哦 🌟 ~ 微信开发者工具版本: 1.03.2006090 (2020-06-19) 基础库版本: v2.12.1 (2020-08-04) 1. 开发中可能遇到的坑以及 Tips 本来想写个小技巧的,结果我总结了一堆坑,没上手之前完全想象不到微信小程序的开发体验是如此之差、如此之烂,从微信开发者工具到所谓的「全新语言」,都有一种浓浓的半成品的 five 即视感,实在让我 emmm.... 另外我发现网上的小程序文章大部分都是如何使用和如何避坑的实用文,而不是技巧文,这也从侧面反映了小程序的坑多。 在微信小程序原生开发过程中,我不断发出这样的疑问「为什么堂堂技术人才多如牛毛的腾讯,会推出如此 laji」,很多弱智反人类的地方,在两三年前社区就已经提出来,官方回复已经反馈正在修复中,但几年过去了,还是没有音信,官方回复仍然是一句冷冰冰的「已反馈」 😤 微信开发者工具经常热更新不起作用甚至白屏,重新编译也不行,只能强行退出后再次打开; 跟上一条类似,有时候一点样式出错,预览整个都白屏,调试器里也不说哪里的问题,直接就给你弃疗不显示,重新编译也无法解决问题,只能强行退出后再次打开; 跟上一条类似,调试器里报的错经常没什么用

在stylus中实现random随机数功能

房东的猫 提交于 2020-10-03 12:28:11
写在前面 与 Sass 一样,Stylus 是一门优秀的 CSS 预编译语音:富有表现力,动态,强大的CSS; 在使用 Stylus 写下面这个效果的时候,需要用到随机数,可是我翻阅了 Stylus 的文档,却没有发现可用的函数。 翻阅 Stylus 的文旦,发现 Stylus 里面支持 JavaScript API,当有一些事情无法使用 Stylus 完成的时候,就在 JavaScript 中定义它。所以我们使用 .define(name, fn) 在 Stylus 上定义一个 random 函数。 一、如果你是直接引入的 Stylus 来编译 直接给 Stylus 扩展一个 random 函数 var stylus = require ( 'stylus' ) // 给stylus扩展一个random函数 style.define( 'random' , function ( min, max ) { if (min === undefined || max === undefined ) { return Math .random() } return Math .floor( Math .random() * ( Number (max) - Number (min) + 1 )) + Number (min) }) // 执行你的其他操作 复制代码 二

vue项目出现Module not found: Error: Can't resolve 'stylus-loader'错误解决方案

耗尽温柔 提交于 2020-10-03 01:51:05
vue项目出现Module not found: Error: Can't resolve 'stylus-loader'错误解决方案 参考文章: (1)vue项目出现Module not found: Error: Can't resolve 'stylus-loader'错误解决方案 (2)https://www.cnblogs.com/wxy0126/p/10908096.html 备忘一下。 来源: oschina 链接: https://my.oschina.net/u/4438370/blog/4649913

WPF 开机启动因为触摸初始化锁住界面显示

爷,独闯天下 提交于 2020-08-19 22:05:54
现象是设置 WPF 开机启动的时候,概率界面不显示,进程已经起来,同时占用内存极小。通过 dump 或附加调试可以看到主进程带等待触摸线程的回应 在我的某个有趣的设备上,这个设备开机启动的时候将会比较慢初始化完成 USB 设备,或者说是 HID 触摸屏设备 此时测试小伙伴告诉我说测试了几百次,会发现有一次某个开机启动的 WPF 应用起不来了 我使用 dnspy 附加调试看到了主线程其实执行了,但是在一个锁里面等待,如下图 实际上的进入锁的代码是没有意义的,需要看是业务上哪里进入了锁 从调用堆栈里面,如下图,可以看到是 PenThreadWorker.WorkerGetTabletsInfo 方法在等待锁 通过 WPF 触摸到事件 可以了解到这是在等待触摸线程执行 这是在 dnspy 断点不够准,实际的代码是 getTablets.DoneEvent.WaitOne(); 也就是这个是在等待一个锁,这个会在什么时候释放,会在 Stylus Input 线程执行完成之后释放,那么 Stylus Input 线程在做什么呢 这个 Stylus Input 线程在等待触摸消息,这就有趣了。主线程在等待触摸线程执行获取 Tablet 信息,而触摸线程在等待主线程初始化完成之后可以获取触摸消息 因此主线程等不到触摸线程执行获取触摸信息完成,也就是主线程被锁住

design tokens —— 设计和开发碰撞的火花

六月ゝ 毕业季﹏ 提交于 2020-08-19 16:14:20
作者: 凹凸曼 - TT 前言 在前端的开发的过程中,和前端合作最紧密的职位应该就是设计师了。在业务流程中,设计师将自己的交互稿、视觉稿以 1px 以内误差的期望交给开发者。但在这个过程中有几个不方便的地方: 设计稿可拆解为布局、图案、文字、颜色等。其中布局、文字以及颜色这三者的样式编码需要花费前端开发者大量的时间。虽说近几年随着蓝湖等设计协同工作平台的诞生,可以在平台上获取到部分 css 代码,但是依然不能满足 web、iOS、Android 等多平台的情况; 设计稿的更新无法及时在开发者的代码中体现,一是因为开发首先需要拿到新的设计稿,再根据标注甚至肉眼判断区别后更新代码;另一方面,设计稿中看似简单的改动可能导致较大范围的代码改动,例如字体大小等。 为了解决上述的问题,完善设计和开发之间的协作流程,Design Tokens 应运而生。 什么是 Design Tokens 在了解 Design Tokens 之前,需要先了解一下 Design System (即设计系统)的概念。这个概念在设计和开发的沟通流程中已经流行许久,在团队设计体系工程化的过程中不可或缺。 A Design System is the single source of truth which groups all the elements that will allow the teams to

关于对健壮性代码的理解

感情迁移 提交于 2020-08-17 02:57:51
这两天学到了很多知识,对项目的严密性有了极为深刻的理解,简而言之,身为前端开发者要站在用户的角度去写相关代码,而不能仅仅局限于理所当然,也不可以认为数据有便有,没有便没有,身为开发者,更多的应该考虑用户的感受,总结了以下几点: 提高代码的健壮性 1.非空过滤 给每一条要渲染显示的数据添加过滤器 要思考的不仅仅是渲染成功后的结果,更多要思考的是如果渲染不成功会显示什么,也就是当返回结果为空时,要显示给用户的是什么 2. 不完全相信后台 发起请求时添加条件判断 虽然if/else饱受诟病,但可能后台开发者本身也不能确保不出任何问题,为了提高容错率,加一点条件判断是必要的,并且,要结合多个条件确保拿到的是正确的数据 3. 不完全相信用户 对用户输入的数据进行严格验证 作为开发者当然期待用户输入的是自己想要的格式, 但用户是单纯的 ,你不能确保用户一定会按照你想要的进行输入,这一点至关重要 4. 考虑代码的可复用性 包括html/css/js/单页面组件 原则:抽离共性,保留不同 html: 若dom结构大致相同,可以使用相同的dom结构; css/less/scss/stylus: 同一app内若有多次的div/view/text style,可以直接在public.css/less/sass/stylus中声明共有样式 js:将需要多次使用的业务逻辑封装成单一功能函数

Code Review总结一些Vue开发规范经验

白昼怎懂夜的黑 提交于 2020-08-17 02:44:32
规范与每个团队和个人都是息息相关的,因为其影响的不只是只是代码的维护和理解成本,严重的时候是会影响成员开发的心情 一个团队的编码规范、git规范等,并没有绝对的最优解,心里要清楚明白 没有银弹 ,规范是为了让团队统一,提高代码阅读性、降低代码维护成本等,本文是记录一些在项目 code review 中常见的规范,仅供参考 JS部分 和渲染无关的数据 vue 中 data 的数据默认便会进行双向数据绑定,若是将大量的和渲染无关的数据直接放置在 data 中,将会浪费双向数据绑定时所消耗的性能,将这些和渲染无关的数据进行抽离并配合 Object.freeze 进行处理 table 中 columns 数据可以单独提取一个外部 js 文件作为配置文件,也可以在当前 .vue 文件中定义一个常量定义 columns 数据,因为无论如何都是固定且不会修改的数据,应该使用 Object.freeze 进行包裹,既可以提高性能还可以将固定的数据抽离,一些下拉框前端固定的数据也建议此操作 const columnList = Object .freeze([ { title : '姓名' , key : 'name' , align : 'center' }, { title : '性别' , key : 'gender' , align : 'center' } ]) 复制代码 需要注意的是

万物皆可 Serverless 之使用 SCF+COS 快速开发全栈应用

拈花ヽ惹草 提交于 2020-08-14 09:33:06
我一直想做一个网页应用,奈何没有系统学习过前端,直到后来我接触到腾讯云无服务器云函数 SCF,让前端可以快速获得后端的能力同时,一并解决了前端数据请求跨域的问题。 本文来自 Serverless 社区用户「乂乂又又」供稿 没错,云函数 SCF 就是那种一旦用了就无法回到原来那种神奇的东西,让人不禁感叹为什么没有早点遇到 SCF 然后我花了大概一天的时间编写调试上线发布云函数(应用后端),然后又用了一天的时间学了下前端,主要是确定要用到的技术栈(后面我会再讲到这个问题),然后第三天正式开始开发应用,将云函数引入前端调用,测试数据,调整布局,打包网页发布到 coding pages。 所以在我是一个前端初学者的背景下,前后仅花了大概三天的时间,就完成了这样一个比较简单的网页应用 这就是 Severless 的魅力所在,它可以让你快速开发上线全栈应用,无论你是前端或是后端开发者都可以获益许多。 效果展示 首页 视频播放页 更详细的体验可访问 https://wo-cao.cn/ ,仅做测试之用,不要乱搞哦~ 是不是有点跃跃欲试涅?让我们开始吧~ 前端部分 由于初涉前端,前端丰富得让人眼花缭乱的生态让我花费了一整天的时间来确定所要用的框架。 这里大体说下我用到的前端技术栈,帮助小伙伴快速进入实际开发状态,不要像我这个前端小白一样在框架的选择上耗费太多时间 需求 第三方库 html预编译

Prepros(前端编译工具)中文版

此生再无相见时 提交于 2020-08-13 08:15:19
Prepros 7 是一款非常好用的编程类的软件,我们的这款软件支持的编译格式有非常多种,其中就包括了Sass、Less以及Stylus等等,可以说是十分适合用户们用来做这个开发软件的前端,不过在相对与其他的那些编译工具复杂的界面来说,我们就拥有了一个相当的直观的界面,并且上手也是十分的简单又方便的。 教程 1、下载软件压缩包文件,首先点击“Prepros-Setup-7.2.9.exe”安装官方客户端程序 2、将crack文件夹下的复制到软件根目录下目标文件夹下,选择替换原文件即可 默认路径为:C:\Users\<"USERNAME">\AppData\Local\Prepros\app-7.2.9\resources 3、Prepros 7和谐完毕,请放心体验。资源地址: Prepros(前端编译工具)中文版 来源: oschina 链接: https://my.oschina.net/u/4293376/blog/4290016

WPF 触摸屏应用需要了解的知识

一世执手 提交于 2020-08-07 07:34:45
我从 2017 进入大屏触摸这个行业,主要是做桌面软件这一块。在大屏交互平板这个行业里面的还能看的上去的应用,都是使用 WPF 做的。本文就来和大家聊聊在触摸屏应用开发的时候需要了解的软硬件知识。阅读本文你将能大概了解这个行业的一点知识 触摸屏等于触摸框加屏幕 触摸屏必须要分开看,至少在软件上需要将触摸屏分开为触摸框加屏幕两个模块,因为触摸框会直接影响软件的形态以及逻辑。而屏幕虽然也会影响,但是已经有大量驱动和底层的渲染库解决这部分问题,理论上除非写很底层的开发,否则需要关心的只是屏幕分辨率以及频率,而不需要关心屏幕的显示效果 触摸框提供了触摸输出,而屏幕接收软件的输出。因此一个触摸屏应用拆分为触摸框和屏幕就能拆分两个模块,分别是软件的输入和输出对应的模块 接下来需要告诉大家触摸框有哪些了 触摸框大概可以分为电磁屏、电容屏和红外屏,以及其他屏。我经手最多的是电磁屏、电容屏和红外屏。不同的屏幕对软件的实现逻辑有一定的影响 红外屏 红外屏幕,即红外触摸框,属于成本最低的一个触摸框。基本上市面上的红外触摸框都属于低成本方案。但红外也依然能做到高精度低延时,不过高端红外触摸屏的成本会比同等的电容屏贵一些。当然,这不是绝对的,取决于销售大佬的能力 红外屏的开发需要了解到的是红外是不区分触摸物体的,这个和电磁屏、电容屏相对。红外触摸框的原理是通过光线判断,只要有物体接触屏幕,挡住了光线