分类： 一些积累

小程序自定义tabbar动态更新购物车数量，用常规的组件间传值方法似是不可行。实践分两步可行： 每一步，加入购物车成功时定义缓存Storage值，如 let _num = wx.setStorageSync(‘CART_COUNT’, num); this.setData({cart_count: _num}); 组件内初始读取CART_COUNT值并显示；

中文版产品转换支持多语言处理方案： Php里用 _e(),  __()等方法且中文写描述文字相关；js用到的文案用wp_localize_script() 方法统一在php设定对应变量； 对应__e,__()里的中文补充英文译文； 运行gulp的gulp-wp-pot模块，将php里所有_e(), __()等写法的字段抽离生成 .pot文件； 用Poedit将.pot文件生成.po文件，并翻译完整中文语言包文件(xx_ZH_CN.po)； 记事本打开xx_ZH_CN.po 手动将（msgid字段）混合中文的源句子里的中文去掉；同时php里同样将_e(), __()里的中文去掉只保留英…

通过sass(scss)结合css变量简易实现暗黑显示模式： Sass引入为包含css变量的参数, 如body{ font-color: $bfc; } 参数：$bfc: var(—wbBfc, #666)； 通过js在外层，如body toggle class “wb-dm”, 来控制暗黑与正常模式的切换； 那么暗黑下的css变量改变数值即：.dm{–wbBfc: #ccc;…} 实践例子参考https://eyes.demo.wbolt.com/

一开始在sass这样写的，gulp给我过滤掉了-webkit-sticky… 然后Chromre有效，但Safari失效。 .sticky{ top:0; position: -webkit-sticky; position: sticky; } 直接用position: -webkit-sticky; Safari好了，但Chrome失效了… 网上找了下，解决方法竟然是将前辍写法写最后（如下），所以说有点另类哇. .sticky{ top:0; position: sticky; position: -webkit-sticky; } 另外，需要满足如下条件stick…

原本用data:img/svg+xml;utf-8,<svg …. 这种写法，将svg作为css引入的背景图，既矢量，又能比base64更小，本来是不错的方案。但升级到最新Chrome (72.0.3626.109) 发觉竟不能正常显示了。 Google一翻，在Stackoverflow 找到了原因及解决方案：需要将<svg/> 转换为URL编码(URL encode)。也即原来的写法， [cc lang=”css”]data:image/svg+xml;utf8,<svg width=”40″ height=…

JQuery (版本3.0以下) 不能直接用addClass()或removeClass()或toggleClass()来控制SVG。但.attr() 方法支持SVG的类名控制: // 代替 .addClass(“newclass”) $(“#item”).attr(“class”, “oldclass newclass”); // 代替.removeClass(“newclass”) $(“#item”).attr(“class”, “oldclass”); 或者你不想用jQuery，可尝试如下原生写法: var element = document.getElementById(“item…

如图示，这种卡券的锯齿效果，可用css radial-gradient 的 circle属性来实现。 [codepen_embed height=”265″ theme_id=”0″ slug_hash=”ZVZZQY” default_tab=”css,result” user=”sheshihui”]See the Pen coupon style by Frank She (@sheshihui) on CodePen.[/codepen_embed]

参考url https://www.cnblogs.com/pansidong/articles/7563155.html https://www.jianshu.com/p/00724ab30c89 https://www.cnblogs.com/mhxy13867806343/p/6265159.html 组件的样式只能定义在组件对应wxss data:image/svg+xml;base64,{} 可通过这个方式引入svg图标， 可在css用data:image/svg+xml;utf-8,{svg code}引入svg图标 作为组件， 1. js须有Component构造器 参考 ht…

svg图标处理时，个人会习惯使用如下工具，且都是在线的(正常点的，或者说正版前端应该会用gulp之类吧?) https://jakearchibald.github.io/svgomg/ 爱死这个在线工具了，你可以直接将sketch或ps里边的svg代码，直接复制粘贴到站点，然后就可以生成一个干净的svg文件，且多选项可按需配置。当然你也可以直接将下载好的svg拉到这个在线站点来优化。 https://icomoon.io/app/ 早期是用www.iconfont.com管理iconfont的，但…谁用谁知道，反正我很多年没使用了，不知后面是否已优化。而当前推荐的这个站点，管理i…

wxss其实基本就是css, 而已习惯用sass写样式的我们，再一行一行，原始地敲css，是件很奇特的事。就像明知道可以发微信，但还要在邮局发电报一样…故要写小程序，环境必不可少的是将sass转为wxss。 思路 先生成正常的css, 再将css转为wxss格式 将px转为rpx 实现 可用gulp rename工具来将css直接重命名为wxss var rename = require(‘gulp-rename’) …pipe(rename(function (path) { path.extname = “.wxss”; })) 可用gulp-px2rpx实现px单位自动转…