微博组件改版的那些事儿

　　风格词：weibo;年轻;平台;

　　标准色：红、橙

　　品牌规范：

　　辅助图形：

　　辅助图形是品牌识别系统中不可或缺的一部分。简洁的三角形取自标识的方向键。随意组合，最大化了辅助图形的兼容性和拓展性。给应用设计以最大自由。所谓识别优于回想对事物的识别记忆比对事物的回想记忆要强。

　　辅助图形应用示例：

　　更加优雅的代码

　　之前组件的划分是按照代码的形式，分为iframe和js-sdk。由于产品是不断的迭代更新，而第三方网站调用号js-sdk形式的代码是无法获取到产品的更新，这对产品优化带来很多维护问题。同时js-sdk的代码字段一般在表现层面都比较长，这是因为iframe组件是把代码封装成一个包，第三方直接调用即可;而js-sdk的代码则全部是一个层级的;代码过长对于网站的体验是会有相应的影响的

　　基于这样的背景WBML就应运而生了

　　什么是WBML?

　　WBML (Weibo Markup Language) 是通过新浪微博JSSDK创建的一套简单标记语言，它允许用户使用WBML在网页中嵌入微博组件 (Weibo Widgets)，您也可继续使用iframe或js调用方式，目前仍提供支持。

　　简单的说就是一行js代码，引用一行代码(就是把iframe包在里面)

　　为什么使用WBML

　　方便简单的代码部署方式，一行代码即可调用组件

　　标签语义化的参数定制方式，使用起来更加方便。

　　优于iframe加载速度

　　示例

　　以使用最多的分享按钮为例， 目前的调用方式：

1. <script charset="utf-8" type="text/javascript">// <![CDATA[
2. (function(){
4. var _w = 72 , _h = 16;
6. var param = {
8. url:location.href,
10. type:'3',
12. count:'1', /**是否显示分享数，1显示(可选)*/
14. appkey:'', /**您申请的应用appkey,显示分享来源(可选)*/
16. title:'', /**分享的文字内容(可选，默认为所在页面的title)*/
18. pic:'', /**分享图片的路径(可选)*/
20. ralateUid:'', /**关联用户的UID，分享微博会@该用户(可选)*/
22. language:'zh_cn', /**设置语言，zh_cn|zh_tw(可选)*/
24. rnd:new Date().valueOf()
26. }
28. var temp = [];
30. for( var p in param ){
32. temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
34. }
36. document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
38. })()
39. // ]]></script>

使用WBML后，一行代码即可调用：

1. <wb:share-button></wb:share-button>

改变参数，以tag方式传入即可

1. <wb:share-button language="zh_tw"></wb:share-button>

最后，感谢@Eason-Shao 对我的指导，@阿bingben @王史撞Strong @柳明 大师级的设计，@青春的猴小野 @ice木木 牛逼的页面和神级的产品开发们。

文章来源：微博UDC