WordPress使用wp_localize_script 从PHP传递参数给JavaScript方法

WordPresswp_localize_script 函数从它名字可以看出它是用来进行前端本地化的,它的工作方式是加载翻译之后的文本,接着将它们当做一个 JavaScript 对象输出到 HTML 中,然后 JS 脚本就用该对象去输出对应语言的文本了。

使用 wp_localize_script 从 PHP 传递参数给 JavaScript

但是我们使用 wp_localize_script 过程中,反而主要用来从 PHP 传递参数给 JavaScript,下面我通过微信机器人插件来讲讲如何使用该函数从 PHP 传递参数给 JavaScript。

微信公众平台在用户分享的时候可以让用自定义标题,摘要,图片和链接,我们需要把标题,摘要,图片和链接这些参数从 PHP 传递给 JavaScript,

首先使用 wp_enqueue_script 函数加载微信 JSSDK 的 jweixin.js 和我们自己写的 weixin.js:

 wp_enqueue_script('jweixin', 'http://res.wx.qq.com/open/js/jweixin-1.0.0.js', array('jquery') ); wp_enqueue_script('weixin', WEIXIN_ROBOT_PLUGIN_URL.'/template/static/weixin.js', array('jweixin', 'jquery') ); 

然后我们可以把需要自定义的标题,摘要,图片和链接作为一个数组,

 $weixin_data = array(  'img' => $img,  'link' => $link,  'title' => $title,  'desc' => $desc, ); 

最后使用 wp_localize_script 将该变量传递给 JavaScript:

 wp_localize_script('weixin', 'weixin_data', $weixin_data); 

wp_localize_script 函数一共有三个参数:

  • 第一个是:$handle,需把数据附加到脚本的 handle。
  • 第二个是:$object_name,生成 JavaScript 对象名。
  • 第三个是:$data,数据,可以文本,可以二位或者多维数组,会使用 json_encode 函数生成 JavaScript 的对象或者数据。

然后可以看到输出的结果:

 <script type='text/javascript'> /* <![CDATA[ */ var weixin_data = {"img":"http:////77flz7.com1.z0.glb.clouddn.com//wpjam//banner//wp-dkblue-blue-640x960.png?imageView2//1//w//120//h//120","link":"http:////blog.wpjam.com//article//wordpress-cache-plugins//?debug","title":"WordPress /u5404/u79cd/u7f13/u5b58/u63d2/u4ef6/b/u4ecb/u7ecd/u548c/u5e94/u7528","desc":"WordPress /u7f13/u5b58/u63d2/u4ef6/u7efc/u8ff0/uff0cWordPress /u7f13/u5b58/u63d2/u4ef6/u6709/u5f88/u591a/u79cd/uff0c/u6709/u6587/u4ef6/u7f13/u5b58/uff0c/u5185/u5b58/u7f13/u5b58/uff0cHTML /u9759/u6001/u7f13/u5b58/u3002/u4f60/u9700/u8981/u6839/u636e/u81ea/u5df1/u7684/u670d/u52a1/u5668/u7684/u7279/u70b9/u7ed9/u81ea/u5df1/u7684 WordPress /u535a/u5ba2/u9009/u62e9/u76f8/u5e94/u7684/u7f13/u5b58/u63d2/u4ef6/u3002","refresh_url":"","post_id":"1406"}; /* ]]> */ </script> 

这样就可以在 weixin.js 中使用 weixin_data 了。

将 wp_localize_script 从 PHP 传递给 JavaScript 的参数不编码成 unicode

但是从上面可以看到中文都编码成 unicode,虽然使用上没有什么问题,但是看起来总是不爽,有什么办法呢?

wp_localize_script 在最后 $data 参数中提供了一个叫做 l10n_print_after 的 key,它可以无任何干扰直接输出值,我们把 $data 参数,使用 json_encode 函数不编码成 unicode 方式放入 l10n_print_after 的 key 中,最后再传递给 wp_localize_script 即可:

 $weixin_data = array(  'l10n_print_after' => 'weixin_data = ' . json_encode($weixin_data, JSON_UNESCAPED_UNICODE) );  wp_localize_script( $handle, $object_name, $weixin_data ); 

最后输出的结果是:

 <script type='text/javascript'> /* <![CDATA[ */ var weixin_data = []; weixin_data = {"img":"http:////77flz7.com1.z0.glb.clouddn.com//wpjam//banner//wp-dkblue-blue-640x960.png?imageView2//1//w//120//h//120","link":"http:////blog.wpjam.com//article//wordpress-cache-plugins//?debug=2","title":"WordPress 各种缓存插件介绍和应用","desc":"WordPress 缓存插件综述,WordPress 缓存插件有很多种,有文件缓存,内存缓存,HTML 静态缓存。你需要根据自己的服务器的特点给自己的 WordPress 博客选择相应的缓存插件。"};; /* ]]> */ </script> 

看起来是不是清爽多了?

文章转自我爱水煮鱼博客

WordPress使用wp_localize_script 从PHP传递参数给JavaScript方法:等您坐沙发呢!

发表评论

表情
还能输入210个字