全端分享总结

项目需求

实现APP、微信、浏览器(uc、qq) 全端分享功能，包括分享到微信、朋友圈、QQ、微博、二维码、复制连接分享

复制分享及二维码分享全端通用，其他分享方式不一样环境实现方式需区分

复制分享

/**
  * 复制事件
  */
function copyText () {
  const copyDOM = document.querySelector('#copyText')
  const range = document.createRange()
  // 选中须要复制的节点
  range.selectNode(copyDOM)
  // 执行选中元素
  window.getSelection().addRange(range)
  // 执行 copy 操做
  const successful = document.execCommand('copy')
  console.log(successful)
  try {
    //successful===undefined兼容UC浏览器
    if (successful || successful === undefined) {
      Toast.success('复制成功', 1.5)
    } else {
      Toast.fail('复制失败，请使用其余分享方式', 1.5)
    }
  } catch (err) {
    Toast.fail('复制失败，请使用其余分享方式', 1.5)
  }
  // 移除选中的元素
  window.getSelection().removeAllRanges()
}
复制代码

copyDOM 为页面文本dom， 须要注意span不可隐藏，不须要显示能够设置定位，放到屏幕外，此方法不兼容低版本手机

二维码分享

引入了QRCode来实现，除生成二维码外还需把生成的二维码与背景海报拼在一张图上、利用Canvas实现

import QRCode from 'qrcode'
/**
  * 生成分享连接图片 url
  */
 function handleQrcode () {
  QRCode.toDataURL('link', {
    margin: 0
  })
    .then(qrcodeUrl => {
      //绘制海报
      this.drawPoster(qrcodeUrl)
    })
    .catch(err => {
      console.error(err)
    })
}

/**
  * 生成分享海报图片 url
  */
function drawPoster (qrcodeUrl) {
  const canvas = document.getElementById('canvas')
  const dpr = window.devicePixelRatio
  const canvasW = canvas.clientWidth * dpr
  const canvasH = canvas.clientHeight * dpr
  canvas.width = canvasW
  canvas.height = canvasH

  const ctx = canvas.getContext('2d')
  const posterBg = new Image()
  posterBg.src = qrcodeImg
  // 绘制背景
  posterBg.onload = () => {
    ctx.drawImage(posterBg, 0, 0, canvasW, canvasH)

    const qrcodeImg = new Image()
    qrcodeImg.src = qrcodeUrl
    // 绘制二维码
    qrcodeImg.onload = () => {
      ctx.drawImage(
        qrcodeImg,
        (162 / 650) * canvasW,
        (325 / 880) * canvasH,
        (325 / 880) * canvasH,
        (325 / 880) * canvasH
      )
      // 生成海报url
      const posterUrl = canvas.toDataURL()
      return posterUrl
    }
  }
}
复制代码

绘制图片代码必须放到onload 回调中， 使用 toDataURL() 生成最终海报url

其余分享方式 （微信、朋友圈、QQ、微博）

其余分享方式需调起对应APP, 需借助相关api

APP端 由iOS、Android提供桥方法、点击对应分享方式时传递分享方式及参数调起相应APP实现分享

示例代码

// 桥方法
export function connectWebViewJavascriptBridge (callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge)
  } else {
    window.WVJBCallbacks = [callback]
    const WVJBIframe = document.createElement('iframe')
    WVJBIframe.style.display = 'link'
    WVJBIframe.src = '/'
    document.documentElement.appendChild(WVJBIframe)
    setTimeout(function () {
      document.documentElement.removeChild(WVJBIframe)
    }, 0)
    document.addEventListener('WebViewJavascriptBridgeReady', function () {
      callback(window.WebViewJavascriptBridge)
    })
  }

  // callback();
}

/**
 * APP分享
 * @param {Object} params
 */
export const appShare = params => {
  connectWebViewJavascriptBridge(JSBridge => {
    JSBridge.callHandler('functionName', params)
  })
}

appShare({
  shareType: 'shareType',
  shareUrl: 'shareUrl',
  shareTitle: 'shareTitle',
  shareUrlContent: 'shareUrlContent',
  shareImageUrl: 'shareImageUrl'
})
复制代码

微信端 调用微信 jssdk 实现 微信公众平台： mp.weixin.qq.com/wiki?t=reso… 引入了 weixin-js-sdk 这个库

import wx from 'weixin-js-sdk'
import request from './../../assets/js/request'

class WxShare {
  constructor () {
    this.config = {
      title: '', // 分享标题
      desc: '', // 分享描述
      link: '', // 分享连接，该连接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: '', // 分享图标
      success: function (e) {
        // 设置成功
        console.log('微信分享配置成功')
      }
    }
  }

  init (config) {
    // 配置项赋值
    this.config.title = config.title
    this.config.desc = config.desc
    this.config.link = config.link
    this.config.imgUrl = config.imgUrl

    // 引入wx.js
    this.wxConfig()
  }

  async wxConfig () {
    const { data } = await request.post('/api', {
      url: window.location.href.split('#')[0]
    })

    wx.config({
      debug: false, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
      appId: data.appid, // 必填，公众号的惟一标识
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, // 必填，生成签名的随机串
      signature: data.signature, // 必填，签名
      jsApiList: [
        'updateAppMessageShareData',
        'updateTimelineShareData'
      ]
    })
    wx.ready(() => {
      console.log(this.config)
      wx.updateAppMessageShareData(this.config)
      wx.updateTimelineShareData(this.config)
    })
    wx.error(res => {
      console.log(res)
    })
  }
}

const wxShare = new WxShare()
export default wxShare
复制代码

浏览器端 uc/qq 调用浏览器桥方法 引用了 mshare.js 的代码，作了部分修改，代码较多，暂时不贴了 微博分享在不支持调起APP的浏览器可调用网页版微博 window.location.href = https://service.weibo.com/share/share.php?url=${url}&title=${title}&pic=${pic}

其余

mate标签设置

<meta name="apple-mobile-web-app-capable" content="yes" />
<!--隐藏ios上的浏览器地址栏-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- UC默认竖屏 ，UC强制全屏 -->
<meta name="full-screen" content="yes" />
<meta name="browsermode" content="application" />
<!-- QQ强制竖屏 QQ强制全屏 -->
<meta name="x5-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="x5-page-mode" content="app" />
复制代码

在滚动区域为body时以上mate设置后在浏览器上滑页面时标题栏及操做栏会收起

*** 页面滚动区域除特殊状况应用body

以前项目滚动区域没有用body, 使用了外层div 设置样式 height: 100vh; overflew-y: scroll ，致使了部分问题

• 浏览器上滑页面时标题栏及操做栏没法收起
• 部分安卓手机QQ及QQ浏览器滚动异常
• iOS 需设置 -webkit-overflow-scrolling: touch 实现弹性滚动 (设置后UC浏览器滚动异常)