[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名稱