# muiBase

**Repository Path**: isunsky/muiBase

## Basic Information

- **Project Name**: muiBase
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-05-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# muiBase

```
前端UI框架可参考mui   http://dev.dcloud.net.cn/mui/
调用原生基础功能可参照   http://ask.dcloud.net.cn/docs/

封装类  utils.js
utils.path = "http:///120.78.64.56";   //配置访问服务器地址
utils.ImagePath = "http://119.23.18.28:8778/file/image";   //配置访问图片服务器地址
utils.key = "1234567890!@#$%^78901234";  //配置aes秘钥



	//地址配置路径
	var urls = {
			RegUer: '/User/register.do',
			//      Login: '/user/login.do',
			Login: '/User/login.do',
            }

```
数据通信采用AES加密
引入模块
```
<script type="text/javascript" src="../../js/rollups/aes.js"></script>  
 <script type="text/javascript" src="../../js/components/mode-ecb-min.js"></script> 
```

 **网络请求** 
```
var obj = new Object();
	obj.phone = localStorage.getItem(utils.phoneNum);
	obj.userid = localStorage.getItem(utils.userId);
	utils.ajax(utils.getUrl("FaceAuth"), obj, function(data) {
                //成功回调
		dialog.closeDialog()
		if(data.code == utils.SCUESS) {
			utils.toast(data.msg)
			

		} else {
				utils.toast(data.msg)
		}

	}, function(xhr, type, errorThrown) {
		//失败回调
			utils.toast(errorThrown)
	})


```

 **调用系统拍照** 
 ```
          //拍照方法内部 会调用utils.commpressImg(p, entry.name, callBack); 进行图片压缩
    utils.takePhoto(function(file){
				
		dialog.showDialog();
		console.info(utils.obj2Str(file));
		//上传图片方法			
	         utils.uploadImg(function(imgurl){
                        //imgur  为上传后的图片url地址
						
		},file);
				
	});

```

 **相册选取图片后上传服务器后取得url** 
```
utils.selectImg = function(callBack) {
			plus.gallery.pick(function(p) {
				console.info(p);
				dialog.showDialog();
				var file = new Object();
				file.name = 'fileName';
				file.path = p;
				utils.uploadImg(callBack, file);
			});
		}


  utils.selectImg(function(imgUrl){
		//imgurl就是图片 外网url地址
    });


```



 **图片上传除了可以用混合框架，还集成了在纯H5模式下 通过阿里云OSS文件服务器上传** 
需引入如下js
```
<script src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/lib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="../js/lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="../js/lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="../js/lib/base64.js"></script>
<script type="text/javascript" src="../js/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script type="text/javascript" src="../js/upload.js"></script>

upload.js为配置文件  切换成对应项目主机

accessid= 'LTAItrXkYMActHx3';
accesskey= 'V5hvnbn4SCFYzvHb0nuJJMgHvlfN0s';
host = 'http://chejia.oss-cn-shenzhen.aliyuncs.com/';

绑定时间触发的的buttonid  
回显图片的imageid
utils.webuploadFilse(button, imgName);



```
 **下载文件，一般用于更新apk    只是适用于android  下载后自动安装** 
```
var btnArray = ['是', '否'];
		mui.confirm('发现新版本，是否下载？', '版本更新', btnArray, function(e) {
					if(e.index == 0) {

						downloadFile(result.down_url);
					}
				})





//内部实现机制

		utils.downloadFile=function(url) {
			if(!url) return;
			var dtask = plus.downloader.createDownload(url, {}, function(d, status) {
				if(status == 200) { // 下载成功
					var path = d.filename;
					console.log('下载完成：' + path);
					if(~d.filename.indexOf('.apk')) {
						plus.runtime.install(path); // 安装下载的apk文件
					}
				} else {
					//				$.alert('下载失败：' + status);
					NjsPhoneApi.NotificationUtil.compProgressNotification("农商行", "下载失败");
				}
			});
		
			utils.toast('开始下载，您可以在通知栏中查看下载进度');
			//插件调用
			NjsPhoneApi.NotificationUtil.setNotification("农商行", "正在下载...");
			var current = 0;
			NjsPhoneApi.NotificationUtil.setProgress(current); // 插件调用 0~100
			dtask.start();
			var progress = function() {
				setTimeout(function() {
					var downSize = dtask.downloadedSize; // 已下载大小
					var totalSize = dtask.totalSize;
					if(totalSize != 0) {
						current = parseInt(downSize / totalSize * 100);
						NjsPhoneApi.NotificationUtil.setProgress(current);
						if(current >= 100) {
							NjsPhoneApi.NotificationUtil.compProgressNotification("农商行", "下载完成");
						} else {
							progress();
						}
					}
				}, 500);
			}
			progress();
		}



```



 **
常用方法
** 
```
    utils.obj2Str(obj);//对象转换json串
    utils.isNone (data);//判断是否为空 包括undefined  null  空串
    utils.notNone（data）;//把null  undefine  变成空串
    utils.getTimeWithMounth() //获取2018-01  年月
    utils.toDDMMMYYYY() //获取年月日
    utils.GetQueryString(key) //获取地址参数  ss=132&msg=aaaa
```

 **
列表加载
** 

```
<link href="../css/pullrefresh.css" rel="stylesheet" />
	<script src="../js/utils.js"></script>	
	<script src="../js/vue.min.js"></script>
	<script src="../js/mui.pullToRefresh.js"></script>
	<script src="../js/mui.pullToRefresh.material.js"></script>


(function($) {
				//阻尼系数
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				$.ready(function() {
                                          //根节点id
					pull = $("#content").pullToRefresh({
                                                   //下拉刷新回调
						down: {
							callback: function() {
								var self = this;
								page = 0;
								getData(self);

							}
						},
                                                    //加载更多回调
						up: {
							callback: function() {
								var self = this;
								getData(self);
							}
						}
					});
		
					pull.pullDownLoading();
				});
			})(mui);



			//vue数据绑定
			var allOrderVue = new Vue({
				el: '#list',
				data: {
					items: []
				}
			})




/**
			 * 获取数据
			 */
			function getData(pullRefresh) {
				var obj = new Object();
				obj.page = page
				obj.pageSize = pageSize;
		        obj.token=token
				utils.ajax(utils.getUrl("withdrawFlowList"), obj, function(data) {

					if(data.code == utils.SCUESS) {
						mui.toast("数据加载完毕！")
						var result = JSON.parse(data.data);
						console.log(result)
					
							}
						}
						if(page == 0) {
							//结束上啦刷新
							if(pullRefresh != null)
								pullRefresh.endPullDownToRefresh(true);
							    allOrderVue.items = result;

						} else {

							$(result).each(function(index, val) {
								allOrderVue.items.push(val);
							});
							if(result.length < pageSize) //没有数据了
							{
								mui.toast("没有更多数据了");
								if(pullRefresh != null)
									pullRefresh.endPullUpToRefresh(true); //参数为true代表没有更多数据了。
							} else {
								if(pullRefresh != null)
									pullRefresh.endPullUpToRefresh(false); //refresh completed
							}
						}
						page++;

					} else if(data.code == 3) {
								mui.toast("您登录超时，请重新登录")
								setTimeout(function() {
									mui.openWindow({
										id: 'login',
										url: 'login/login.html'

									});
								}, 1000);
							}
					else {
						if(pullRefresh != null)
							pullRefresh.endPullUpToRefresh(true); //参数为true代表没有更多数据了。
//							mui.toast(data.message)
					}

				}, function(xhr, type, errorThrown) {
					if(pullRefresh != null)
						pullRefresh.endPullDownToRefresh();
					mui.toast(data.message)
					
				})
			}




```



获取定位地址

```

{   "module":"geolocation",
//		    "nation": "中国",
//		    "province": "广州省",   
//		    "city":"深圳市",
//		    "district":"南山区",
//		    "adcode":"440305", //行政区ID，六位数字, 前两位是省，中间是市，后面两位是区，比如深圳市ID为440300
//		    "addr":"深圳大学杜鹃山(白石路北250米)",
//		    "lat":22.530001, //火星坐标(gcj02)，腾讯、Google、高德通用
//		    "lng":113.935364,
//		    "accuracy":13 //误差范围，以米为单位
//		} 


utils.getLocationMessage(function(position){
					alert(utils.obj2Str(position));
				}
				,function(){
					alert("定位失败")
				})


```