分类
一些积累

小程序自定义tabbar动态更新购物车数量

小程序自定义tabbar动态更新购物车数量,用常规的组件间传值方法似是不可行。实践分两步可行:

每一步,加入购物车成功时定义缓存Storage值,如

let _num = wx.setStorageSync('CART_COUNT', num);
this.setData({cart_count: _num});

组件内初始读取CART_COUNT值并显示;

第二步,加入购物车成功时 通过getTabBar接口动态更新cart_count值:

this.getTabBar().setData({
    cart_count: num,
})

例如整合一个处理函数:

updateCartCount: function (num = 0) {
    wx.setStorageSync('CART_COUNT', num);

    if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
            cart_count: num,
        })
    }
}

完。

分类
一些积累

WordPress 多语言包处理方法

中文版产品转换支持多语言处理方案:

  1. Php里用 _e(),  __()等方法且中文写描述文字相关;js用到的文案用wp_localize_script() 方法统一在php设定对应变量;
  2. 对应__e,__()里的中文补充英文译文;
  3. 运行gulp的gulp-wp-pot模块,将php里所有_e(), __()等写法的字段抽离生成 .pot文件;
  4. 用Poedit将.pot文件生成.po文件,并翻译完整中文语言包文件(xx_ZH_CN.po);
  5. 记事本打开xx_ZH_CN.po 手动将(msgid字段)混合中文的源句子里的中文去掉;同时php里同样将_e(), __()里的中文去掉只保留英文;
  6. 将处理好的.po文件编译.mo文件;
  7. 再次执行步骤3, 生成最终的.pot文件;

如果一开始就是用纯英文写的页面,可用如下方案:

  1. 保证Php里用 _e(),  __()等方法用纯英文写描述文字相关;js用到的文案用wp_localize_script() 方法统一在php设定对应变量;
  2. 运行gulp的gulp-wp-pot模块,将php里所有_e(), __()等写法的字段抽离生成 .pot文件;
  3. 用Poedit将.pot文件生成.po文件,并翻译完整中文语言包文件(xx_ZH_CN.po);
  4. 将处理好的.po文件编译.mo文件;

* 其他语言也是基于.pot文件来生成po文件及mo文件

分类
一些积累

暗黑模式实现方式

通过sass(scss)结合css变量简易实现暗黑显示模式:

  1. Sass引入为包含css变量的参数, 如
    body{ font-color: $bfc; }

    参数:$bfc: var(—wbBfc, #666);
  2. 通过js在外层,如body toggle class “wb-dm”, 来控制暗黑与正常模式的切换;
  3. 那么暗黑下的css变量改变数值即:
    .dm{
    –wbBfc: #ccc;

    }

实践例子参考https://eyes.demo.wbolt.com/

分类
一些积累

position sticky 失效 – 有点另类的写法

一开始在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;
}

另外,需要满足如下条件sticky才能生效:
使用条件:
1、父元素不能overflow:hidden或者overflow:auto;
2、必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

分类
一些积累

不能正常显示svg的解决方案

原本用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=”38″ xmlns=”http://www.w3.org/2000/svg”><g fill=”#C7D5FF” fill-rule=”evenodd”><path d=”M28.804 11.071h9.827a1.321 1.321 0 1 1 .001 2.642h-10.98L21.26 36.525a1.343 1.343 0 0 1-.125.3 1.319 1.319 0 0 1-1.158.668 1.345 1.345 0 0 1-1.159-.67 1.319 1.319 0 0 1-.133-.332L12.3 13.713H1.321a1.321 1.321 0 1 1 0-2.642h9.838L6.792 2.415a1.316 1.316 0 0 1 .6-1.773 1.337 1.337 0 0 1 1.784.591l4.268 8.46 5.351-8.488A1.335 1.335 0 0 1 20.682.7c.19.117.345.278.453.468l5.373 8.523 4.266-8.459a1.337 1.337 0 0 1 1.795-.59 1.316 1.316 0 0 1 .6 1.773l-4.365 8.656zm-8.829-6.756l-4.257 6.756h8.516l-4.259-6.756zm-4.908 9.398l4.91 17.524 4.91-17.524h-9.82z”/><path d=”M18.924 36.983L.269 13.2a1.312 1.312 0 0 1-.078-1.511L6.854 1.124A1.336 1.336 0 0 1 7.984.5h23.985c.458 0 .885.234 1.13.621l6.663 10.568c.296.47.265 1.075-.078 1.511L21.029 36.982a1.339 1.339 0 0 1-2.105.001zM2.945 12.309l17.032 21.71 17.032-21.71-5.778-9.164H8.722l-5.777 9.164z”/></g></svg>[/cc]

需要改成:
[cc lang=”css”]data:image/svg+xml;utf8,<svg%20width%3D”40″%20height%3D”38″%20xmlns%3D”http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg”><g%20fill%3D”%23C7D5FF”%20fill-rule%3D”evenodd”><path%20d%3D”M28.804%2011.071h9.827a1.321%201.321%200%201%201%20.001%202.642h-10.98L21.26%2036.525a1.343%201.343%200%200%201-.125.3%201.319%201.319%200%200%201-1.158.668%201.345%201.345%200%200%201-1.159-.67%201.319%201.319%200%200%201-.133-.332L12.3%2013.713H1.321a1.321%201.321%200%201%201%200-2.642h9.838L6.792%202.415a1.316%201.316%200%200%201%20.6-1.773%201.337%201.337%200%200%201%201.784.591l4.268%208.46%205.351-8.488A1.335%201.335%200%200%201%2020.682.7c.19.117.345.278.453.468l5.373%208.523%204.266-8.459a1.337%201.337%200%200%201%201.795-.59%201.316%201.316%200%200%201%20.6%201.773l-4.365%208.656zm-8.829-6.756l-4.257%206.756h8.516l-4.259-6.756zm-4.908%209.398l4.91%2017.524%204.91-17.524h-9.82z”%2F><path%20d%3D”M18.924%2036.983L.269%2013.2a1.312%201.312%200%200%201-.078-1.511L6.854%201.124A1.336%201.336%200%200%201%207.984.5h23.985c.458%200%20.885.234%201.13.621l6.663%2010.568c.296.47.265%201.075-.078%201.511L21.029%2036.982a1.339%201.339%200%200%201-2.105.001zM2.945%2012.309l17.032%2021.71%2017.032-21.71-5.778-9.164H8.722l-5.777%209.164z”%2F><%2Fg><%2Fsvg>[/cc]

进阶解决方案

国外小伙对于sass处理URL encode写了一个很赞的function, 完美。
[cc lang=”css”]
// Replace letters
@function str-replace($string, $search, $replace: ”) {
$index: str-index($string, $search);

@if $index {
@return str-slice($string, 1, $index – 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}

@return $string;
}

// Encode symbols
@function url-encode($string) {
$map: (
“%”: “%25”,
“<": "%3C", ">“: “%3E”,
” “: “%20”,
“!”: “%21”,
“*”: “%2A”,
“‘”: “%27”,
‘”‘: “%22”,
“(“: “%28”,
“)”: “%29”,
“;”: “%3B”,
“:”: “%3A”,
“@”: “%40”,
“&”: “%26”,
“=”: “%3D”,
“+”: “%2B”,
“$”: “%24”,
“,”: “%2C”,
“/”: “%2F”,
“?”: “%3F”,
“#”: “%23”,
“[“: “%5B”,
“]”: “%5D”
);

$new: $string;

@each $search, $replace in $map {
$new: str-replace($new, $search, $replace);
}

@return $new;
}

// Format the SVG as a URL
@function inline-svg($string) {
@return url(‘data:image/svg+xml,#{url-encode($string)}’);

[/cc]
> github url

再进一步

张鑫旭博文介绍,不用全部标点都转码,只需要将关键的几个转换即可正常显示,部分转码可使文件更小,故优化方案如下,实践可行。

[cc lang=”css”]
// Replace letters
@function str-replace($string, $search, $replace: ”) {
$index: str-index($string, $search);

@if $index {
@return str-slice($string, 1, $index – 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}

@return $string;
}

// Encode symbols
@function url-encode($string) {
$map: (
“%”: “%25”,
“<": "%3C", ">“: “%3E”,
“!”: “%21”,
“*”: “%2A”,
“‘”: “%27”,
‘”‘: “%22”,
“#”: “%23”);

$new: $string;

@each $search, $replace in $map {
$new: str-replace($new, $search, $replace);
}

@return $new;
}

// Format the SVG as a URL
@function inline-svg($string) {
@return url(‘data:image/svg+xml,#{url-encode($string)}’);

[/cc]

分类
一些积累 技术收录

jQuery对SVG用class()方法失效的解决方案

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");
// 代替 .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// 代替 .removeClass("newclass")
element.setAttribute("class", "oldclass");
分类
一些积累

纯CSS实现券的锯齿效果

如图示,这种卡券的锯齿效果,可用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图标,
  • 可在cssdata:image/svg+xml;utf-8,{svg code}引入svg图标
  • 作为组件,
    1. js须有Component构造器 参考 https://blog.csdn.net/u014490083/article/details/81026601,
    2. json
    里边有
    {
    “component”: true}
  • 关于跳转

页面跳转用 js用 navigateTo https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html?search-key=navigateTo

标签用 navigator https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

https://blog.csdn.net/sdlklyg/article/details/79246720

  • Swiper  nav, https://blog.csdn.net/li06359147/article/details/79184587
  • 页面传递参数到组件 http://www.cnblogs.com/wind-wang/p/10050380.html

    在组件设定 properties

    在父页面设定data-{}

  • 表单的placeholder需要用特别的类设定 placeholder-class=”input-placeholder”
  • 自定义导航栏 https://blog.csdn.net/qq_33744228/article/details/83656588
  • Swiper + Scroll-view 会触发一个莫名的最高层级的bug, 例如同级有个一浮动(fixed)的按钮,将会被遮挡,待缓动时间过后才能回复正常。动态给按钮加一个transtion, translate3d 可修正问题,参考运营小程序首页
  • 自带的button标签,会用:after定义有边框
  • 暫不支持css @supports 語法.. https://developers.weixin.qq.com/community/develop/doc/0006661cce0898698077eba9951000?highLine=css
  • 有关帧动画, 小程序不支持循环gif图(只播放一次),而css3 侦动画又不支持css直接读本地图片… 据闻(未验证)canvas可读本地图片,最终运营小程序用的是 cdn图片作为背景图。

 

工具

  1. 参考 https://www.jianshu.com/p/00724ab30c89 为webstorm设定代码高亮支持
分类
一些积累

svg图标处理的在线工具推荐

svg图标处理时,个人会习惯使用如下工具,且都是在线的(正常点的,或者说正版前端应该会用gulp之类吧?)

https://jakearchibald.github.io/svgomg/
爱死这个在线工具了,你可以直接将sketch或ps里边的svg代码,直接复制粘贴到站点,然后就可以生成一个干净的svg文件,且多选项可按需配置。当然你也可以直接将下载好的svg拉到这个在线站点来优化。

https://icomoon.io/app/
早期是用www.iconfont.com管理iconfont的,但…谁用谁知道,反正我很多年没使用了,不知后面是否已优化。而当前推荐的这个站点,管理iconfont棒棒的,当然管理svg也是同样很赞。

 

分类
一些积累

小程序sass转wxss

wxss其实基本就是css, 而已习惯用sass写样式的我们,再一行一行,原始地敲css,是件很奇特的事。就像明知道可以发微信,但还要在邮局发电报一样…故要写小程序,环境必不可少的是将sass转为wxss。

思路

  1. 先生成正常的css, 再将css转为wxss格式
  2. 将px转为rpx

实现

  1. 可用gulp rename工具来将css直接重命名为wxss
    var rename = require('gulp-rename')
    ...pipe(rename(function (path) {
        path.extname = ".wxss";
    }))
  2. 可用gulp-px2rpx实现px单位自动转为rpx
    var px2rpx = require('gulp-px2rpx');
    ...pipe(px2rpx({
        screenWidth: 750, // 设计稿屏幕, 默认750
        wxappScreenWidth: 750, // 微信小程序屏幕, 默认750
        remPrecision: 6 // 小数精度, 默认6
    }))

Done, 就是这么简单…