Skip to content

U
uni-starter

wjun2132 / uni-starter
与 Fork 源项目一致

Fork自 DCloud / uni-starter

通知 1
Star 0
Fork 0
U
uni-starter

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 e7d17999 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

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

上级 54f1a9e7
隐藏空白更改
内联 并排
Showing with 194 addition and 179 deletion
App.vue
浏览文件 @ e7d17999
<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
......
changelog.md
浏览文件 @ e7d17999
## 1.1.11（2021-09-24）
优化邀请下载app页（`pages/ucenter/invite`）下载按钮闪烁的问题
## 1.1.10（2021-09-23）
修复获取验证码按钮的文字，在中文模式下显示为英文的问题
## 1.1.9（2021-09-16）
......
package.json
浏览文件 @ e7d17999
{
"id": "uni-starter",
"displayName": "uni-starter",
"version": "1.1.10",
"version": "1.1.11",
"description": "云端一体应用快速开发基本项目模版",
"keywords": [
"login",
......
pages/ucenter/invite/invite.vue
浏览文件 @ e7d17999
<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>
uni-starter.config.js
浏览文件 @ e7d17999
//这是应用的配置页面，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',
}
},
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或