这篇文章次要是讲述自定义分享组件的方放，兼容网页 H5 端、微信小程序端和 App 端。目录筹备工作原理剖析组件实现H5 和 App小程序案例展现筹备工作首先咱们从图标图库网站下面找一些罕用的分享图标并下载下来；在components新建一个q-share文件夹，并新建一个q-share.vue的组件；依照前一篇所说的页面构造，编写好预约的分享页面；原理剖析自定义分享组件就是采纳各端反对的 API 办法进行封装设置，利用条件编译的语法进行分而实现。
H5 端剖析H5 端次要有两种分享办法：
一般浏览器自带分享按钮；微信内嵌浏览器，可调用js-sdk进行分享；第三方平台网页利用：在第三方分享平台申请增加本人的利用，以便调用第三方的分享 API 进行分享；网上公共分享链接：这里就应用网上公开的分享地址进行分享了。以下列举了几个罕用的第三方分享平台的地址，感兴趣的能够珍藏看一下。
罕用开放平台：
QQ 互联平台微信开放平台微博开放平台支付宝开放平台百度开放平台抖音开放平台小程序端剖析小程序端的分享目前 uniapp 不反对 API 调用，只能用户被动点击触发分享，可应用自定义按钮形式<button open-type="share">或监听系统右上角的分享按钮onShareAppMessage 进行自定义分享内容。
在这里能够查看微信小程序的分享 API进行小程序分享性能开发。
小程序文档：
微信小程序支付宝小程序百度智能小程序APP 端剖析APP 端的分享能够自主管制分享的内容、模式及平台，提供了以下两种办法：
应用uni.shareAPI 形式调用社交 sdk 分享；应用plus.share.sendWithSystem呼起手机零碎的分享菜单；开发者官网：
安卓开发者官网苹果开发者官网快利用官网：
华为快利用小米快利用OPPO 快利用vivo 快利用组件实现筹备工作和原理剖析实现后，接下来写一个简略的自定义分享组件。
模板局部<view class="q-share" v-if="shares.show"> <view :class="{'q-share-mak': true, 'active': shares.showMask}" @click="close('mask')"></view> <view :class="{'q-share-inner': true, [shares.options.dir]: true, 'active': shares.showBox}" :style="{'width': `${['left', 'right'].includes(shares.options.dir) ? shares.options.width + 'rpx' : '100%'}`, 'height': `${['up', 'down'].includes(shares.options.dir) ? shares.options.height + 'rpx' : '100%'}`, borderRadius: shares.options.radius+'rpx'}"> <slot name="box"> <view class="q-share-box"> <view class="q-share-title"> 零碎分享 </view> <scroll-view :scroll-x="true" class="q-share-content"> <view class="q-share-list" :style="{'width': shareList.length*145+'rpx'}"> <view class="q-share-item" v-for="item in shareList" :key="item.id" @click="shareSet(item)"> <q-icon class="q-share-item-icon" :name="item.val" :size="20" /> <text class="q-share-item-txt">{{item.name}}</text> </view> </view> </scroll-view> <view class="q-share-cancel" @click="close('cancel')"> 勾销分享 </view> </view> </slot> </view></view>款式局部.q-share { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 199; .q-share-mak { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); transition: background 2s; z-index: 90; &.active { background: rgba(0, 0, 0, 0.35); } } .q-share-inner { position: absolute; max-width: 100%; max-height: 100%; background: rgba(255, 255, 255, 0.95); transition: all 0.5s; z-index: 95; .q-share-box { display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 15rpx 25rpx; width: 100%; height: 100%; .q-share-title { width: 100%; line-height: 3; font-size: 28rpx; color: $uni-text-color; text-align: center; } .q-share-content { flex: 1; box-sizing: border-box; padding: 20rpx; width: 100%; height: calc(100% - 140rpx); .q-share-list { display: flex; flex-flow: row nowrap; box-sizing: border-box; padding: 25rpx 0; height: 100%; .q-share-item { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 145rpx; height: 100%; .q-share-item-icon { padding: 0; } .q-share-item-txt { margin-top: 10rpx; font-size: 24rpx; } } } } .q-share-cancel { width: 100%; line-height: 2; font-size: 28rpx; color: $uni-text-color-grey; text-align: center; } } &.down, &.up { left: 0; } &.down { bottom: 0; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; transform: translateY(100%); &.active { transform: translateY(0); } } &.up { top: 0; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; transform: translateY(-100%); &.active { transform: translateY(0); } } &.left, &.right { top: 0; width: 0; } &.left { left: 0; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; transform: translateX(-100%); &.active { transform: translateX(0); } } &.right { right: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; transform: translateX(100%); &.active { transform: translateX(0); } } }}脚本局部引入依赖包和属性设置import { ref, reactive, computed } from "vue";// 属性const showTimer = ref(null); // 显示提早const showTime = ref(100); // 显示延迟时间const showCloseTimer = ref(null); // 显示敞开提早const showCloseTime = ref(300); // 显示敞开延迟时间const shares = reactive({ show: false, // 显示分享框 showMask: false, // 显示模态框 showBox: false, // 显示内容动画 options: { // 父组件音讯 dir: "down", // 内容方向 radius: 0, // 圆角角度 width: 200, // 内容宽度 height: 300, // 内容高度 }, list: [ { id: 1, name: "QQ", val: "qq", url(url, title) { return `https://connect.qq.com/widget/shareqq/iframe_index.html?url=${url}&title=${title}`; }, }, { id: 2, name: "QQ空间", val: "qzone", url(url, title) { return `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&title=${title}&site=${url}`; }, }, { id: 3, name: "微博", val: "weibo", url(url, title) { return `http://service.weibo.com/share/share.php?url=${url}&title=${title}&language=zh_cn`; }, }, { id: 4, name: "微信", val: "wechat", url() { return ""; }, }, { id: 5, name: "百度", val: "baidu", url() { return ""; }, }, { id: 6, name: "贴吧", val: "tieba", url() { return ""; }, }, { id: 7, name: "朋友圈", val: "friend", url() { return ""; }, }, { id: 8, name: "淘宝", val: "taobao", url() { return ""; }, }, { id: 9, name: "支付宝", val: "alipay", url() { return ""; }, }, { id: 10, name: "钉钉", val: "dingtalk", url() { return ""; }, }, { id: 11, name: "快手", val: "gifks", url() { return ""; }, }, { id: 12, name: "Whatsapp", val: "whatsapp", url() { return ""; }, }, { id: 13, name: "Messenger", val: "messenger", url() { return ""; }, }, { id: 14, name: "Youtube", val: "youtube", url() { return ""; }, }, { id: 15, name: "Instagram", val: "instagram", url() { return ""; }, }, { id: 16, name: "Twitter", val: "twitter", url() { return ""; }, }, { id: 17, name: "Telegram", val: "telegram", url() { return ""; }, }, { id: 18, name: "复制链接", val: "link", url() { return location.href; }, }, { id: 19, name: "更多", val: "more", url() { return ""; }, }, ], info: { title: "", // 分享题目 url: "", // 分享地址 },});const emits = defineEmits(["close", "share"]);分享办法定义// 办法// 分享列表const shareList = computed(() => { let newList = [], mnp = ["qq", "qzone", "wechat", "friend"]; // #ifdef H5 newList = shares.list.filter((s) => s.val != "more"); // #endif // #ifdef MP-WEIXIN newList = shares.list.filter((s) => mnp.includes(s.val)); // #endif // #ifdef APP-PLUS newList = shares.list; // #endif return newList;});// 关上function open(options) { let defaultOptions = { dir: "down", radius: 0, width: 500, height: 300, title: "", url: "", }; let params = { ...defaultOptions, ...options }; shares.show = true; shares.options = { ...params }; shares.info = { title: params.title, url: params.url, }; showTimer.value = setTimeout(() => { shares.showMask = true; shares.showBox = true; clearTimeout(showTimer.value); }, showTime.value);}// 敞开function close(from = "") { shares.showBox = false; emits("close", from); showTimer.value = setTimeout(() => { shares.showMask = false; clearTimeout(showTime.value); }, showTime.value); showCloseTimer.value = setTimeout(() => { shares.show = false; clearTimeout(showCloseTimer.value); }, showCloseTime.value);}// 分享进来function shareSet(info) { // 告诉父组件 emits("share", info); // 分享内容 let url = shares.info.url, title = shares.info.title; // 网页分享 // #ifdef H5 url = url || location.href; title = title || document.title; // #endif // 分享提醒 if (info.val == "more") { // #ifdef APP-PLUS uni.shareWithSystem({ type: "text", summary: title, href: url, success() { uni.showToast({ title: "分享胜利!", icon: "success", }); }, fail() { uni.showToast({ title: "分享失败!", icon: "error", }); }, }); // #endif } else if (info.val == "link") { uni.setClipboardData({ data: url, success() { uni.showToast({ title: "复制胜利!", icon: "success", }); }, }); } else { let shareUrl = info.url(url, title); if (shareUrl) { // #ifdef H5 window.open(shareUrl); // #endif // #ifdef APP-PLUS if (plus) { plus.runtime.openURL(shareUrl, (res) => { console.log("shareUrl res:", res); }); } // #endif } else { // #ifdef APP-PLUS const scene = "WXSceneSession", params = { href: "https://blog.example.com", title: "列表页面", summary: "我正在应用HelloApp，连忙跟我一起来体验！", imageUrl: "https://blog.example.com/img/03.png", }; // 分享到聊天界面 if (info.val == "wechat") { appShareWx(scene, params); } // 分享到朋友圈 if (info.val == "friend") { scene = "WXSceneTimeline"; appShareWx(scene, params); } // #endif uni.showToast({ title: "分享胜利!", icon: "success", }); } } // 敞开分享 close();}// #ifdef APP-PLUS// 分享到聊天界面或朋友圈function appShareWx(scene = "WXSceneSession", info) { let { href, title, summary, imageUrl } = info; uni.share({ provider: "weixin", scene, type: 0, href, title, summary, imageUrl, success: function (res) { console.log("success:" + JSON.stringify(res)); }, fail: function (err) { console.log("fail:" + JSON.stringify(err)); }, });}// #endifdefineExpose({ open, close,});H5 和 App写好分享组件后，能够在 H5 和 App 外面应用了，上面是页面模板和脚本应用办法。
...