You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

217 lines
4.6 KiB

<template>
<view class="about">
<view class="content">
<view class="qrcode">
<image src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/app_download.png" @longtap="save"></image>
<text class="tip">扫码体验uni-app</text>
</view>
<view class="desc">
<text class="code">uni-app</text>
是一个使用 <text class="code">Vue.js</text> 开发跨平台应用的前端框架
</view>
<view class="source">
<view class="title">本示例源码获取方式</view>
<view class="source-list">
<view class="source-cell">
<text space="nbsp">1. </text>
<text>下载 HBuilderX新建 uni-app 项目时选择 <text class="code">Hello uni-app</text> 模板</text>
</view>
<view class="source-cell">
<text space="nbsp">2. </text>
<u-link class="link" :href="'https://github.com/dcloudio/hello-uniapp'" :text="'https://github.com/dcloudio/hello-uniapp'"></u-link>
</view>
</view>
</view>
<!-- #ifdef APP-PLUS -->
<button type="primary" @click="share">分享</button>
<!-- #endif -->
</view>
<!-- #ifdef APP-PLUS -->
<view class="version">
当前版本{{version}}
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
providerList: [],
version: ''
}
},
onLoad() {
// #ifdef APP-PLUS
this.version = plus.runtime.version;
uni.getProvider({
service: 'share',
success: (result) => {
const data = [];
for (let i = 0; i < result.provider.length; i++) {
switch (result.provider[i]) {
case 'weixin':
data.push({
name: '分享到微信好友',
id: 'weixin'
});
data.push({
name: '分享到微信朋友圈',
id: 'weixin',
type: 'WXSenceTimeline'
});
break;
case 'qq':
data.push({
name: '分享到QQ',
id: 'qq'
});
break;
default:
break;
}
}
this.providerList = data;
},
fail: (error) => {
console.log('获取分享通道失败' + JSON.stringify(error));
}
});
// #endif
},
methods: {
// #ifdef APP-PLUS
save() {
uni.showActionSheet({
itemList: ['保存图片到相册'],
success: () => {
plus.gallery.save('https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/app_download.png', function() {
uni.showToast({
title: '保存成功',
icon: 'none'
});
}, function() {
uni.showToast({
title: '保存失败,请重试!',
icon: 'none'
});
});
}
});
},
share(e) {
if (this.providerList.length === 0) {
uni.showModal({
title: '当前环境无分享渠道!',
showCancel: false
});
return;
}
let itemList = this.providerList.map(function(value) {
return value.name;
})
uni.showActionSheet({
itemList: itemList,
success: (res) => {
let provider = this.providerList[res.tapIndex].id;
uni.share({
provider: provider,
scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ?
'WXSenceTimeline' : "WXSceneSession",
type: (provider === "qq") ? 1 : 0,
title: '欢迎体验uni-app',
summary: 'uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架',
imageUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b09e38e0-5168-11eb-b680-7980c8a877b8.jpg',
href: "https://m3w.cn/uniapp",
success: (res) => {
console.log("success:" + JSON.stringify(res));
},
fail: (e) => {
uni.showModal({
content: e.errMsg,
showCancel: false
})
}
});
}
})
}
// #endif
}
}
</script>
<style>
page,
view {
display: flex;
}
page {
min-height: 100%;
background-color: #FFFFFF;
}
image {
width: 360rpx;
height: 360rpx;
}
.about {
flex-direction: column;
flex: 1;
}
.content {
flex: 1;
padding: 30rpx;
flex-direction: column;
justify-content: center;
}
.qrcode {
display: flex;
align-items: center;
flex-direction: column;
}
.qrcode .tip {
margin-top: 20rpx;
}
.desc {
margin-top: 30rpx;
display: block;
}
.code {
color: #e96900;
background-color: #f8f8f8;
}
button {
width: 100%;
margin-top: 40rpx;
}
.version {
height: 80rpx;
line-height: 80rpx;
justify-content: center;
color: #ccc;
}
.source {
margin-top: 30rpx;
flex-direction: column;
}
.source-list {
flex-direction: column;
}
.link {
color: #007AFF;
}
</style>