[TOC] # 服务器XML标签用法 ## 常用CDN标签 所有的CDN都托管在七牛云存储和又拍云,使用此服务可以加快客户端的响应时间,降低服务器压力 * * * * * ###JSCDN ####使用方法 `<wx:jsscn name="" version="" />` * `name` {必须} 需要引入的js版本库,多个请用逗号分隔,如`name="jquery,seajs"` * `version` {可选} 引入的版本号,如果引入多个,需要和name保持数量一致,如果需要使用默认值,请使用`default`关键字,如 `version="1.1.1,2.0.1"`; ####使用例子 #####例1: 引入 jquery ,bootstrap , zepto ```html <!--引用jscdn库,无版本限制--> <wx:jscdn name="jquery,bootstrap,zepto" /> <!--效果--> <!--jscdn:[jquery,bootstrap,zepto];--> <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script> <script src="http://cdn.staticfile.org/zepto/1.1.4/zepto.min.js"></script> ``` #####例2: 引入 jquery1.11.1 ,bootstrap2.1.1 , zepto default ```html <!--引用jscdn库,无版本限制--> <wx:jscdn name="jquery,bootstrap,zepto" version="1.11.1,2.1.1,default"/> <!--效果--> <!--jscdn:[jquery,bootstrap,zepto];--> <script src="http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.staticfile.org/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script> <script src="http://cdn.staticfile.org/zepto/1.1.4/zepto.min.js"></script> ``` ####当前可用库列表 ```javascript ["jquery","jqueryui","modernizr","angular","underscore","backbone","zepto","seajs","ember","sematic","require","bootstrap","swiper","swiper.jquery","gsap","jquery.gsap","jquery","fastclick","hammer","pixi","laytpl"] ``` ###CSSCDN ####使用方法 `<wx:csscdn name="" version="" />` * `name` {必须} 需要引入的js版本库,多个请用逗号分隔,如`name="bootstrap,animate"` * `version` {可选} 引入的版本号,如果引入多个,需要和name保持数量一致,如果需要使用默认值,请使用`default`关键字,如 `version="1.1.1,2.0.1"`; ####应用例子 #####引入最新版本的bootstrap和animate **例1: 引入 bootstrap ,animate** ```html <!--引用jscdn库,无版本限制--> <wx:csscdn name="bootstrap,animate" /> <!--效果--> <!--csscdn:[bootstrap,animate];--> <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.4.0/animate.css"> ``` **例2: 引入 bootstrap3.2.1 , animate.default** #####引入的bootstrap3.1.1和最新版本的animate ```html <!--引用jscdn库,无版本限制--> <wx:csscdn name="bootstrap,animate" version="3.1.1,default"/> <!--效果--> <!--csscdn:[bootstrap,animate];--> <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.4.0/animate.css"> ``` ####当前可用库列表 ```javascript ["bootstrap","animate","semantic","normalize","swiper"] ``` ### 常用组件 组件式包含css和javascript的一组包,可以使用 ```html <wx:module name="sui,swiper,layer" /> ``` * `name` {必须} 需要引入的js版本库,多个请用逗号分隔,如`name="swiper,layer"` 只需上面的代码就可以一起引入js和css,非常方便,然后在页面中就可以使用 ```html <script> layer.open({title:'hello',content:'world'}) </script> ``` ***** ## 微信JSSDK 相关标签 ### 配置jssdk 关于jssdk的描述参见 `[微信JS-SDK说明文档](http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html)` > 如果要使用jssdk里面的一些接口,必须在api中申明 使用方法: `<wx:config wechat="Duogu" api="onMenuShareTimeline,onMenuShareAppMessage"/> 参数解释: * `[wechat]` 可选.使用的账号,如果不输入则默认为`多谷数据账号` * `api` 必填.需要使用的接口列表 全部接口列表请见 [JS接口列表](http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.99.84.E5.BD.952-.E6.89.80.E6.9C.89JS.E6.8E.A5.E5.8F.A3.E5.88.97.E8.A1.A8) * `[debug]` 可选,值[1,true,false,0] `debug: true`, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 ### 使用分享功能 分享接口的详细描述见 [分享接口](http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E5.88.86.E4.BA.AB.E6.8E.A5.E5.8F.A3) > 使用不同的接口需要在配置的jssdk中申明 api,如朋友圈分享 `onMenuShareTimeline`,消息分享 `onMenuShareAppMessage` 使用方法 `<wx:share title="分享标题" desc="发送给朋友的时候的描述内容" link="分享链接" imgUrl="图片" />` 参数说明 * title,分享标题 * [desc],可选,分享描述 * link,分享链接 * imgUrl,分享图标 * [type],可选,分享类型,music、video或link，不填默认为link * [dataUrl], 可选,如果type是music或video，则要提供数据链接，默认为空 ### 使用OAUTH获取用户信息 [微信文档地址](http://mp.weixin.qq.com/wiki/14/bb5031008f1494a59c6f71fa0f319c66.html) 使用方法 <wx:oauth wechat="Duogu" type="userinfo"/> 参数说明 * `[wechat]` 可选,使用的微信账号,默认为多谷数据 * `type` [userinfo|base|oauthtest] 获取的微信账号类型 * `userinfo` 获取全部资料 * `base` 获取openid * `oauthtest` 获取测试数据,这个可以在电脑上打开进行测试 可以在页面中使用如下js获取用户 ```javascript var user = Wechat.getUser(); //可以得到以下数据 user = { "openid": "abcdefghijklmnopqrstuvwxyzuy",//openid "nickname": "测试账号?",//账号名称 "sex": 1,//性别 "language": "zh_CN",//语言 "city": "广州",//城市 "province": "广东",//省份 "country": "中国",//国家 "headimgurl": "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",//头像 "subscribe_time": 1382694957,//关注时间 "groupid": 0,//分组 "_k": "cb8cdd4f847f51bbece3812da37bf05d", //openid加密key "_wechat": "duogu",//账号 "_snip": "oauthtest"//授权类型 } ``` ### 生成自定义的验证码 有些场景可能需要验证码,如图  这种二维码可以通过快捷标签生成 使用方法 ```html <!-- 生成一个长度为200 高度为80 全部为数字的验证码图形 --> <wx:verify width="200" height="80" code="number" /> ``` 参数说明 * width, 图片宽度 * height,图片高度 * [code],字符集 [number all lower upper zh] ### 调用快捷的loading动画 使用方法 ```html <wx:loading text="加载中.." class="myloading" type="1"> <!--这里可以是自定义的一些文本--> </wx:loading> ``` 参数说明 * text, loading的文本 * type, loading的类型,为数字,我们库中包含的loading动画 * class loading层的class名称