<template>
<view class="uni-container">
<!-- <h2 class="text-separated" style="padding-bottom: 40rpx;">统一发布页管理</h2> -->
<h3 class="text-separated" style="padding: 0 0 20rpx 0;">步骤1:了解“统一发布页”</h3>
<view style="margin-top: 20rpx;">
<view class="text-separated">
<text class="strong">uni-portal </text>
<text>是 uni-app 提供的一套开箱即用的“统一发布页”。</text>
</view>
<view class="text-separated">
<text class="strong">uni-portal </text>
<text>可作为面向用户的统一业务名片,在一个页面集中展现:App下载地址、小程序二维码、H5访问链接等信息。</text>
</view>
<!-- #ifdef H5 -->
<view class="text-separated">
<text style="font-size: 16px;">uni-app 官方示例的发布页就是基于<text class="strong">uni-portal </text> 制作的,<a
href="https://hellouniapp.dcloud.net.cn/portal" target="_blank" class="a-label">点击体验</a>
</text>
</view>
<!-- #endif -->
</view>
<h3 class="text-separated" style="padding: 40rpx 0 20rpx 0;">步骤2:获取“统一发布页”</h3>
<view class="flex text-separated" style="margin-top: 20rpx;">
<text>
<view class="strong">uni-portal </view> 可根据「应用管理」中所填写的应用信息,一键生成发布页:
</text>
<button class="custom-button" size="mini" type="primary" @click="publish"
style="margin: 0;">生成并下载发布页</button>
</view>
<h3 class="text-separated" style="padding: 40rpx 0 20rpx 0;">步骤3:上传“统一发布页”</h3>
<view style="margin-top: 20rpx;">
<view class="text-separated">
<text>
步骤2下载的“统一发布页”,是一个静态HTML页面,你可以直接在本地浏览器中打开访问。
</text>
</view>
<view class="text-separated">
<text>
为了让用户访问到这个“统一发布页”,你需要将该静态HTML文件上传到你的服务器中;推荐使用<a href="https://uniapp.dcloud.io/uniCloud/hosting"
target="_blank" class="a-label" style="padding: 5px;">前端网页托管</a>,因为前端网页托管具备使用更简单、价格更便宜、访问更快等优点。
</text>
</view>
</view>
</view>
</template>
<script>
var download = function(content, filename) {
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
document.body.appendChild(eleLink);
eleLink.click();
document.body.removeChild(eleLink);
};
export default {
data() {
return {
id: ''
}
},
onLoad({
id
}) {
this.id = id
},
methods: {
publish() {
if (!this.id) {
uni.showModal({
content: '页面出错,请返回重进',
showCancel: false,
success(res) {
uni.redirectTo({
url: '/pages/system/app/list'
})
}
})
return
}
this.$request('createPublishHtml', {
id: this.id
}, {
functionName: 'uni-portal',
showModal: false
}).then(res => {
// #ifdef H5
if ('download' in document.createElement('a')) {
download(res.body, 'index.html');
} else {
uni.showToast({
icon: 'error',
title: '浏览器不支持',
duration: 800
})
}
// #endif
}).catch((res) => {
uni.showModal({
content: res.errMsg,
showCancel: false
})
})
}
}
}
</script>
<style lang="scss">
.strong {
padding: 10rpx;
display: inline-block;
color: #c7254e;
}
.a-label {
text-decoration: none;
color: #0366d6;
font-weight: bold;
padding: 10rpx;
}
.text-separated {
line-height: 2em;
color: #2c3e50;
}
.tip {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #f3f5f7;
color: #2c3e50;
padding: 10px;
font-size: 32rpx;
border: {
color: #409EFF;
left-width: 8px;
left-style: solid;
}
text {
margin-right: 15px;
}
.custom-button {
margin-left: 0px;
}
}
</style>
萤火虫001
- 发布:2022-07-23 15:01
- 更新:2022-08-19 17:19
- 阅读:715
产品分类: uniCloud/App
示例代码:
操作步骤:
无异常
无异常
预期结果:
扫码进入下载页面
扫码进入下载页面
实际结果:
扫码直接啥也没有,相当于二维码是个空码
扫码直接啥也没有,相当于二维码是个空码
bug描述:
uni-portal 统一发布插件这个配置好了以后生成的统一发布页面无法扫发布页面的二维码
这个二维码我看是直接在点击下载页面时候生成的。用二维码解析工具解析也无法解析到网址,像是一个空的二维码。
unicloud空间里面我已经配置了自有域名,刚开始以为是自由域名问题,删除以后用官方域名还是不行。
相当于生成的这个发布页面对应的二维码是个空码。
已解决 第一二维码的地址不是直接生成好的地址,而是根据上传到对应的服务器上面的地址计算来的,需要给单页面放到对应绑定的uni-admin的对应地址下面是可以访问的。