devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app笔记_uniapp window.open

作者：笔触狂放9 | 2024-02-15 19:48:40

赞

踩

uniapp window.open

1.uni-app打开外链

  1. // #ifdef APP-PLUS
  2.   plus.runtime.openURL(item.link);
  3. // #endif
  4. // #ifdef H5
  5.   window.open( item.link )
  6. // #endif
  7. // #ifdef MP-WEIXIN
  8.    uni.navigateTo({
  9.      url:"/pages/home/linkOthers?url=" + encodeURIComponent(info.news_link)
  10.    })
  11. // #endif

微信小程序打开外链

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

linkOthers页面

  1. <template>
  2. 	<view>
  3. 		<view>
  4. 			<!-- url为要跳转外链的地址-->
  5. 		    <web-view :src="url">
  6. 		    </web-view>
  7. 		</view>
  8. 	</view>
  9. </template>
  10.  
  11. <script>
  12. 	export default {
  13. 		data() {
  14. 			return {
  15. 				url:""
  16. 			}
  17. 		},
  18. 		onLoad(val) {
  19. 			this.url = decodeURIComponent(val.url);
  20. 			// 设置当前的title 如果外链中有的话将被覆盖
  21. 			if(this.isNotEmpty(val.title)){
  22. 				this.setTitle(val.title);
  23. 			}
  24. 		},
  25. 		methods: {
  26. 			isNotEmpty(obj) {
  27. 				if (typeof obj == undefined || obj == null || obj == "" || obj == "undefined" || obj.length == 0) {
  28. 					return false;
  29. 				} else {
  30. 					return true;
  31. 				}
  32. 			},
  33. 			// 设置title
  34. 			setTitle(title) {
  35. 				uni.setNavigationBarTitle({
  36. 					title: title
  37. 				})
  38. 			},
  39. 		}
  40. 	}
  41. </script>

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

  1. openfjs(item){
  2. 	// #ifdef APP-PLUS
  3. 		this.itemurl=this.ImgUrl+item.filePath;
  4. 		uni.downloadFile({
  5. 			url: this.itemurl,
  6. 			success: function (res) {
  7.                 if(res.statusCode==404){
  8. 					uni.showToast({
  9. 					    icon:'none',
  10. 					 	title:'文件不存在,或已经被移除!'
  11. 					})
  12. 				}else{
  13. 					let filePath = res.tempFilePath;
  14. 					uni.openDocument({
  15. 						filePath: filePath,
  16. 						showMenu: true,
  17. 						success: function (res) {
  18. 							console.log('打开文档成功');
  19. 						}
  20. 					});
  21. 				}
  22. 			 }
  23. 		});
  24. 	// #endif
  25. 	//#ifndef APP-PLUS
  26. 		let browser =this.getBrowserInfo();
  27. 		if(browser=='QQ'){
  28. 			let filePath= item.filePath
  29. 			let index= filePath.lastIndexOf(".");
  30. 			//获取后缀
  31. 			let ext = filePath.substr(index+1);
  32. 			if(ext=='jpg'||ext=='png'||ext=='jpeg'){
  33. 				this.isimg=true;
  34. 			}else{
  35. 				this.isimg=false
  36. 			}
  37. 			    this.modalName = 'RadioModal'
  38. 				this.itemurl=this.ImgUrl+item.filePath;
  39. 			}else{
  40. 				window.open(item.name,"_blank")
  41. 			}
  42. 	 //#endif
  43. },

 判断是什么浏览器的方法

  1. getBrowserInfo(){
  2. 	var ua = navigator.userAgent.toLocaleLowerCase();
  3. 	var browserType=null;
  4. 	if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
  5. 		 browserType = "IE";
  6. 		 browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] 
  7.          : ua.match(/rv:([\d.]+)/)[1];
  8. 	} else if (ua.match(/firefox/) != null) {
  9. 		 browserType = "火狐";
  10. 	}else if (ua.match(/ubrowser/) != null) {
  11. 		 browserType = "UC";
  12. 	}else if (ua.match(/opera/) != null) {
  13. 		 browserType = "欧朋";
  14. 	} else if (ua.match(/bidubrowser/) != null) {
  15. 		 browserType = "百度";
  16. 	}else if (ua.match(/metasr/) != null) {
  17. 		 browserType = "搜狗";
  18. 	}else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
  19. 		 browserType = "QQ";
  20. 	}else if (ua.match(/maxthon/) != null) {
  21. 		 browserType = "遨游";
  22. 	}else if (ua.match(/chrome/) != null) {
  23. 		 browserType = "chrome";
  24. 	}else if (ua.match(/safari/) != null) {
  25. 		 browserType = "Safari";
  26. 	}
  27. 	return browserType;
  28. },

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

  1. <template>
  2.         <view class="neiye animated bounceInRight" :style="{padding:`${0.4 * fontSize}px ${ 0.4 *fontSize}px`}">
  3.                 <!-- 右上角图片 -->
  4.                 <view class="left_top_img_box" :style="{width:`${3.8 * fontSize}px`,height:`${1.6 * fontSize}px`}">
  5.                         <image src="../../assets/other/top_tu.png" alt="" :style="{width:`${3.8 * fontSize}px`,height:`${1.6 * fontSize}px`}">
  6.                 </view>
  7.                 <view class="container" :style="{'padding-top':`${ 1 * fontSize }px`}">
  8. 								<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`}">
  9. 									{{ info.newsTitle }}
  10. 								</view>
  11. 								<view class="news_content" :style="{padding:`${ 0.2 * fontSize }px`}">
  12. 									<!-- <rich-text :nodes="info.newsContent"></rich-text> -->
  13. 									<!-- <u-parse :content="info.newsContent" ></u-parse>   -->
  14. 									<div v-html="info.newsContent"  style="width: 50%;"></div>
  15. 								</view>
  16. 								<view class="fujian" v-if="info.fileArr&&info.fileArr.length>0" :style="{padding:`${0.2 * fontSize}px ${ 0.2 *fontSize}px `}">
  17. 									<!-- <view :style="{'font-size':`${ 0.2 * fontSize }px`}">附件：</view> -->
  18. 									<view class="fujian_box">
  19. 									    <view class="fujiancs" :style="{'font-size':`${ 0.15 * fontSize }px`}" v-for="(item, index) in info.fileArr" :key="index" @click="openfjs( item )">
  20. 									    	<view class="fuj_box">
  21. 												<image :style="{width:`${0.25 * fontSize}px`,height:`${0.25 * fontSize}px`}" src="../../static/work/pdf.png" v-if="item.fileType=='pdf'"></image>
  22. 												<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>
  23. 												<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>
  24. 												<image :style="{width:`${0.25 * fontSize}px`,height:`${0.25 * fontSize}px`}" src="../../static/work/png.png" v-if="item.fileType=='png'"></image>
  25. 											</view>
  26. 											<view class="tittles">{{item.fileName}}</view>
  27. 									    </view>
  28. 									</view> 
  29. 								</view>
  30.                 </view>
  31. 					<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>
  32.         <view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal" v-if="itemurl!=''">
  33.         	<view class="cu-dialog" @tap.stop="" :style="{width:`${10* fontSize}px`,height:`${7 * fontSize}px`}">
  34.         		<image :src="itemurl" :style="{width:`${10* fontSize}px`,height:`${7 * fontSize}px`}" v-if="isimg"></image>
  35.         		<iframe :src="itemurl" width="100%" height="100%" border="0" v-else></iframe>
  36.         	</view>
  37.         </view>
  38. 		</view>
  39. </template>
  40.  
  41. <script>
  42. 	import uParse from '@/components/u-parse/u-parse.vue'
  43.         import DeptName from "../../components/common/DeptName"
  44.         import TimeLine from "../../components/zzsh/TimeLine"
  45.         import ListBox from "../../components/zzsh/ListBox"
  46. 		import { $ImgUrl } from "../../config.js"
  47.         export default {
  48.                 components: {
  49.                    DeptName,TimeLine, ListBox,uParse,
  50.                 },
  51. 				onLoad( e ) {
  52. 					if (e.cateId && e.cateId != 'undefined' ) {
  53. 							this.cateId = e.cateId 
  54. 					}
  55. 					
  56. 					this.newsId = e.newsId
  57. 					this.getInfo()
  58. 				},
  59.                 data() {
  60.                         return {
  61. 								info: {},
  62. 								cateId: "",
  63. 								newsId: "",
  64. 								ImgUrl: $ImgUrl,
  65. 								modalName: null,
  66. 								itemurl:'',
  67. 								isimg:false,
  68.                         }
  69.                 },
  70. 				computed: {
  71. 						deptId () {
  72. 							return this.$store.getters.deptId
  73. 						},
  74. 						fontSize () {
  75. 							return this.$store.getters.fontSize
  76. 						}
  77. 				},
  78.  
  79.                 methods: {
  80. 					// 获取新闻详情
  81. 					async getInfo () {
  82. 						let { newsId, cateId  } = this 
  83. 						let data
  84. 						if (cateId) {
  85. 							 data = { newsId: Number(newsId), cateId }
  86. 						} else {
  87. 							data = { newsId: Number(newsId) }
  88. 						}
  89. 						
  90. 						let res = await this.$axios("/lencon/dp/news/newsDetail", data )
  91. 						if ( res.data.code == 1 ) {
  92. 							this.info = res.data.obj
  93. 							let reg = /\/uploadImgs/g
  94. 							let rega = /<a/g
  95. 							let regs = /<img/g
  96. 							this.info.newsContent = this.info.newsContent.replace( reg, `${this.ImgUrl}/uploadImgs`)
  97. 							.replace( rega, "<a href='#' " ).replace( regs, "<img style='max-width:100%'  ") 
  98. 						}
  99. 					},
  100. 					getBrowserInfo(){
  101. 					        var ua = navigator.userAgent.toLocaleLowerCase();
  102. 					        var browserType=null;
  103. 					        if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
  104. 					            browserType = "IE";
  105. 					            browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
  106. 					        } else if (ua.match(/firefox/) != null) {
  107. 					            browserType = "火狐";
  108. 					        }else if (ua.match(/ubrowser/) != null) {
  109. 					            browserType = "UC";
  110. 					        }else if (ua.match(/opera/) != null) {
  111. 					            browserType = "欧朋";
  112. 					        } else if (ua.match(/bidubrowser/) != null) {
  113. 					            browserType = "百度";
  114. 					        }else if (ua.match(/metasr/) != null) {
  115. 					            browserType = "搜狗";
  116. 					        }else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
  117. 					            browserType = "QQ";
  118. 					        }else if (ua.match(/maxthon/) != null) {
  119. 					            browserType = "遨游";
  120. 					        }else if (ua.match(/chrome/) != null) {
  121. 					            browserType = "chrome";
  122. 					        }else if (ua.match(/safari/) != null) {
  123. 					            browserType = "Safari";
  124. 					        }
  125. 							return browserType;
  126. 					},
  127. 					openfjs(item){
  128. 						// #ifdef APP-PLUS
  129. 						this.itemurl=this.ImgUrl+item.filePath;
  130. 						uni.downloadFile({
  131. 						  url: this.itemurl,
  132. 						  success: function (res) {
  133. 						       if(res.statusCode==404){
  134. 				                   	uni.showToast({
  135. 					                    icon:'none',
  136. 					 	                title:'文件不存在,或已经被移除!'
  137. 					                 })
  138. 				                }else{
  139. 					                let filePath = res.tempFilePath;
  140. 				                	uni.openDocument({
  141. 				                		filePath: filePath,
  142. 						                showMenu: true,
  143. 					                 	success: function (res) {
  144. 							               console.log('打开文档成功');
  145. 						                }
  146. 					                 });
  147. 				                 }
  148. 						   }
  149. 						});
  150. 						// #endif
  151. 						//#ifndef APP-PLUS
  152. 							let browser =this.getBrowserInfo();
  153. 							if(browser=='QQ'){
  154. 								let filePath= item.filePath
  155. 								let index= filePath.lastIndexOf(".");
  156. 								//获取后缀
  157. 								let ext = filePath.substr(index+1);
  158. 								if(ext=='jpg'||ext=='png'||ext=='jpeg'){
  159. 									this.isimg=true;
  160. 								}else{
  161. 									this.isimg=false
  162. 								}
  163. 								this.modalName = 'RadioModal'
  164. 								this.itemurl=this.ImgUrl+item.filePath;
  165. 							}else{
  166. 								window.open(item.name,"_blank")
  167. 							}
  168. 						//#endif
  169. 					},
  170.                     showModal(e) {
  171.                     	this.modalName = e.currentTarget.dataset.target
  172.                     },
  173.                     hideModal(e) {
  174.                     	this.modalName = null
  175.                     },  
  176. 					   goback () {
  177. 					   	uni.navigateBack({
  178. 					   		
  179. 					   	})
  180. 					   },
  181. 					   
  182.                 }
  183.         }
  184. </script>
  185.  
  186. <style lang="scss" scoped>
  187. 	@import "../../assets/set.scss";
  188. .neiye {
  189.         width: 100vw;
  190.         height: 100vh;
  191.         background: url(../../assets/other/neiye_bg.jpg) 0 0 no-repeat;
  192.         background-size:  100% 100%;
  193.         position: relative;
  194.         left: 0;
  195.         top: 0;
  196.         padding: 0.6rem 0.8rem;
  197.         .left_top_img_box {
  198. 			    z-index: 10;
  199.                 width: 148rpx;
  200.                 height: 62rpx;
  201.                 position: absolute;
  202.                 left: 0;
  203.                 top: 0;
  204.                 image {
  205.                     width: 148rpx;
  206.                     height: 62rpx;   
  207.                 }
  208.         }
  209.         .container {
  210.                 width: 100%;
  211.                 height: 100%;
  212.                 background: url(../../assets/other/neiye_xq_bg.jpg) 0 0 no-repeat;
  213.                 background-size: 100% 100%;
  214.                 padding: 30rpx;
  215. 				overflow-y: scroll;
  216. 				&::-webkit-scrollbar {
  217. 					display: none;
  218. 				}
  219. 				.news_title {
  220. 					// width: 630rpx;
  221. 					// height: 30rpx;
  222. 					// line-height: 100%;
  223. 					text-align: center;
  224. 					 background: linear-gradient( to right, #d30000 80%, #ffffff);
  225. 					//background: linear-gradient( to right, #373BAC 80%, #ffffff);
  226. 					color: #FFFFFF;
  227. 					// padding-left: 20rpx;
  228. 					// font-size: 13rpx;
  229. 					margin: 0 auto;
  230. 					position: relative;
  231. 					left: 0;
  232. 					top: 0;
  233. 					&::before {
  234. 						content: "";
  235. 						width: 3px;
  236. 						height: 100%;
  237. 						background-color: #d30000;
  238. 						position: absolute;
  239. 						left: -1%;
  240. 						top: 0;
  241. 					}
  242. 				}
  243. 				.fujian{
  244. 					color: #606060;
  245. 					font-weight: bold;
  246. 					display: flex;
  247. 					align-items: center;
  248. 					border-top: 1px solid #d1d1d1;
  249. 					// width: 60%;
  250. 					.fujian_box{
  251. 						// display: flex;
  252. 						// flex-wrap: wrap;
  253. 						width: 88%;
  254. 						.fujiancs{
  255. 							padding: 10px;
  256. 							border-radius: 4px;
  257. 							display: flex;
  258. 							.fuj_box{
  259. 								text-align: center;
  260. 								margin-right: 10px;
  261. 							}
  262. 							.tittles{
  263. 								cursor: pointer;
  264. 							}
  265. 						}
  266. 						.fujiances:hover{
  267. 							color: #C90A10;
  268. 						}
  269. 						.fujiances{
  270. 							cursor: pointer;
  271. 							border-radius: 4px;
  272. 							margin: 10px 10px 10px 0;
  273. 							.fuj_box{
  274. 								text-align: center;
  275. 							}
  276. 						}
  277. 						.fujiancs:hover{
  278. 							color: #C90A10;
  279. 						}
  280. 					}
  281. 				}
  282. 				.fujianimg{
  283. 					display: flex;
  284. 					flex-wrap: wrap;
  285. 					width: 100%;
  286. 					.img_ingo{
  287. 						width: 12%;
  288. 						margin: 1% 1%;
  289. 						image{
  290. 							height: 100%;
  291. 							width: 100%;
  292. 						}
  293. 					}
  294. 				}
  295. 				.news_content {
  296. 					width: 100%;
  297. 					display: flex;
  298. 					justify-content: center;
  299. 					// font-size: 10rpx;
  300. 					// margin-top: 30rpx;
  301. 				}
  302.         }
  303.  
  304.         .bottomImg {
  305.                 position: absolute;
  306.                 left: 0;
  307.                 bottom: 0;
  308.                 width: 100%;
  309.                 height: 40rpx;
  310.                 z-index: 2;
  311.         }
  312. }
  313. </style>

3.组装新数组对象

  1. let jsondata = res.data.data
  2. let keys=Object.keys(jsondata) 
  3. for (let i = 0; i < keys.length; i++) { 
  4. 	let savename={};
  5. 	let vals = keys[i];
  6. 	savename['name'] = vals;
  7. 	let valus =jsondata[vals];
  8. 	savename['value'] = valus;    
  9. 	_this.PieA.series[0].data.push(savename)
  10. }

4.更换键名

  1. this.LanMu = lanMu.map(function (item) {
  2. 	return{
  3. 		"newsCateId":item.newsCateId,
  4. 		"name":item.newsCateName
  5. 	}
  6. })

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

1.配置微信公众平台

 2.页面增加代码配置

  1. <!-- #ifdef MP-WEIXIN -->
  2. <official-account></official-account>
  3. <!-- #endif -->

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

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

7.图片懒加载（插件）

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

8.图片裁剪工具

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

9.js设置下载文件名称

  1. downFile(url, fileName){
  2. 	const xhr = new XMLHttpRequest();
  3. 	 xhr.open("GET", url, true);
  4. 	 xhr.responseType = "blob"; 
  5. 	 xhr.onload = () => {
  6. 		if (xhr.status === 200) {
  7. 			let link = document.createElement("a");
  8. 			let body = document.querySelector("body");
  9. 			link.href = window.URL.createObjectURL(xhr.response);
  10. 			link.download = fileName;
  11. 			link.click();
  12. 		}
  13.     };
  14. 	xhr.send();
  15. },
  16.  
  17.  
  18. this.downFile(openurl,val);

10.页面跳转params传参 

  1. uni.navigateTo({
  2. 	url:'/pages/a/a',
  3. 	success(res) {
  4. 		res.eventChannel.emit('change',{name:'张三'})
  5. 		console.log(res)
  6. 	}
  7. })
  8.  
  9.  
  10. //接收页面
  11. onload(){
  12.       const even = this.getOpenerEventChannel()	
  13. 		let _this = this
  14. 		 even.on('change', function(data) {
  15. 		    console.log(data.name)
  16. 			_this.idssss = data.name
  17. 		  })
  18. 		},
  19. }

11.uni-app配置项

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

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

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

  1. "app-plus" : {
  2.         "compatible" : {
  3.             "ignoreVersion" : true
  4.         }
  5. }

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

  1. "privacy" : {
  2.             "prompt" : "template",
  3.             "template" : {
  4.                 "title" : "温馨提示",
  5.                 "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/>",
  6.                 "buttonAccept" : "同意并继续", //继续下一步，进入首页
  7.                 "buttonRefuse" : "不同意" //退出下载
  8.             }
  9.         },

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号