# uviewUI

**Repository Path**: last.html/uview-ui

## Basic Information

- **Project Name**: uviewUI
- **Description**: uniapp使用uviewUI，推荐使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-10-25
- **Last Updated**: 2024-10-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 代码帮助 
 * [微信JSSDK引入](https://ask.dcloud.net.cn/article/35380)
 * [uview官方文档](https://v1.uviewui.com/components/intro.html)
 * [三级联动](https://ext.dcloud.net.cn/plugin?id=273)
 * [父子组件传递](https://www.cnblogs.com/J-wym/p/10328927.html)
 * [uni-app下载文件](https://www.frbkw.com/2070/)
 * [备案信息](http://icp.chinaz.com/)
 * [应用上架](http://www.mamicode.com/info-detail-3029451.html)
 * [极光聊天](https://ext.dcloud.net.cn/plugin?id=1684)
 * [弹框插件](https://ext.dcloud.net.cn/plugin?id=249)
 * [MD5加密](https://blog.csdn.net/weixin_42931825/article/details/97800139)
 * [监听webview下载](https://blog.csdn.net/weixin_36185028/article/details/103126680)
 * [父组件控制子组件的方法](https://www.cnblogs.com/mophy/p/8590291.html)
 * [uCharts高性能跨全端图表](https://ext.dcloud.net.cn/plugin?id=271)
 * [uniapp经验](https://www.kancloud.cn/guobaoguo/uniapp/820863)
 * [支付弹框](https://ext.dcloud.net.cn/plugin?id=2591)
 * [vue复制插件](http://wmm66.com/index/article/detail/id/68.html)
 * [阿里云oss跨域配置，img里加 crossOrigin="Anonymous"](https://blog.csdn.net/qq_32440951/article/details/84105238?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param)
 * [大转盘](https://ext.dcloud.net.cn/plugin?id=1762)
 * [uni-app 蓝牙打印功能](https://blog.csdn.net/zhanleibo/article/details/103035645)
 * [富文本编辑器](https://ext.dcloud.net.cn/plugin?id=1672)
 * [canves 手写 签名 画板](https://ext.dcloud.net.cn/plugin?id=3250)
 * [文字滚动](https://ext.dcloud.net.cn/plugin?id=542)
 * [uniapp上传其他类型文件](https://blog.csdn.net/qq_40811733/article/details/108862356)
 * [uniapp和原生微信小程序的异同](https://www.cnblogs.com/xiaozhuangge/p/15385745.html)
 * [uni.getLocation获取定位fail报错问题汇总](https://www.cnblogs.com/1zero1/p/14246676.html)


## 打包h5方法
 * 1、设置mainfest.json中h5节点的publicPath为:'./'
 * 2、打包完毕后找到index.xxxxx.js文件,将uniConfig.router={mode:"hash",base:"/"}修改为uniConfig.router={mode:"hash",base:"./"} 

## 请求延迟

```

	"networkTimeout" : {
        "uploadFile" : 100000000,
        "request" : 100000000
	},

```

## 打包h5配置

```
       "h5" : {
        "title" : "项目名",
		    "domain" : "",
		    "router" : {
		        "mode" : "hash",
		        "base" : "./"
		    },
		    "publicPath" : "./",
		    "optimization" : {
		        "treeShaking" : {
		            "enable" : true
		        }
		    },
		    "uniStatistics" : {
		        "enable" : false
		    },
		    "sdkConfigs" : {
		        "maps" : {}
		    }
        }
```

## 跳转到网页

```
 // #ifdef APP-PLUS
var url ="www.baidu.com"
plus.runtime.openURL( url );
 // #endif
// #ifdef H5 
window.location.href=that.urls
// #endif
```

## 打开app的方法

```
if (plus.os.name == 'Android') {
		//判断是app
		plus.runtime.launchApplication(
		{
			pname: 'com.ss.android.ugc.aweme'	//软件包名，用跳转网页方法也可以打开app
		},
		function(e) {
			console.log('Open system default browser failed: ' + e.message);
		}
		);
	
}else if (plus.os.name == 'iOS') {
	//判断是ios
	plus.runtime.launchApplication(
	{ 
		action:'snssdk1128://aweme'		//网页地址
	}, function(e) {
		console.log('Open system default browser failed: ' + e.message);
	});
	
	}

```

## 富文本图片处理方法

```
<rich-text :nodes="nodes"></rich-text>	
data() {
	return {
		image:""
	}
},
computed:{
	nodes(){
		let node = this.image;
		node =  node.replace(/\<img/g, '<img style="width: 100%"');
		// console.log(node)
		return node;
	}
},
```

## 引入组件

```
<Return></Return>
import Return from "../components/return.vue"
components:{
	Return
},
```

## 过滤器

```
<view>买家姓名：{{lists.name|nulls}}</view>
filters:{
	nulls(data){
		if(data==undefined){ return ""}
	}
}
```

## 顶部状态框高度

```
calc(var(--status-bar-height)
height: var(--status-bar-height);	
padding-top: calc(var(--status-bar-height) + 30rpx);

plus.runtime.versionCode //版本号不带点
plus.runtime.version //版本号带点
min-height: 100vh;//自适应高
```

 ## 文字图标，每个页面公共css
 
```
@import "./static/font/iconfont.css";

@font-face {
  font-family: 'iconfont';  /* project id 1565115 */
  src: url('https://at.alicdn.com/t/font_1565115_098ay32291gb.eot');
  src: url('https://at.alicdn.com/t/font_1565115_098ay32291gb.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_1565115_098ay32291gb.woff2') format('woff2'),
  url('https://at.alicdn.com/t/font_1565115_098ay32291gb.woff') format('woff'),
  url('https://at.alicdn.com/t/font_1565115_098ay32291gb.ttf') format('truetype'),
  url('https://at.alicdn.com/t/font_1565115_098ay32291gb.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont";
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconliwu:before {
  content: "\e65a";
}

```

 ## 本地图片转Base64

```
             urlTobase64(path){
			    // #ifdef APP-PLUS
			    return new Promise((reverse, reject) => {
			     plus.io.resolveLocalFileSystemURL(path, function(entry){
			      entry.file(function(file){
			       var reader = new plus.io.FileReader();
			       reader.onloadend = function (e) {
			        reverse(e.target.result);
			       };
			       reader.readAsDataURL(file);
			      },function(err){
			       reject(err)
			      })
			     })
			    })
			    // #endif
			    // #ifdef H5
			       return new Promise((reverse, reject) => {
			        var image = new Image();
			        image.src = path;
			        image.onload = function() {
			         var canvas = document.createElement("canvas");
			         canvas.width = image.width;
			         canvas.height = image.height;
			         var ctx = canvas.getContext("2d");
			         ctx.drawImage(image, 0, 0, image.width, image.height);
			         var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
			         var dataURL = canvas.toDataURL("image/" + ext);
			         reverse(dataURL);
			        }
			       })
			       // #endif
            }

```

 ## 提取二维码链接

```
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" @click="selectImg"></image>
	</view>
</template>

<script>
	export default {
		methods: {
			// 选择图片
			selectImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const path = res.tempFilePaths[0];
						plus.barcode.scan(path, function(type,result) {
							console.log("扫描成功:("+type+")"+result);
							
							// 判断是否为微信名片
							if((result || '').indexOf('https://u.wechat.com/') != 0) {
								this.msg('请上传微信名片二维码'); 
								return;
							}
							
							// 上传图片
							this.upImg({
								path: path,
							}).then(res => {
								this.info.wxewm = res.data;
								this.msg('上传成功！'); 
							}).catch(err => {
								this.msg('上传二维码失败！'); 
							})

						// 扫描失败（未识别到二维码）
						}, function(e){
							console.log("扫描失败: "+JSON.stringify(e));
						});
					}
				})
			},
			
		}
	}
</script>

```

 ## 上传多张图片

```
    chooseImage() {
    var _this = this
    // 上传图片
    uni.chooseImage({
     count: 6, //默认9
     // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
     sourceType: ['album', 'camera'], //从相册选择
     success: (res) => {
      uni.showLoading({
       title: '加载中...',
       mask:true
      })
      let igmFile = res.tempFilePaths;
      // _this.imageList = igmFile
      this.imageList = this.imageList.concat(igmFile);
      let tempFilePaths = igmFile.map((value, index) => {
       return {
        name: "img" + index,
        uri: value
       }
      })
      uni.uploadFile({
       url: _this.http + 'wode/img',
       method: "POST",
       header: {
        'Token': _this.$http.getToken()
       },
       files: tempFilePaths,
       name: 'mutipartRequest',
       success: (res) => {
        let imgUrls = JSON.parse(res.data); //微信和头条支持
        if(imgUrls.code == 0){
         uni.hideLoading()
         console.log(JSON.parse(res.data).data.path)
         this.sahngchuanimg = this.sahngchuanimg.concat(imgUrls.data.path); //微信
        }else{
         _this.$http.msg(videoUrls.msg)
         uni.hideLoading()
        }
       }
      })
     },
    });
   },

```

 ## 识别二维码

```
        // #ifdef H5
	        import QrCode from 'qrcode-decoder'
	    // #endif

         selectImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {

						uni.showLoading({
							title: '二维码识别中...'
						});
						const path = res.tempFilePaths[0];
						// 判断是否为微信名片

						// #ifdef APP-PLUS
						plus.barcode.scan(path, function(type, result) {
							//扫描成功
							if ((result || '').indexOf('https://u.wechat.com/') != 0) {
								that.$_tishi('请上传微信名片二维码');
								return;
							}
							that.shangchuanImg(path)//上传图片方法
						}, function(e) {
							// 扫描失败（未识别到二维码）
							that.$_tishi("扫描失败")
						});
						// #endif

						// #ifdef H5
						let qr = new QrCode();
						qr.decodeFromImage(path).then(res => {
							if ((res.data || '').indexOf('https://u.wechat.com/') != 0) {
								that.$_tishi('请上传微信名片二维码');
								return;
							}
							that.shangchuanImg(path)//上传图片方法
						});
						// #endif	
						
					}
				})
	}

```

 ## html2canvas网页变海报

```
         <view class="canvas" v-if="!imgsrc" ref="box">
		<image class="canvas" src="/static/my/yaoqing/bg.png" mode="scaleToFill"></image>
		</view>
		<img v-if="imgsrc" @click="baocunimg" class="bg" :src="imgsrc"  crossOrigin="Anonymous"></image>
			                                					
                import html2canvas from 'html2canvas'
	             // 将html转换为图片
				setTimeout(() =>{
					  html2canvas(this.$refs.box.$el, {
					  	scale: 2,
					  	dpi: window.devicePixelRatio * 2,
					  	useCORS: true
					  }).then(canvas => {
					  	this.imgsrc = canvas.toDataURL()
					  });
				},1000);

```

 ## APP协议同意弹框

```
    /* 5+App特有相关 */
   "privacy" : {
            "prompt" : "template",
            "template" : {
                //prompt取值为template时有效，用于配置模板提示框上显示的内容
                "title" : "协议政策",
                "message" : "欢迎使用项目名，在您使用时，需要连接数据网络或者WIFI，产生的流量请咨询当地运营商。我们非常重视您的隐私保护和个人信息保护。在使用App服务前，请认真阅读用户<a  href='http://www.wanyoushiwan.com/yhxy.html'>《服务协议》</a>及<a href='http://www.wanyoushiwan.com/ysxy.html'>《隐私政策》</a>，全部条款。你同意并接受全部条款后开始使用我们的服务<br/>",
                "buttonAccept" : "同意并继续", //继续下一步，进入首页
                "buttonRefuse" : "不同意" //退出下载
            }
     }

```

## 微信sdk使用

```
				import wechat from '@/utils/wechat'; // 引入微信sdk
				Vue.prototype.$wechat = wechat //把vuex定义成全局组件
				
				var sdkData = {
					debug: false,
					appId: e.appId,
					timestamp: e.timestamp,
					nonceStr: e.nonceStr,
					signature: e.signature
				}
				this.$wechat.initJssdk(sdkData)
				this.$wechat.jweixin.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('地址经纬度', res)
					}
				});

```

## 数组图片字符串逗号分割

```
			if (res.dataList.length > 0) {
				res.dataList.map((item, index) => {
					if (item.path) {
						item.path = item.path.split(",")
					}
				})
			}

```

## vue混淆

```
import share from '@/utils/share' //微信小程序分享
Vue.mixin(share)

```

## 小程序分包

```
		"subPackages": [{
			"root": "pages/home",
			"pages": [{
				"path": "home",
				"style": {}
			}]
		}]

```

## 小程序保存base64到相册

```
                        saveAlbum() {
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum();
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum();
								},
								fail: () => {
									uni.showToast({
										title: "请打开保存相册权限，再点击保存相册分享",
										icon: "none",
										duration: 3000
									});
								}
							})
						}
					}
				})

			},
			saveImageToPhotosAlbum() {
				let base64 = that.userData.info.touxiang.replace(/^data:image\/\w+;base64,/, ""); //去掉
				let filePath = wx.env.USER_DATA_PATH + '/haibao.png';
				uni.getFileSystemManager().writeFile({
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						console.log(filePath)
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success: function(res2) {
								uni.showToast({
									title: '保存成功，请从相册选择再分享',
									icon: "none",
									duration: 5000
								})
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						})
					},
					fail: err => {
						console.log(err)
					}
				})
			},

```