JavaScript函數 · WEPHP平臺開發文檔

### 微擎 js 庫 #### 1. util.js **生成資源鏈接** ``` util.tomedia(src); ``` 在 javascript 代碼中, 將微擎資源路徑轉換為鏈接, 你可以傳入 >>參數 | src | 資源絕對路徑 | eg:‘http://pro/attachment/images/181/2014/10/bqUB4xq6a3x14XwGwH4xxacx34G3kv.jpg’ | | … | 微擎系統標準附件路徑 | eg:‘images/181/2014/10/bqUB4xq6a3x14XwGwH4xxacx34G3kv.jpg’ | | … | 模塊中資源相對路徑 | eg: ‘./addons/shopping/images/image1.png’ | | … | 主系統資源相對路徑 | eg: ‘./resource/images/banner-bg.png’ | >>返回值 | string | 微擎系統可識別的資源鏈接 | >>示例 ``` <script type="text/javascript"> require(['jquery', 'util'], function($, util){ $(function(){ // 1\. 資源絕對路徑 // $src = 'http://pro/attachment/images/181/2014/10/bqUB4xq6a3x14XwGwH4xxacx34G3kv.jpg'; // 2\. 微擎系統標準附件路徑 // $src = 'images/181/2014/10/bqUB4xq6a3x14XwGwH4xxacx34G3kv.jpg'; // 3\. 模塊中資源相對路徑 // $src = './addons/shopping/images/image1.png'; // 4\. 主系統資源相對路徑 $src = './resource/images/banner-bg.png'; $('#img').attr('src', util.tomedia($src)); }); }); ``` ``` <img id="img" src="" style="max-width: 80px; max-height: 80px;"> ``` **剪貼板工具** ``` util.clip(elm, str); ``` >>參數 | elm | object | “復制成功”后, 提示信息將出現在此 DOM 對象之后 | | str | string | 要復制到剪貼板的內容。 | >>示例 ``` <script type="text/javascript"> require(['jquery', 'util'], function($, util){ $(function(){ util.clip($('#needCopy')[0], $('#needCopy').text()); }); }); </script> <a id="needCopy" href="javascript:">點擊復制我吧</a> ``` 圖示 ![](https://box.kancloud.cn/2016-04-06_5704bef260f8b.jpg) **顏色選擇器** ``` util.colorpicker( elm, callback); ``` >>參數 | ele | object | dom對象 | | callbck | function | 回調方法的參數: **color** —選擇的HTML顏色代碼`var callback = function(color){ // color: toString(); 十六進制顏色代碼. console.log(color.toString()); } `| **loading 蒙版** ~~~ util.loading(); util.loaded(); ~~~ >>示例 ~~~ <script type="text/javascript"> require(['jquery', 'util'], function($, util){ $(function(){ // 顯示 loading 蒙版 util.loading(); // 1秒后 loading 蒙版自動隱藏 setTimeout(function(){util.loaded();}, 1000); }); }); </script> ~~~ >>圖示 ![](https://box.kancloud.cn/2016-04-06_5704c5404a4da.jpg) **加載富文本編輯器** ~~~ util.editor( elm, callback); ~~~ 參數： domElement：輸入框或文本區域 editor：渲染后的富文本編輯器。 >>參數 | ele | object | 輸入框或文本區域(dom對象) | | callbck | function | 回調方法的參數: var callback = function(ele, edit){ } | >>示例 ~~~ <script> require(['jquery','util'], function($, util){ $(function(){ var editor = util.editor($('#remark')[0]); $('#btn1').click(function(){ alert(editor.getContent()); }); }); }); </script> <form method="post" action="" enctype="multipart/form-data" > <textarea id="remark" name="remark"><p>ab c 12 3 呵<strong>呵</strong><p></textarea> <input id="btn1" type="button" value="點擊顯示 remark 內容"> </form> ~~~ >>圖示 ![](https://box.kancloud.cn/2016-04-06_5704c5405fd7a.jpg) **表情選擇器** ~~~ util.emotion(elm, target, callback); ~~~ >>參數 | ele | object | DOM 對象,此對象點擊后顯示表情選擇器 | | target | object | 表情代碼要插入的表單對象 | | callback | function | 回調函數\ `var callback = function(emotion_code, ele, target){ // emotion_code : 本次選擇的表情代碼 // ele // target }` | >>示例 ~~~ <script> require(['jquery','util'], function($, util){ $(function(){ util.emotion($('#emotion'), $('#reply')); }); }); </script> <form method="post" action="" enctype="multipart/form-data" > <input type="text" name="reply" id="reply"> <a href="javascript:" id="emotion">表情</a> </form> ~~~ >>圖示 ![](https://box.kancloud.cn/2016-04-06_5704c54089abf.jpg) **emoji 表情** ~~~ util.emojiBrowser( callback ); ~~~ >>參數 | callback | function | 回調函數\ `var callback = function( emoji ) { }` | >>示例 ~~~ <script> require(['jquery','util'], function($, util){ $(function(){ $('#btn').click(function(){ util.emojiBrowser(function(emoji){ var title = emoji[0].title; var text = emoji[0].text; var html = emoji.find('div').html(); $('#emoj').html(title+'; '+text+'; '+html); $('#btn').hide(); }); }); }); }); </script> <form method="post" action="" enctype="multipart/form-data" > <label>emoj: </label> <a href="javascript:" id="btn">選取emoji</a> <span id="emoj"></span> </form> ~~~ >>圖示選取前 ![](https://box.kancloud.cn/2016-04-06_5704c540b9e57.jpg) 選取時 ![](https://box.kancloud.cn/2016-04-06_5704c540cc49c.jpg) 選取后 ![](https://box.kancloud.cn/2016-04-06_5704c540daf6b.jpg) **自定義模態對話框** ~~~ util.dialog( title, content, foot, options); ~~~ >>參數 | title | string | 模態對話框頂部顯示的標題; | | content | string | 模態對話框主體顯示的 HTML 內容 | | ::: | array | [ url ], GET 方式提交到指定URL | | ::: | array | [ url, option ] 使用 POST 方式提交到 URL 的參數。 | | foot | string | 模態對話框 footer 位置顯示的內容。 | | options | object | 對話框參數\ `{ 'containerName': 模態對話框Id // 對話框附加參數containerName 默認為 'modal-message',當有多個不同的自定義模態對話框,要設置此項 }` | **模態消息提示框** ~~~ util.message( msg, redirect, type); ~~~ >>參數 | msg | string | 要顯示的消息內容 | | redirect | string | 可選,設置提示信息后要跳轉的地址 | | type | string | 提示類型\ `info：提示 ( 默認 ) success：成功 error：失敗或錯誤, warning：警告 `| >>示例 ~~~ <script> require(['jquery','util'], function($, util){ $(function(){ $('#info').click(function(){ util.message('消息提示: info'); }); $('#success').click(function(){ util.message('消息提示: success','', 'success'); }); $('#error').click(function(){ util.message('消息提示: error','','error'); }); $('#warning').click(function(){ // 添加了跳轉地址. util.message('消息提示: warning','./index.php','warning'); }); }); }); </script> <form method="post" action="" enctype="multipart/form-data" > <a href="javascript:" id="info">info</a> <a href="javascript:" id="success">success</a> <a href="javascript:" id="error">error</a> <a href="javascript:" id="warning">warning</a> </form> ~~~ >>圖示 | info |![](https://box.kancloud.cn/2016-04-06_5704c540f1a25.jpg) | success |![](https://box.kancloud.cn/2016-04-06_5704c541131d5.jpg) | error | ![](https://box.kancloud.cn/2016-04-06_5704c54125c33.jpg) | warning |![](https://box.kancloud.cn/2016-04-06_5704c54138871.jpg) ~~~ util.map( val, callback ); ~~~ >>參數 | val | object | 原始地理位置信息 %%{%% lng: 經度, lat：緯度 %%}%% | | callback | function | 選擇新的地理位置, 并執行自定義操作。\ `var callback = function (newLocation){ var lng = newLocation.lng; // 新地理位置的經度 var lat = newLocation.lat; // 新地理位置的緯度 var label = newLocation.label; // 新地理位置 } `| >>示例 ~~~ <script> require(['jquery','util'], function($, util){ $(function(){ $('#map').click(function(){ util.map({lng: 116.34176,lat: 39.863358}, function(location){ util.message("lng: "+location.lng +";lat: "+location.lat+";label: "+location.label); }); }); }); }); </script> <a href="javascript:" id="map">選取地址</a> ~~~ >>圖示 ![](https://box.kancloud.cn/2016-04-06_5704d0e246370.jpg) **系統圖標選擇器** ~~~ util.iconBrowser( function( selectedIcon ){ }); ~~~ >>參數 >> >>| selectedIcon | string | 選中的系統圖標代碼 | >> >>示例 ~~~ <script> require(['jquery','util'], function($, util){ $(function(){ $('#icon').click(function(){ util.iconBrowser(function(ico){ $('#icon_ipt').val(ico); }); }); }); }); </script> <form method="post" action="" enctype="multipart/form-data" > <label>icon: </label><input type="text" id="icon_ipt" name=""> <a href="javascript:" id="icon">選取icon</a> </form> ~~~ >>圖示 ![](https://box.kancloud.cn/2016-04-06_5704d0e9d990a.jpg) **系統鏈接選擇器** ~~~ util.linkBrowser( callback ); ~~~ >>參數 | callback | function | 回調函數\ `var callback = function(url){ // url 鏈接瀏覽器中選中的系統鏈接 }` | >>示例 ~~~ <script> require(['jquery','util'], function($, util){ $(function(){ $('#btn1').click(function(){ util.linkBrowser(function(url){ $('#link').html(url); $('#btn1').hide(); }); }); }); }); </script> <form method="post" action="" enctype="multipart/form-data" > <label>URL: </label> <a href="javascript:" id="btn1">選取鏈接</a> <span id="link"></span> </form> ~~~ >>圖示選取前 ![](https://box.kancloud.cn/2016-04-06_5704d0e9ebc97.jpg) 選取時 ![](https://box.kancloud.cn/2016-04-06_5704d0ea0a49d.jpg) 選取后 ![](https://box.kancloud.cn/2016-04-06_5704d0ea1a7af.jpg) **Web端圖片上傳** * 填寫外網圖片絕對路徑 * 上傳圖片附件 (tabs: browser) * 瀏覽并選擇已上傳圖片附件 (tabs: upload) * 上傳資源文件到微信服務器 (tabs: remote) * 指定上傳目錄, 最多支持二級. options = {‘dest_dir’: ‘dir1/dir2’ 或 ‘dest_dir’: ‘dir1’} * **app 端 js 僅支持默認路徑上傳.** ~~~ util.image( val, callback, base64options, options); ~~~ >>參數 | val | string | 附件地址的表單值 | | callback | function | 回調函數, 參數為返回的路徑參數\ `array( 'url'=>?, //--------- 附件絕對路徑 'filename'=>?, //---- 附件相對路徑 'media_id' => ? //--- 附件的微信標識 )` | | base64options | string | php數組先序列化后經過base64編碼的字符串,可缺省。參數為返回附件的附件地址和絕對地址 | | options | array | 參數附加信息 \ 參數對象結構為：\ ` { 'width' : 600, //---- 上傳后圖像寬度 'height' : 800, //---- 上傳后圖像高度 'thumb' : true | false, // true 使用縮略，寬高起作用；false 不使用縮略，寬高不起作用。 'global' : false, //-- global = true,則顯示附件下 global 文件夾, 否則顯示當前公眾號下 'tabs' : { // 設置上傳圖片含有的子功能和顯示時激活的選項卡，默認含有 browser, upload。 // tabs 含有哪個屬性就顯示哪個選項卡 // 要么不要設置屬性，要么至少設置一個屬性，屬性值最多一個為active，其余均為空字符串 "" 'browser': 'active', //-- 瀏覽服務器上多媒體， active：表示此選項卡被激活。 'upload' : '',//--------- 上傳本地多媒體 'remote' : '' //--------- 上傳微信多媒體（可選） } 'class_extra' : '' // 縮略圖所在 div 的附件樣式. // 自定義上傳路徑, 僅限示例中的兩種情況. // 例: image/181/we7_store/image/xxxxxx.jpg 'dest_dir': 'we7_store/image' // 例: image/181/we7_store/xxxxxx.jpg // 'dest_dir': 'we7_store' } `| **注意: 開發者使用此方法時需要自己處理圖片上傳的數據.** >>示例 1 (默認) ~~~ <script type="text/javascript"> require(['jquery', 'util'], function($, util){ $(function(){ // 對象綁定點擊事件 $('#singleimage').click(function(){ util.image('',function(data){ $('#listimage').append('<img src="'+data['url']+'" style="max-width: 80px; max-height: 80px;">'); }); }); }); }); </script>  <span id="singleimage" class="btn btn-primary"><i class="fa fa-plus"></i> 上傳圖片</span>  <div id="listimage"></div> ~~~ >>單圖上傳圖示(上傳時) ![](https://box.kancloud.cn/2016-04-06_5704d0ea2edef.jpg) >>單圖上傳圖示(上傳后) ![](https://box.kancloud.cn/2016-04-06_5704d0ea4325f.jpg) >>示例 2 (微信上傳) ~~~ <script type="text/javascript"> require(['jquery', 'util'], function($, util){ $(function(){ $('#btn').click(function(){ util.image('hehe', '', '', {tabs: {'remote':'active'}}); }); }); }); </script> <input id="btn" type="button" class="btn btn-default" value="上傳"> ~~~ >>圖示 ![](https://box.kancloud.cn/2016-04-06_5704d0ea558b5.jpg) **App端圖片上傳** ~~~ util.image( obj, callback); ~~~ >>參數 | obj | string | 目標 DOM 對象 | | callback | function | 回調函數, 參數為返回的路徑參數 | **注意: 開發者使用此方法時需要自己處理圖片上傳的數據.** >>示例 ~~~ {template 'common/header'} <div class="input-group"> <input type="text" name="a" value="$value" class="form-control" autocomplete="off" readonly="readonly"> <span class="input-group-btn"> <button class="btn btn-default" onclick="appupload(this)" type="button">上傳圖片</button> </span> </div> <span class="help-block"> <img style="max-height:100px;" src="$thumb" > </span> <script> window.appupload = window.appupload || function(obj){ require(['jquery', 'util'], function($, u){ u.image(obj, function(src){ $(obj).parent().prev().val(src); $(obj).parent().parent().next().find('img').attr('src',u.tomedia(src)); }); }); } </script> {template 'common/footer'} ~~~ >>圖示 ![](https://box.kancloud.cn/2016-04-06_5704d0ea6f58f.jpg) **多圖上傳** 多圖上傳請使用 ~~~ module.uploadMultiPictures(options, callback ) or module.uploadMultiPictures(callback ) ~~~ | options | object | 可缺省\ `options = { // 自定義上傳路徑 // 例: image/181/we7_store/image/xxxxxx.jpg 'dest_dir': 'we7_store/image' // 例: image/181/we7_store/xxxxxx.jpg // 'dest_dir': 'we7_store' } `| | callback | function | `var callback = function( list ){ // list 為上傳的所有圖像的集合 // list 中的元素結構為 { url: "絕對路徑", filename : "附件相對路徑" } } `| 注意: 開發者使用此方法時需要自己處理圖片上傳的數據. >>示例 ~~~ <script type="text/javascript"> require(['jquery', 'util'], function($, util){ $(function(){ // 對象綁定點擊事件 $('#multiimage').click(function(){ util.uploadMultiPictures( {'dest_dir': 'we7_store/image'},function(list){ // your code here for(var i=0; i<list.length; i++){ $('#listimage').append('<img src="'+list[i]['url']+'" style="max-width: 80px; max-height: 80px;">'); } }); }); }); }); </script>  <span id="multiimage" class="btn btn-primary"><i class="fa fa-plus"></i> 上傳圖片</span>  <div id="listimage"></div> ~~~ >>圖示(上傳時) ![](https://box.kancloud.cn/2016-04-06_5704d0ea877cc.jpg) >>圖示(上傳后) ![](https://box.kancloud.cn/2016-04-06_5704d0eaa79ae.jpg) **音頻文件選擇或上傳** `util.audio( val, callback, base64option, options);` >>參數 | val | string | 附件地址的表單值 | | callback | function | 回調函數, 參數為返回的路徑參數\ `array( 'url' => ?, // 附件絕對路徑 'filename' => ?, // 附件相對路徑 'media_id' => ? // 附件的微信標識 ) `| | base64options | string | php數組先序列化后經過base64編碼的字符串, 用于上傳文件時附帶參數,可缺省。 | | options | object | 參數附加信息 \ 參數對象結構為：\ ` { 'tabs' : { // 設置上傳多媒體含有的功能選項卡，默認含有 browser, upload。 // tabs 含有哪個屬性就顯示哪個選項卡 // 要么不要設置屬性，要么至少設置一個屬性，屬性值最多一個為active，其余均為空字符串 "" 'browser': 'active', //-- 瀏覽服務器上多媒體， active：表示此選項卡被激活。 'upload' : '',//--------- 上傳本地多媒體 'remote' : '' //--------- 上傳微信多媒體（可選） } } `| **用戶選擇** `require(['jquery', 'biz'], function($, biz){ biz.user.browser(uids, callback, options); });` >>參數 | uids | array | 已選中的用戶編號, javascript數組 | | callback | function | `var callback = function($users){ // users：新選中的用戶編號 } `| | options | object | 附加參數，javascript 對象,`{ // visible 顯示出已經選中的用戶, 并標記為選中狀態(默認值) // invisible 隱藏已經選中的用戶 'mode':'visible | invisible' } `已經選中的用戶展示方式. | >>圖示 ![](https://box.kancloud.cn/2016-04-06_5704d0eabb566.jpg) #### 3. district.js ##### 省市縣 select 標簽組成的對象 `district.render(elms, values, options);` >>參數 | elms | object | 要渲染的省市縣 select 集合\ ` { province : 代表省的 select dom對象, city : 代表市的 select dom對象, district : 代表縣的 select dom 對象 }` | | values | object | 省市縣的值\ `{ province : 省, city : 市, district : 縣 } `| | options | object | 配置選項\ `{ withTitle : true | false }withTitle == true\ {{:dev:js:js_district_withtitle.jpg?nolink}} `| >>示例 ~~~ <script type="text/javascript"> require(['jquery', 'district'], function($, d){ $(function(){ d.render( {province: $('#p')[0], city: $('#c')[0], district: $('#d')[0]}, {province: '山西省', city: '太原市', district: '小店區'}, {withTitle: true} ); }); }); </script> <div class="row"> <div class="col-sm-2"> <select id="p" class="form-control "></select> </div> <div class="col-sm-2"> <select id="c" class="form-control"></select> </div> <div class="col-sm-2"> <select id="d" class="form-control"></select> </div> </div> ~~~ >>圖示 ![](https://box.kancloud.cn/2016-04-06_5704d0ead04ea.jpg) #### 4. industry.js ##### 行業二級聯動 ~~~ industry.init(parentid, childid); ~~~ >>參數 | parentid | string | 行業父分類 id | | childid | string | 行業子分類 id | | 行業初始值 | | 直接在行業 select 上添加 value 屬性值 | >>示例 ~~~ <div class="col-sm-4"> <select name="industry_1" id="industry_1" class="form-control" value="{$item['industry1']}"></select> </div> <div class="col-sm-4"> <select name="industry_2" id="industry_2" class="form-control" value="{$item['industry2']}"></select> </div> <script type="text/javascript"> require(['industry'], function(industry){ industry.init('industry_1','industry_2'); }); </script> ~~~ >>圖示 ![](https://box.kancloud.cn/2016-04-06_5704d0eae2697.jpg)