uni-app笔记

1.uni-app打开外链

// #ifdef APP-PLUS
  plus.runtime.openURL(item.link);
// #endif
// #ifdef H5
  window.open( item.link )
// #endif
// #ifdef MP-WEIXIN
   uni.navigateTo({
     url:"/pages/home/linkOthers?url=" + encodeURIComponent(info.news_link)
   })
// #endif

微信小程序打开外链

let url = 'https://mp.weixin.qq.com/s/QESLxUHF30Qbq-Fx_qvEHw';
uni.navigateTo({
	url:"/pages/home/linkOthers?url=" + encodeURIComponent(url)
})

linkOthers页面

<template>
	<view>
		<view>
			<!-- url为要跳转外链的地址-->
		    <web-view :src="url">
		    </web-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:""
			}
		},
		onLoad(val) {
			this.url = decodeURIComponent(val.url);
			// 设置当前的title 如果外链中有的话将被覆盖
			if(this.isNotEmpty(val.title)){
				this.setTitle(val.title);
			}
		},
		methods: {
			isNotEmpty(obj) {
				if (typeof obj == undefined || obj == null || obj == "" || obj == "undefined" || obj.length == 0) {
					return false;
				} else {
					return true;
				}
			},
			// 设置title
			setTitle(title) {
				uni.setNavigationBarTitle({
					title: title
				})
			},
		}
	}
</script>

2.附件预览（目前只有QQ浏览器能可以在线预览）

openfjs(item){
	// #ifdef APP-PLUS
		this.itemurl=this.ImgUrl+item.filePath;
		uni.downloadFile({
			url: this.itemurl,
			success: function (res) {
                if(res.statusCode==404){
					uni.showToast({
					    icon:'none',
					 	title:'文件不存在,或已经被移除!'
					})
				}else{
					let filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						showMenu: true,
						success: function (res) {
							console.log('打开文档成功');
						}
					});
				}
			 }
		});
	// #endif
	//#ifndef APP-PLUS
		let browser =this.getBrowserInfo();
		if(browser=='QQ'){
			let filePath= item.filePath
			let index= filePath.lastIndexOf(".");
			//获取后缀
			let ext = filePath.substr(index+1);
			if(ext=='jpg'||ext=='png'||ext=='jpeg'){
				this.isimg=true;
			}else{
				this.isimg=false
			}
			    this.modalName = 'RadioModal'
				this.itemurl=this.ImgUrl+item.filePath;
			}else{
				window.open(item.name,"_blank")
			}
	 //#endif
},

 判断是什么浏览器的方法

getBrowserInfo(){
	var ua = navigator.userAgent.toLocaleLowerCase();
	var browserType=null;
	if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
		 browserType = "IE";
		 browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] 
         : ua.match(/rv:([\d.]+)/)[1];
	} else if (ua.match(/firefox/) != null) {
		 browserType = "火狐";
	}else if (ua.match(/ubrowser/) != null) {
		 browserType = "UC";
	}else if (ua.match(/opera/) != null) {
		 browserType = "欧朋";
	} else if (ua.match(/bidubrowser/) != null) {
		 browserType = "百度";
	}else if (ua.match(/metasr/) != null) {
		 browserType = "搜狗";
	}else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
		 browserType = "QQ";
	}else if (ua.match(/maxthon/) != null) {
		 browserType = "遨游";
	}else if (ua.match(/chrome/) != null) {
		 browserType = "chrome";
	}else if (ua.match(/safari/) != null) {
		 browserType = "Safari";
	}
	return browserType;
},

 完整代码（根据我们项目的需求写的，如有不对，请指教）

<template>
        <view class="neiye animated bounceInRight" :style="{padding:`${0.4 * fontSize}px ${ 0.4 *fontSize}px`}">
                <!-- 右上角图片 -->
                <view class="left_top_img_box" :style="{width:`${3.8 * fontSize}px`,height:`${1.6 * fontSize}px`}">
                        <image src="../../assets/other/top_tu.png" alt="" :style="{width:`${3.8 * fontSize}px`,height:`${1.6 * fontSize}px`}">
                </view>
                <view class="container" :style="{'padding-top':`${ 1 * fontSize }px`}">
								<view class="news_title" :style="{width:`${17 * fontSize}px`,'padding-left':`${0.4 * fontSize}px`,height:`${0.8 * fontSize}px`, 'font-size':`${ 0.32 * fontSize }px`,'line-height':`${ 0.8 * fontSize }px`}">
									{{ info.newsTitle }}
								</view>
								<view class="news_content" :style="{padding:`${ 0.2 * fontSize }px`}">
									<!-- <rich-text :nodes="info.newsContent"></rich-text> -->
									<!-- <u-parse :content="info.newsContent" ></u-parse>   -->
									<div v-html="info.newsContent"  style="width: 50%;"></div>
								</view>
								<view class="fujian" v-if="info.fileArr&&info.fileArr.length>0" :style="{padding:`${0.2 * fontSize}px ${ 0.2 *fontSize}px `}">
									<!-- <view :style="{'font-size':`${ 0.2 * fontSize }px`}">附件：</view> -->
									<view class="fujian_box">
									    <view class="fujiancs" :style="{'font-size':`${ 0.15 * fontSize }px`}" v-for="(item, index) in info.fileArr" :key="index" @click="openfjs( item )">
									    	<view class="fuj_box">
												<image :style="{width:`${0.25 * fontSize}px`,height:`${0.25 * fontSize}px`}" src="../../static/work/pdf.png" v-if="item.fileType=='pdf'"></image>
												<image :style="{width:`${0.25 * fontSize}px`,height:`${0.25 * fontSize}px`}" src="../../static/work/word.png" v-if="item.fileType=='doc'||item.fileType=='docx'"></image>
												<image :style="{width:`${0.25 * fontSize}px`,height:`${0.25* fontSize}px`}" src="../../static/work/xls.png" v-if="item.fileType=='xls'||item.fileType=='xlsx'"></image>
												<image :style="{width:`${0.25 * fontSize}px`,height:`${0.25 * fontSize}px`}" src="../../static/work/png.png" v-if="item.fileType=='png'"></image>
											</view>
											<view class="tittles">{{item.fileName}}</view>
									    </view>
									</view> 
								</view>
                </view>
					<image src="../../assets/other/back.png" :style="{position: 'fixed','z-index': 10000, width:`${0.92 * fontSize}px`, height:`${0.92 * fontSize}px`, right:`${0.2 * fontSize}px`,bottom:`${0.2 * fontSize}px`,  }" mode="" @click="goback"></image>
        <view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal" v-if="itemurl!=''">
        	<view class="cu-dialog" @tap.stop="" :style="{width:`${10* fontSize}px`,height:`${7 * fontSize}px`}">
        		<image :src="itemurl" :style="{width:`${10* fontSize}px`,height:`${7 * fontSize}px`}" v-if="isimg"></image>
        		<iframe :src="itemurl" width="100%" height="100%" border="0" v-else></iframe>
        	</view>
        </view>
		</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
        import DeptName from "../../components/common/DeptName"
        import TimeLine from "../../components/zzsh/TimeLine"
        import ListBox from "../../components/zzsh/ListBox"
		import { $ImgUrl } from "../../config.js"
        export default {
                components: {
                   DeptName,TimeLine, ListBox,uParse,
                },
				onLoad( e ) {
					if (e.cateId && e.cateId != 'undefined' ) {
							this.cateId = e.cateId 
					}
					
					this.newsId = e.newsId
					this.getInfo()
				},
                data() {
                        return {
								info: {},
								cateId: "",
								newsId: "",
								ImgUrl: $ImgUrl,
								modalName: null,
								itemurl:'',
								isimg:false,
                        }
                },
				computed: {
						deptId () {
							return this.$store.getters.deptId
						},
						fontSize () {
							return this.$store.getters.fontSize
						}
				},

                methods: {
					// 获取新闻详情
					async getInfo () {
						let { newsId, cateId  } = this 
						let data
						if (cateId) {
							 data = { newsId: Number(newsId), cateId }
						} else {
							data = { newsId: Number(newsId) }
						}
						
						let res = await this.$axios("/lencon/dp/news/newsDetail", data )
						if ( res.data.code == 1 ) {
							this.info = res.data.obj
							let reg = /\/uploadImgs/g
							let rega = /<a/g
							let regs = /<img/g
							this.info.newsContent = this.info.newsContent.replace( reg, `${this.ImgUrl}/uploadImgs`)
							.replace( rega, "<a href='#' " ).replace( regs, "<img style='max-width:100%'  ") 
						}
					},
					getBrowserInfo(){
					        var ua = navigator.userAgent.toLocaleLowerCase();
					        var browserType=null;
					        if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
					            browserType = "IE";
					            browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
					        } else if (ua.match(/firefox/) != null) {
					            browserType = "火狐";
					        }else if (ua.match(/ubrowser/) != null) {
					            browserType = "UC";
					        }else if (ua.match(/opera/) != null) {
					            browserType = "欧朋";
					        } else if (ua.match(/bidubrowser/) != null) {
					            browserType = "百度";
					        }else if (ua.match(/metasr/) != null) {
					            browserType = "搜狗";
					        }else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
					            browserType = "QQ";
					        }else if (ua.match(/maxthon/) != null) {
					            browserType = "遨游";
					        }else if (ua.match(/chrome/) != null) {
					            browserType = "chrome";
					        }else if (ua.match(/safari/) != null) {
					            browserType = "Safari";
					        }
							return browserType;
					},
					openfjs(item){
						// #ifdef APP-PLUS
						this.itemurl=this.ImgUrl+item.filePath;
						uni.downloadFile({
						  url: this.itemurl,
						  success: function (res) {
						       if(res.statusCode==404){
				                   	uni.showToast({
					                    icon:'none',
					 	                title:'文件不存在,或已经被移除!'
					                 })
				                }else{
					                let filePath = res.tempFilePath;
				                	uni.openDocument({
				                		filePath: filePath,
						                showMenu: true,
					                 	success: function (res) {
							               console.log('打开文档成功');
						                }
					                 });
				                 }
						   }
						});
						// #endif
						//#ifndef APP-PLUS
							let browser =this.getBrowserInfo();
							if(browser=='QQ'){
								let filePath= item.filePath
								let index= filePath.lastIndexOf(".");
								//获取后缀
								let ext = filePath.substr(index+1);
								if(ext=='jpg'||ext=='png'||ext=='jpeg'){
									this.isimg=true;
								}else{
									this.isimg=false
								}
								this.modalName = 'RadioModal'
								this.itemurl=this.ImgUrl+item.filePath;
							}else{
								window.open(item.name,"_blank")
							}
						//#endif
					},
                    showModal(e) {
                    	this.modalName = e.currentTarget.dataset.target
                    },
                    hideModal(e) {
                    	this.modalName = null
                    },  
					   goback () {
					   	uni.navigateBack({
					   		
					   	})
					   },
					   
                }
        }
</script>

<style lang="scss" scoped>
	@import "../../assets/set.scss";
.neiye {
        width: 100vw;
        height: 100vh;
        background: url(../../assets/other/neiye_bg.jpg) 0 0 no-repeat;
        background-size:  100% 100%;
        position: relative;
        left: 0;
        top: 0;
        padding: 0.6rem 0.8rem;
        .left_top_img_box {
			    z-index: 10;
                width: 148rpx;
                height: 62rpx;
                position: absolute;
                left: 0;
                top: 0;
                image {
                    width: 148rpx;
                    height: 62rpx;   
                }
        }
        .container {
                width: 100%;
                height: 100%;
                background: url(../../assets/other/neiye_xq_bg.jpg) 0 0 no-repeat;
                background-size: 100% 100%;
                padding: 30rpx;
				overflow-y: scroll;
				&::-webkit-scrollbar {
					display: none;
				}
				.news_title {
					// width: 630rpx;
					// height: 30rpx;
					// line-height: 100%;
					text-align: center;
					 background: linear-gradient( to right, #d30000 80%, #ffffff);
					//background: linear-gradient( to right, #373BAC 80%, #ffffff);
					color: #FFFFFF;
					// padding-left: 20rpx;
					// font-size: 13rpx;
					margin: 0 auto;
					position: relative;
					left: 0;
					top: 0;
					&::before {
						content: "";
						width: 3px;
						height: 100%;
						background-color: #d30000;
						position: absolute;
						left: -1%;
						top: 0;
					}
				}
				.fujian{
					color: #606060;
					font-weight: bold;
					display: flex;
					align-items: center;
					border-top: 1px solid #d1d1d1;
					// width: 60%;
					.fujian_box{
						// display: flex;
						// flex-wrap: wrap;
						width: 88%;
						.fujiancs{
							padding: 10px;
							border-radius: 4px;
							display: flex;
							.fuj_box{
								text-align: center;
								margin-right: 10px;
							}
							.tittles{
								cursor: pointer;
							}
						}
						.fujiances:hover{
							color: #C90A10;
						}
						.fujiances{
							cursor: pointer;
							border-radius: 4px;
							margin: 10px 10px 10px 0;
							.fuj_box{
								text-align: center;
							}
						}
						.fujiancs:hover{
							color: #C90A10;
						}
					}
				}
				.fujianimg{
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					.img_ingo{
						width: 12%;
						margin: 1% 1%;
						image{
							height: 100%;
							width: 100%;
						}
					}
				}
				.news_content {
					width: 100%;
					display: flex;
					justify-content: center;
					// font-size: 10rpx;
					// margin-top: 30rpx;
				}
        }

        .bottomImg {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 40rpx;
                z-index: 2;
        }
}
</style>

3.组装新数组对象

let jsondata = res.data.data
let keys=Object.keys(jsondata) 
for (let i = 0; i < keys.length; i++) { 
	let savename={};
	let vals = keys[i];
	savename['name'] = vals;
	let valus =jsondata[vals];
	savename['value'] = valus;    
	_this.PieA.series[0].data.push(savename)
} 

4.更换键名

this.LanMu = lanMu.map(function (item) {
	return{
		"newsCateId":item.newsCateId,
		"name":item.newsCateName
	}
})

5.微信小程序跳转公众号配置

1.配置微信公众平台

 2.页面增加代码配置

<!-- #ifdef MP-WEIXIN -->
<official-account></official-account>
<!-- #endif -->

6.判断当前时间是否到达活动时间

if(new Date().getTime() < new Date('2021-02-23 12:20:20').getTime()){
	return uni.showToast({
		icon:'none',
		title:'活动还未开始,暂不能查看排行榜！'
	})
}

7.图片懒加载（插件）

Image组件增强，增强占位、失败图，全端兼容，（兼容H5、APP、小程序） - DCloud 插件市场

8.图片裁剪工具

图片裁剪工具 - DCloud 插件市场

9.js设置下载文件名称

downFile(url, fileName){
	const xhr = new XMLHttpRequest();
	 xhr.open("GET", url, true);
	 xhr.responseType = "blob"; 
	 xhr.onload = () => {
		if (xhr.status === 200) {
			let link = document.createElement("a");
			let body = document.querySelector("body");
			link.href = window.URL.createObjectURL(xhr.response);
			link.download = fileName;
			link.click();
		}
    };
	xhr.send();
},


this.downFile(openurl,val);

10.页面跳转params传参 

uni.navigateTo({
	url:'/pages/a/a',
	success(res) {
		res.eventChannel.emit('change',{name:'张三'})
		console.log(res)
	}
})


//接收页面
onload(){
      const even = this.getOpenerEventChannel()	
		let _this = this
		 even.on('change', function(data) {
		    console.log(data.name)
			_this.idssss = data.name
		  })
		},
}

11.uni-app配置项

1.ios  input框弹起时页面往上挤问题

"style": {
		//手机软键盘升起不让其将页面头部上推
		"app-plus": {
		 "softinputMode": "adjustResize"
	}
}

2.打包后报打包版本不一致 增加 compatible

"app-plus" : {
        "compatible" : {
            "ignoreVersion" : true
        }
}

3.第一次打开时提示app-plus增加

"privacy" : {
            "prompt" : "template",
            "template" : {
                "title" : "温馨提示",
                "message" : "欢迎使用App，在你使用时，需要连接数据网络或者WIFI，产生的流量请咨询当地运营商。非常重视你的隐私保护和个人信息保护。在使用App服务前，请认真阅读<a href='http://lcxzcgl.hnoa.cn/h5/pagesPublic/introduce/introduce?type=1065'>《用户服务协议》</a>及<a href='http://lcxzcgl.hnoa.cn/h5/pagesPublic/introduce/introduce?type=1066'>《隐私政策》</a>，全部条款。你同意并接受全部条款后开始使用我们的服务<br/>",
                "buttonAccept" : "同意并继续", //继续下一步，进入首页
                "buttonRefuse" : "不同意" //退出下载
            }
        },