uniapp 项目实践总结(九)自定义分享组件

这篇文章主要是讲述自定义分享组件的方放,兼容网页 H5 端、微信小程序端和 App 端。

目录

  • 准备工作
  • 原理分析
  • 组件实现
  • H5 和 App
  • 小程序
  • 案例展示

准备工作

  • 首先我们从图标图库网站上面找一些常用的分享图标并下载下来;
  • components新建一个q-share文件夹,并新建一个q-share.vue的组件;
  • 按照前一篇所说的页面结构,编写好预定的分享页面;

原理分析

自定义分享组件就是采用各端支持的 API 方法进行封装设置,利用条件编译的语法进行分而实现。

H5 端分析

H5 端主要有两种分享方法:

  • 普通浏览器自带分享按钮;微信内嵌浏览器,可调用js-sdk进行分享;
  • 第三方平台网页应用:在第三方分享平台申请添加自己的应用,以便调用第三方的分享 API 进行分享;
  • 网上公共分享链接:这里就使用网上公开的分享地址进行分享了。

以下罗列了几个常用的第三方分享平台的地址,感兴趣的可以收藏看一下。

常用开放平台:

  • QQ 互联平台
  • 微信开放平台
  • 微博开放平台
  • 支付宝开放平台
  • 百度开放平台
  • 抖音开放平台

小程序端分析

小程序端的分享目前 uniapp 不支持 API 调用,只能用户主动点击触发分享,可使用自定义按钮方式

你可能感兴趣的:(前端框架库,uni-app,前端,分享组件)