### 微擎 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>
```
图示
**颜色选择器**
```
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>
~~~
>>图示
**加载富文本编辑器**
~~~
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>
~~~
>>图示
**表情选择器**
~~~
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>
~~~
>>图示
**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>
~~~
>>图示
选取前
选取时
选取后
**自定义模态对话框**
~~~
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 |
| success |
| error | 
| warning |
~~~
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>
~~~
>>图示
**系统图标选择器**
~~~
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>
~~~
>>图示
**系统链接选择器**
~~~
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>
~~~
>>图示
选取前
选取时
选取后
**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>
~~~
>>单图上传图示(上传时)
>>单图上传图示(上传后)
>>示例 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="上传">
~~~
>>图示
**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'}
~~~
>>图示
**多图上传**
多图上传请使用
~~~
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>
~~~
>>图示(上传时)
>>图示(上传后)
**音频文件选择或上传**
`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' } `已经选中的用户展示方式. |
>>图示
#### 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>
~~~
>>图示
#### 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>
~~~
>>图示
