APP卡片分享助手 - 微信、朋友圈、QQ、微博一键分享
<template>
<div class='page'>
<div class='page__bd'>
<div class='weui-form'>
<div class='weui-form__text-area'>
<h2 class='weui-form__title'>APP卡片分享助手</h2>
<div class='weui-form__desc'>这是一个简单的APP卡片分享小工具,可以让你在微信、朋友圈、QQ、微博。进行卡片式分享。</div>
</div>
<div class='weui-form__control-area'>
<div class='weui-cells__group weui-cells__group_form'>
<div class='weui-cells__title'>填写你的网站信息</div>
<div class='weui-cells'>
<label for='js_input1' class='weui-cell weui-cell_active'>
<div class='weui-cell__hd'><span class='weui-label'>网站url</span></div>
<div class='weui-cell__bd'>
<input id='js_input1' class='weui-input' placeholder='请输入你的网站url' v-model='shareUrl'/>
</div>
</label>
<label for='js_input2' class='weui-cell weui-cell_active'>
<div class='weui-cell__hd'><span class='weui-label'>网站标题</span></div>
<div class='weui-cell__bd'>
<input id='js_input2' class='weui-input' placeholder='请输入你的网站标题' v-model='shareTitle'/>
</div>
</label>
<label for='js_input3' class='weui-cell weui-cell_active'>
<div class='weui-cell__hd'><span class='weui-label'>网站描述</span></div>
<div class='weui-cell__bd'>
<input id='js_input3' class='weui-input' placeholder='请填写你的网站描述' v-model='shareContent'/>
</div>
</label>
<label for='js_input3' class='weui-cell weui-cell_active'>
<div class='weui-cell__hd'><span class='weui-label'>网站略缩图</span></div>
<div class='weui-cell__bd'>
<input id='js_input3' class='weui-input' placeholder='请填写你的网站网站略缩图' v-model='shareImg'/>
</div>
</label>
</div>
</div>
</div>
</div>
<a @click='onShare()' role='button' class='weui-btn weui-btn_default' id='showIOSActionSheet'>分享</a>
</div>
</div>
</div>
</template>
<script>
import appShare, { closeShare } from '@/utils/share.js'
export default {
data() {
return {
shareUrl: 'https://www.fiii.cn',
shareTitle: '小趴菜博客',
shareContent: '小趴菜博客',
shareImg: 'https://www.fiii.cn/logo.png'
}
},
onLoad() {
},
methods: {
onShare(){
let shareData = {
shareUrl: this.shareUrl,
shareTitle: this.shareTitle,
shareContent: this.shareContent,
shareImg: this.shareImg
};
let shareObj = appShare(shareData,res => {
console.log('分享成功回调',res);
// 分享成功后关闭弹窗
// 第一种关闭弹窗的方式
closeShare();
});
setTimeout(() => {
// 第二种关闭弹窗的方式
shareObj.close();
},5000);
},
onShareType(type){
let shareData = {
shareUrl: this.shareUrl,
shareTitle: this.shareTitle,
shareContent: this.shareContent,
shareImg: this.shareImg
}
appShare(shareData,res => {
console.log('分享成功回调',res);
});
}
}
}
</script>
<style>
</style>
原文地址: https://www.cveoy.top/t/topic/n7NQ 著作权归作者所有。请勿转载和采集!