优化邀请下载app页（）下载按钮闪烁的问题

e3119bfe · DCloud_JSON · study夏羽 · 5b5b56fa · e3119bfe · e3119bfe
5 changed file
--- a/App.vue
+++ b/App.vue
 <script>
 	import initApp from '@/common/appInit.js';
-	import checkIsAgree from '@/pages/uni-agree/utils/uni-agree.js';
+	import openApp from '@/common/openApp.js';
+	import checkIsAgree from '@/pages/uni-agree/utils/uni-agree.js';
 	export default {
 		globalData: {
 			searchText: '',
@@ -9,15 +10,17 @@
 			$i18n: {},
 			$t: {}
 		},
-		setup() {
-		},
 		onLaunch: function() {
 			console.log('App Launch')
 			
 			this.globalData.$i18n = this.$i18n
 			this.globalData.$t = str => this.$t(str)

-			initApp();
+			initApp();
+			
+			// #ifdef H5
+				openApp() //创建在h5端全局悬浮引导用户下载app的功能
+			// #endif
 			// #ifdef APP-PLUS
 			//checkIsAgree(); APP端暂时先用原生默认生成的。目前，自定义方式启动vue界面时，原生层已经请求了部分权限这并不符合国家的法规
 			// #endif

--- a/changelog.md
+++ b/changelog.md
+## 1.1.11（2021-09-24）
+优化邀请下载app页（`pages/ucenter/invite`）下载按钮闪烁的问题
 ## 1.1.10（2021-09-23）
 修复获取验证码按钮的文字，在中文模式下显示为英文的问题
 ## 1.1.9（2021-09-16）

--- a/package.json
+++ b/package.json
 {
 	"id": "uni-starter",
 	"displayName": "uni-starter",
-	"version": "1.1.10",
+	"version": "1.1.11",
 	"description": "云端一体应用快速开发基本项目模版",
 	"keywords": [
 		"login",

--- a/pages/ucenter/invite/invite.vue
+++ b/pages/ucenter/invite/invite.vue
-<template>
-	<view class="about">
-		<view class="box">
-			<image class="logoImg" :src="about.logo"></image>
-			<text class="tip appName">{{about.appName}}</text>
-			<text class="tip">{{about.slogan}}</text>
-			<view @click="download" type="default" id="download">
-				<image v-if="isIos" class="icon" src="@/static/h5/download-app/ios.png" mode="widthFix"></image>
-				<image v-else class="icon" src="@/static/h5/download-app/android.png" mode="widthFix"></image>
-				<text class="download-text">{{$t('invite.download')}}</text>
-			</view>
-			<text class="tip">version {{about.version}}</text>
-		</view>
-		<view class="copyright">
-			<text class="hint">{{about.company}}</text>
-		</view>
-		<view class="mask" v-if="showMask">
-			<image src="../../../static/h5/download-app/openImg.png" mode="widthFix"></image>
-		</view>
-	</view>
-</template>
-<script>
-	export default {
-		computed:{
-			uniStarterConfig(){
-				return getApp().globalData.config
-			}
-		},
-		data() {
-			return {
-				about:{},
-				code:"",
-				isIos:"",
-				showMask:false,
-				downloadUrl:{
-					"ios":"",
-					"android":""
-				}
-			};
-		},
-		created() {
-			this.about = this.uniStarterConfig.about
-			this.downloadUrl = this.uniStarterConfig.download
-			this.year = (new Date).getFullYear()
-			
-			
-			//判断是否在微信中打开
-			var userAgent = navigator.userAgent;
-			
-			var ua = userAgent.toLowerCase();
-			this.isWeixin = ua.indexOf('micromessenger') != -1;
-			if( this.isWeixin ){
-				//执行逻辑
-			}else{
-				//执行逻辑
-			}
-			//判断是否在ios或者安卓打开
-			this.isIos = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
-		},
-		onLoad({code}) {
-			this.code = code||'123456'
-			document.getElementById("openApp").style.display = 'none'
-			document.getElementsByTagName("body")[0].style = ""
-		},
-		methods:{
-			download(){
-				if(this.code){
-					uni.setClipboardData({
-						data:this.code,
-						complete: (e) => {
-							console.log(e);
-							// uni.showToast({
-							// 	title: JSON.stringify(e),
-							// 	icon: 'none'
-							// });
-							uni.hideToast()
-							/* 以下临时解决setClipboardData h5端样式和键盘弹出端错误解决方案，后续会直接内置*/
-							document.getElementById("#clipboard").style.top = '-999px';
-							uni.hideKeyboard()
-							
-						}
-					})
-				}
-				
-				if(this.isIos){
-					window.location.href = this.downloadUrl.ios
-				}else{
-					if(this.isWeixin){
-						//显示浮层
-						this.showMask = true
-					}else{
-						window.location.href = this.downloadUrl.android
-					}
-				}
-			}
-		}
-	}
-</script>
-<style lang="scss">
-.about {
-	width: 750rpx;
-	flex-direction: column;
-}
-.box {
-	margin-top: 100px;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-.logoImg{
-	margin-bottom: 10upx;
-	width:160upx;
-	height:160upx;
-	border-radius: 15px;
-}
-.tip{
-	font-size:24rpx;
-	margin-top: 10px;
-}
-.appName{
-	margin-top: 20px;
-	font-size:42rpx;
-	font-weight: 500;
-}
-.copyright {
-	width: 750upx;
-	font-size:32rpx;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	bottom:20px;
-	left: 0;
-	position: fixed;
-}
-.hint {
-	color:#999999;
-	font-size:26rpx;
-}
-.icon{
-	width: 34rpx;
-}
-#download{
-	background-color: #2A9839;
-	color: #FFFFFF;
-	margin: 55rpx;
-	padding: 5px;
-	width: 200rpx;
-	border-radius: 100px;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-}
-.download-text{
-	font-size: 32rpx;
-}
-.mask{
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 750rpx;
-	height: 100vh;
-	flex-direction: row;
-	justify-content: flex-end;
-	background-color: rgba(0,0,0,0.6);
-}
-.mask image{
-	width: 600rpx;
-}
-</style>
\ No newline at end of file
+<template>
+	<view class="about">
+		<view class="box">
+			<image class="logoImg" :src="about.logo"></image>
+			<text class="tip appName">{{about.appName}}</text>
+			<text class="tip">{{about.slogan}}</text>
+			<view @click="download" id="download">
+				<image v-if="isIos" class="icon" src="@/static/h5/download-app/ios.png" mode="widthFix"></image>
+				<image v-else class="icon" src="@/static/h5/download-app/android.png" mode="widthFix"></image>
+				<text class="download-text">{{$t('invite.download')}}</text>
+			</view>
+			<text class="tip">version {{about.version}}</text>
+		</view>
+		<view class="copyright">
+			<text class="hint">{{about.company}}</text>
+		</view>
+		<view class="mask" v-if="showMask">
+			<image src="../../../static/h5/download-app/openImg.png" mode="widthFix"></image>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		computed: {
+			uniStarterConfig() {
+				return getApp().globalData.config
+			}
+		},
+		data() {
+			return {
+				about: {},
+				code: "",
+				isIos: "",
+				showMask: false,
+				downloadUrl: {
+					"ios": "",
+					"android": ""
+				}
+			};
+		},
+		created() {
+			this.about = this.uniStarterConfig.about
+			this.downloadUrl = this.uniStarterConfig.download
+			this.year = (new Date).getFullYear()
+
+			//判断是否在微信中打开
+			var userAgent = navigator.userAgent;
+			var ua = userAgent.toLowerCase();
+			this.isWeixin = ua.indexOf('micromessenger') != -1;
+			//判断是否在ios或者安卓打开
+			this.isIos = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+		},
+		onLoad({
+			code
+		}) {
+			this.code = code
+			document.getElementById("openApp").style.display = 'none'
+			document.getElementsByTagName("body")[0].style = ""
+		},
+		methods: {
+			download() {
+				if (this.code) {
+					uni.setClipboardData({
+						data: this.code,
+						complete: (e) => {
+							console.log(e);
+							uni.hideToast()
+							/* 以下临时解决setClipboardData h5端样式和键盘弹出端错误解决方案，后续会直接内置*/
+							document.getElementById("#clipboard").style.top = '-999px';
+							uni.hideKeyboard()
+						}
+					})
+				}
+
+				if (this.isIos) {
+					window.location.href = this.downloadUrl.ios
+				} else {
+					if (this.isWeixin) {
+						//显示浮层
+						this.showMask = true
+					} else {
+						window.location.href = this.downloadUrl.android
+					}
+				}
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	/* #ifndef APP-NVUE */
+	view {
+		display: flex;
+		box-sizing: border-box;
+		flex-direction: column;
+	}
+
+	/* #endif */
+	.about {
+		width: 750rpx;
+		flex-direction: column;
+	}
+
+	.box {
+		margin-top: 100px;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.logoImg {
+		margin-bottom: 10upx;
+		width: 160upx;
+		height: 160upx;
+		border-radius: 15px;
+	}
+
+	.tip {
+		font-size: 24rpx;
+		margin-top: 10px;
+	}
+
+	.appName {
+		margin-top: 20px;
+		font-size: 42rpx;
+		font-weight: 500;
+	}
+
+	.copyright {
+		width: 750upx;
+		font-size: 32rpx;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		bottom: 20px;
+		left: 0;
+		position: fixed;
+	}
+
+	.hint {
+		color: #999999;
+		font-size: 26rpx;
+	}
+
+	.icon {
+		width: 34rpx;
+	}
+
+	#download {
+		background-color: #2A9839;
+		color: #FFFFFF;
+		margin: 55rpx;
+		padding: 5px;
+		height: 30px;
+		width: 160rpx;
+		border-radius: 100px;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.download-text {
+		font-size: 32rpx;
+	}
+
+	.mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 750rpx;
+		height: 100vh;
+		flex-direction: row;
+		justify-content: flex-end;
+		background-color: rgba(0, 0, 0, 0.6);
+	}
+
+	.mask image {
+		width: 600rpx;
+	}
+</style>
--- a/uni-starter.config.js
+++ b/uni-starter.config.js
 //这是应用的配置页面，App.vue挂载到getApp().globalData.config
 export default {
 	"h5": {
-		"url": "https://uni-starter.dcloud.net.cn", //	前端网页托管的域名
-		 // 在h5端全局悬浮引导用户下载app的功能 更多自定义要求在/common/openApp.js中修改
-		"openApp": {
+		"url": "https://uni-starter.dcloud.net.cn", //	前端网页托管的域名	
+		 // 在h5端全局悬浮引导用户下载app的功能 更多自定义要求在/common/openApp.js中修改	
+		"openApp": { //如不需要本功能直接移除本节点即可	
 			//点击悬浮下载栏后打开的网页链接
 			"openUrl": '/#/pages/ucenter/invite/invite',
-			//左侧显示的应用名称
+			//左侧显示的应用名称	
 			"appname": 'uni-starter',
-			//应用的图标
+			//应用的图标	
 			"logo": './static/logo.png',
 		}
 	},