成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

nativeShare 移動(dòng)端瀏覽器調(diào)用原生分享插件

tomorrowwu / 2926人閱讀

摘要：原文地址起因最近有一個(gè)活動(dòng)頁(yè)需要在移動(dòng)端瀏覽器分享網(wǎng)頁(yè)到微信，。及時(shí)有提供，瀏覽器暴露出的也各不相同，而我寫的目的只是為前端開發(fā)者提供一致的來調(diào)用瀏覽器的原生分享組件。

原文地址 https://github.com/fa-ge/NativeShare/blob/master/README.md

起因

最近有一個(gè)活動(dòng)頁(yè)需要在移動(dòng)端瀏覽器分享網(wǎng)頁(yè)到微信，QQ。雖然每一個(gè)瀏覽器都有分享到微信的能力，但不是每個(gè)都提供接口供網(wǎng)頁(yè)來調(diào)用。及時(shí)有提供，瀏覽器暴露出的api也各不相同，而我寫NativeShare的目的只是為前端開發(fā)者提供一致的api來調(diào)用瀏覽器的原生分享組件。大小uglify + gzip = 4k。

兼容性(毫無(wú)疑問是兼容瀏覽器最多的插件了)

移動(dòng)端幾乎所有瀏覽器都支持分享到QQ和QQ空間

QQ瀏覽器

UC瀏覽器

微信自帶瀏覽器(只能設(shè)置文案，分享需要用戶手動(dòng)點(diǎn)擊右上角)

ios QQ自帶瀏覽器(只能設(shè)置文案，分享需要用戶手動(dòng)點(diǎn)擊右上角)

QQ空間APP(只能設(shè)置文案，分享需要用戶手動(dòng)點(diǎn)擊右上角)

android百度瀏覽器

支持分享到web微博

即將支持(安卓QQ自帶瀏覽器）

存在的問題

雖然幾乎所有的瀏覽器都支持分享到QQ和QQ空間，但是webview中基本都會(huì)不支持。我也很難判斷當(dāng)前瀏覽器是否支持，瀏覽器是否喚起QQ APP我也很難判斷，所有除了上述支持的瀏覽器，APP外其他情況調(diào)用分享到QQ我也會(huì)拋出異常。

安卓的QQ自帶瀏覽器分享有問題

UC瀏覽器安卓端不能設(shè)置icon

百度瀏覽器安卓端不能指定分享

示例

demo

使用

支持ES6模塊,AMD，CMD引入
如果你的項(xiàng)目沒有模塊化。你也可以直接用script標(biāo)簽引入NativeShare.js。可以參考demo

import NativeShare from "nativeshare"

// 先創(chuàng)建一個(gè)實(shí)例
var nativeShare = new NativeShare()
// 如果你需要在微信瀏覽器中分享，那么你需要設(shè)置額外的微信配置
// 特別提示一下微信分享有一個(gè)坑，不要分享安全域名以外的鏈接(具體見jssdk文檔)，否則會(huì)導(dǎo)致你配置的文案無(wú)效
// 創(chuàng)建實(shí)例應(yīng)該帶參數(shù)
var nativeShare = new NativeShare({
  appId: "",
  timestamp: "",
  nonceStr: "",
  signature: "",
})

// 設(shè)置分享文案
nativeShare.setShareData({
    icon: "https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg",
    link: "https://github.com/fa-ge/NativeShare",
    title: "NativeShare",
    desc: "NativeShare是一個(gè)整合了各大移動(dòng)端瀏覽器調(diào)用原生分享的插件",
    from: "@fa-ge",
})

// 喚起瀏覽器原生分享組件(如果在微信中不會(huì)喚起，此時(shí)call方法只會(huì)設(shè)置文案。類似setShareData)
try {
    nativeShare.call()
    // 如果是分享到微信則需要 nativeShare.call("wechatFriend")
    // 類似的命令下面有介紹
} catch(err) {
  // 如果不支持，你可以在這里做降級(jí)處理
}
API

NativeShare一共只有三個(gè)實(shí)例方法

getShareData() 獲得分享的文案

setShareData() 設(shè)置分享的文案

call(command = "default", [options]) 調(diào)用瀏覽器原生的分享組件

{
    icon: "",
    link: "",
    title: "",
    desc: "",
    from: "",
    // 以下幾個(gè)回調(diào)目前只有在微信中支持和QQ中支持
    success: noop,
    fail: noop,
    cancel: noop,
    trigger: noop,
}

調(diào)用call方法時(shí)第一個(gè)參數(shù)是指定用什么命令調(diào)用分享組件。目前支持6個(gè)命令。分別是

default 默認(rèn)，調(diào)用起底部的分享組件，當(dāng)其他命令不支持的時(shí)候也會(huì)調(diào)用該命令

wechatTimeline 分享到朋友圈

wechatFriend 分享給微信好友

qqFriend 分享給QQ好友

qZone 分享到QQ空間

weibo 分享到微博

交流

如果你是瀏覽器開發(fā)者或者你知道其他瀏覽器調(diào)用分享的方式，請(qǐng)務(wù)必一定要告訴我。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87032.html

相關(guān)文章

  • 前端頁(yè)面實(shí)現(xiàn)分享

    摘要：首先，有自己的配置，可以直接調(diào)起右上角的自帶分享，，轉(zhuǎn)成微信或手百小程序都可用。其次，如果頁(yè)面內(nèi)想通過按鈕調(diào)用分享功能的話，的組件可以將，這個(gè)值轉(zhuǎn)為微信小程序和手百小程序都適用。 最近在做小程序項(xiàng)目，選用的京東的taro框架，一套代碼可編譯多個(gè)環(huán)境，不需要一個(gè)環(huán)境寫一套代碼，用著還不錯(cuò)?，F(xiàn)在分享已經(jīng)成為一個(gè)日常操作，下面就來簡(jiǎn)單說下我最近調(diào)研的分享功能。 首先，taro有自己的配置，可...

    littlelightss 評(píng)論0 收藏0

  • 從前端開發(fā)者看待用友建筑云移動(dòng)端單點(diǎn)登錄與報(bào)錯(cuò)原因

    摘要：本文對(duì)單點(diǎn)登錄有一個(gè)初步介紹，重點(diǎn)敘述前端開發(fā)者使用單點(diǎn)登錄可能遇到的問題，以及問題分析方案全部來源于用友建筑云，本文僅用于內(nèi)部分享，所以不過多介紹方案實(shí)現(xiàn)。 本文對(duì)單點(diǎn)登錄有一個(gè)初步介紹，重點(diǎn)敘述前端開發(fā)者使用單點(diǎn)登錄可能遇到的問題，以及問題分析！方案全部來源于用友建筑云，本文僅用于內(nèi)部分享，所以不過多介紹方案實(shí)現(xiàn)。原文來自博客 單點(diǎn)登錄介紹 showImg(https://seg...

    Youngdze 評(píng)論0 收藏0

  • 在做移動(dòng)端開發(fā)的時(shí)候，一些應(yīng)該知道的知識(shí)

    摘要：起因一天在群里面朋友問了一個(gè)這么一個(gè)問題看了之后自己梳理了一遍，在此和大家分享一下，這個(gè)就要從客戶端開發(fā)的過程來講了原生開發(fā)在移動(dòng)互聯(lián)網(wǎng)剛興起的時(shí)候，最初的開發(fā)模式是通過或開發(fā)原生應(yīng)用，有一些網(wǎng)頁(yè)跳轉(zhuǎn)的處理，使用之后增加了，安卓使用的是這個(gè) 起因 一天在群里面朋友問了一個(gè)這么一個(gè)問題： showImg(https://segmentfault.com/img/bVbiopb); 看了之...

    Hegel_Gu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<