官方文档只有一个监听截屏事件的,而且还不支持app的,看了其他人的帖子等等都没直接找到可以复制的代码,看了看html5+api http://ask.dcloud.net.cn/question/5344和https://ask.dcloud.net.cn/article/35036这两个帖子,写了如下代码,安卓上可以用,就是不知道在ios上可行啊!?分享下喽~
<template>
<view class="content">
<view class="nav-top">1.让朋友的手机扫描下面的二维码即可安装</view>
<view class="main">
<view class="lay1"><view class="line"></view></view>
<view class="lay2">
<view class="qr">
<view class="qr-img">
<image
src="../../static/qr.png"
style="height: 200upx;width: 200upx;"
></image>
</view>
<view class="qr-txt">扫描二维码下载安装包</view>
</view>
</view>
<view class="lay3"><view class="line"></view></view>
</view>
<view class="code-btn">
<view class="line-btn"><view class="btn" @tap="capture()">点击保存至手机相册</view></view>
</view>
</view>
</template>
<script>
export default{
methods: {
capture() {
var pages = getCurrentPages();
var page = pages[pages.length - 1];
console.log('当前页:'+pages.length-1);
var bitmap=null;
var currentWebview = page.$getAppWebview();
bitmap = new plus.nativeObj.Bitmap('amway_img');
// 将webview内容绘制到Bitmap对象中
currentWebview.draw(bitmap,function(){
console.log('截屏绘制图片成功');
bitmap.save( "_doc/a.jpg"
,{}
,function(i){
console.log('保存图片成功:'+JSON.stringify(i));
uni.saveImageToPhotosAlbum({
filePath: i.target,
success: function () {
bitmap.clear(); //销毁Bitmap图片
uni.showToast({
title: '保存图片成功',
mask: false,
duration: 1500
});
}
});
}
,function(e){
console.log('保存图片失败:'+JSON.stringify(e));
});
},function(e){
console.log('截屏绘制图片失败:'+JSON.stringify(e));
});
//currentWebview.append(amway_bit);
}
},
}
</script>
<style>
page {
background-color: #2d355c;
}
.content {
}
.nav-top {
color: #ffffff;
font-size: 35upx;
text-align: center;
margin: 20upx 0;
}
.main {
position: relative;
width: 100%;
margin-top: 50upx;
}
.main .lay1 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 3000;
}
.main .lay1 .line {
height: 100upx;
width: 100%;
border-radius: 50px;
background-color: #e28f0b;
margin-top: 100upx;
}
.lay2 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 4000;
}
.lay2 .qr {
width: 70%;
margin: 0 auto;
height: 700upx;
background-color: #3958ab;
}
.qr-img {
text-align: center;
padding-top: 50%;
}
.qr-txt {
color: #ffffff;
text-align: center;
margin-top: 50upx;
}
.lay3 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 4000;
text-align: center;
}
.lay3 .line {
height: 100upx;
width: 85%;
border-radius: 50px;
background-color: #e28f0b;
margin: 40upx auto;
box-shadow: #cccccc 0px 3px 10px;
}
.code-btn {
width: 100%;
color: #ffffff;
height: 100%;
text-align: center;
}
.line-btn {
position: absolute;
bottom: 200upx;
left: 0upx;
right: 0upx;
width: 100%;
display: flex;
justify-content: center;
}
.btn {
width: 400upx;
padding: 35upx;
background-color: #e28f0b;
border-radius: 50px;
}
.btn:active{
background-color: #FEC607;
}
</style>
3 个评论
要回复文章请先登录或注册
王伟7
1***@qq.com
c***@qq.com