全端分享總結

項目需求

實現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瀏覽器滾動異常)