分类
一些积累

小程序自定义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/

分类
技术研究

WBUI 说明文档

基于LayerUI Mobile V2改造。

参数

即核心接口:wbui.open(options) 中的options:

type – 设置弹层的类型
类型:Number
默认:0 (0表示信息框(Dialog),1表示消息提示(Toast),2表示加载层(Loading))

content – 设置弹层内容
类型:String
必选参数

title – 设置弹层标题
类型:String或Array
默认:空,值可以为字符串或者数组。,为空则不显示

title: ‘标题’
//或者
title: [‘标题’, ‘class-name’] //第二个参数是自定义标题样式对应的类名

time – 控制自动关闭层所需秒数
类型:Number
默认不开启,支持整数和浮点数,对于Toast初始值设定为2秒

style – 自定义层的样式
类型:String
用法如

wbui.open({
style: 'border:none; background-color:#78BA32; color:#fff;',
content:'内容'
})

运行

skin – 设定弹层显示风格
类型:String
msg(普通提示), 建议用快捷方式wbui.toast()

className – 自定义一个css类
类型:String

用于自定义样式。如
wbui.open({
className: ‘popuo-login’, //这样你就可以在css里面控制该弹层的风格了
content:’内容’
})

btn – 按钮
类型:String/Array
不设置则不显示按钮。如果只需要一个按钮,则btn: ‘按钮’,如果有两个,则:btn: [‘按钮一’, ‘按钮二’]。
点击即关闭弹窗。

anim – 动画类型
类型:String/Boolean
可支持的支持动画配置:scale(默认)、up(从下往上弹出),如果不开启动画,设置false即可

mask – 控制遮罩展现
类型:String/Boolean
默认:true,该参数可允许你是否显示遮罩,并且定义遮罩风格

mask: false //不显示遮罩
或者
mask: ‘background-color: rgba(0,0,0,.3)’ //自定义遮罩的透明度

maskClose
类型:Boolean
默认:true,是否点击遮罩时关闭层

fixed – 是否固定层的位置
类型:Boolean
默认:true

top – 控制层的纵坐标
类型:Number
默认:无,一般情况下不需要设置,因为层会始终垂直水平居中,只有当fixed: false时top才有效。

success – 层成功弹出层的回调
类型:Function
该回调参数返回一个参数为当前层元素对象
success: function(elem){
console.log(elem);
}

yes
类型:Function
点确定按钮触发的回调函数,返回一个参数为当前层的索引

yes: function(index){
alert(‘点击了是’)
}

no
类型:Function
点取消按钮触发的回调函数

end
类型:Function
层彻底销毁后的回调函数

其它内置方法/属性

wbui.v
返回当前使用的wbui mobile版本号

wbui.close(index)
用于关闭特定层,index为该特定层的索引

wbui.closeAll()
关闭页面所有wbui的层

常用快捷调用

wbui.alert() 快捷弹窗提示

wbui.alert('弹窗内容');

//加关闭时回调
wbui.alert(‘弹窗内容’,function(index){
//回调输出
});

//其他特别配置方式
wbui.alert(‘弹窗内容’,{
btn:’ok‘,
mask:0,

});

wbui.confirm() 对话框

//确认时回调
wbui.confirm(‘弹窗内容’,function(index){
//确认回调
},function(index){
//取消回调
});

//其他特别配置方式
wbui.confirm(‘弹窗内容’,{
btn:[‘确认‘,’取消’],
yes:function(index){ //确认回调 }
no:function(index){ //取消回调 }

});

wbui.toast()消息弹窗

wbui.toast('弹出消息内容');

//设定其他参数,例如关闭时间
wbui.toast(‘弹出消息内容’,{
time:5
});

wbui.loading()调用方式

var wbloading = wbui.loading();
wbui.close(wbloading); //注销

分类
WordPress笔记

wordpress 如何为js加async或defer

WordPress 4.1版本开始引入了一个新的filter,最终提供了一种简单的方法来添加异步/延迟属性。
apply_filters('script_loader_tag', string $tag, string $handle, string $src);

具体用法:
function add_async_attribute($tag, $handle) {
if ( 'my-js-handle' !== $handle )
return $tag;
return str_replace( ' src', ' async="async" src', $tag );
}

add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

同理若需设置defer, 将async=”async”改成defer=”defer”即可。

分类
WordPress笔记

wpautop() 控制文章内容是否自动换行

WordPress默认方法输出内容时,会为编辑器内换行的内容自动加上<p>标签。

如果想去掉这个功能,可使用

remove_filter( 'the_content', 'wpautop' );

而有时,例如用了$post->post_content会使这个功能失效,若想还原,可这样写

$content = $post->post_content;
$content = wpautop( $content );

同理可处理摘要the_excerpt()及评论内容comment_text().

分类
一些积累

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]

分类
Wordpress技术点收录

作者信息 wordpress函数the_author_meta()

用法:

1
<?php the_author_meta( $field, $userID ); ?>

参数说明:

1、$field(字符串)将要显示的用户信息的字段名称(这些在数据库中都可以找到)。以下是常用的:

user_login(用户登录名)

user_pass(用户登录密码)

user_nicename(用户昵称)

user_email(用户邮箱地址)

user_url(用户网站地址)

user_registered(用户注册时间)

user_status(用户状态)

display_name(作者显示的名称)

nickname(作者昵称)

first_name(作者名字)

last_name(作者姓氏)

description(作者描述)

user_level(用户等级)

user_firstname(用户名字)

user_lastname(用户姓氏)

user_description(用户描述)

2、ID(用户ID值)

实例:

1
2
3
4
<?php  echo the_author_meta( 'user_email' ); ?>
//获取作者的邮箱地址
<?php  echo the_author_meta( 'user_nicename' ); ?>
//获取作者的昵称

提醒:如果该函数在文章主循环(Loop)中,则不必指定作者的ID值,标签所显示的就是当前文章作者的内容。如果在主循环(Loop)外,则需要指定用户ID值。如果需要获取用户信息但是不想显示出来(比如用在php方法中),请使用get_the_author_meta()方法。

分类
一些积累 技术收录

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");