1. 程式人生 > >web移動端開發-將網站分享朋友圈、微信空間、朋友圈功能

web移動端開發-將網站分享朋友圈、微信空間、朋友圈功能

我們知道現在我們無法直接通過js直接跳轉到微信和QQ等軟體進行分享,但是現在像UC瀏覽器和QQ瀏覽器這樣的主流瀏覽器自帶一個分享工具,而他們也有自己定義的js介面.我們通過呼叫瀏覽器的介面去呼叫瀏覽器的分享,從而實現原生分享功能.是不是很酷呢?

工具介紹:

nativeShare是一個可以通過javascript直接呼叫原生分享的工具. 該工具具有以下特點:
  1. 支援原生微博、微信好友、微信朋友圈、QQ好友、QQ空間分享
  2. 支援呼叫瀏覽器更多分享功能
  3. 不依賴任何jquery以及其他外掛
  4. 注意:目前僅支援手機UC瀏覽器和QQ瀏覽器
github專案地址:https://github.com/JefferyWang/nativeShare.js

[email protected]專案地址:http://git.oschina.net/wangjunfeng/nativeShare.js

使用方法:

1.引入CSS檔案和js檔案
<link rel="stylesheet" href="css/nativeShare.css"/>

<script src="js/nativeShare.js"></script>

2.在需要新增分享的地方插入以下程式碼:
 <!-- share to friends begin-->
<div id="nativeShare" style="margin-left:40px;margin-bottom:50px;display: none;float:left;background-color:rgb(218,190,215);">
</div>
 <!-- share to friends end -->  
3.新增配置資訊,並例項化
<!-- 分享指令碼 -->
<script>
    var config = {
        url:'http://blog.csdn.net/zhengshifeng123',
        title:'鄭仕鋒的CSDN',
        desc:'IT職業技能',
        img:'http://www.wangjunfeng.com/img/face.jpg',
        img_title:'首圖',
        from:'ZSF'
    };
    var share_obj = new nativeShare('nativeShare',config);
</script>
<!-- 分享指令碼結束 -->




相關推薦

web移動開發-網站分享朋友空間朋友功能

我們知道現在我們無法直接通過js直接跳轉到微信和QQ等軟體進行分享,但是現在像UC瀏覽器和QQ瀏覽器這樣的主流瀏覽器自帶一個分享工具,而他們也有自己定義的js介面.我們通過呼叫瀏覽器的介面去呼叫瀏覽器的分享,從而實現原生分享功能.是不是很酷呢? 工具介紹: nativ

WEB移動開發中,區域網內手機瀏覽器訪問電腦頁面,實時檢視程式碼除錯結果

痛點:在進行移動端頁面開發時,經常需要用手機檢視開發的頁面效果。雖然瀏覽器自帶模擬器,但是各個手機相容問題除錯以及操作效果除錯還是需要上真機。 解決途徑: 1、將程式碼扔到伺服器,通過連線伺服器訪問頁面除錯 2、採用內網穿透,將自己的電腦當成伺服器主機,手機訪問電腦伺服器。之前我用過NA

web移動開發技巧與注意事項彙總

一、meta的使用 1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-sca

web移動開發技巧

med 兼容 detect con capi 溢出 鍵盤 lam 右滑 一、meta的使用 1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.

web移動開發技巧與bc平臺搭建註意事項

for ini 頁面 並且 tap 開發技巧 maximum 放大 zoom 一、meta的使用bc平臺搭建【企鵝21717-93408】1、<meta name="viewport" content="width=device-widt

QQQQ空間好友朋友新浪博的分享

           對於分享這一塊我也是研究了很久,本來打算用第3方的來做的。最後還是堅持下來了,決定直接用官方的。            首先給大家推薦一下一個第三方做分享的,現在這個第三方確實很不錯,有時候我都想放棄官方的用他的來做。因為當時做官方的很惱火。   

移動開發流程分享

規範 文檔 alt 計劃 技術分享 自動化測試 理想 流程 image 1.由於產品及UI能力限制,不能達到理想狀態,從以往項目開發中總結發現,在開發及測試周期中發現需求缺陷問題,需要花費大量的溝通成本,導致項目周期有所影響並嚴重影響開發效率和開發質量,解決方案:再產品需求

web移動和PC利用chrome同步開發調試

orm 暫時 ng-click flow fill idt style ini nts web移動端和PC端利用chrome同步開發調試

Web前端攻城獅培養計劃之jQuery深入移動開發

Web前端攻城獅培養計劃之jQuery深入移動端開發 適合人群 如果你已經掌握HTML5、CSS3、JavaScript、jQuery等基礎知識,那麼本課程絕對是你的不二之選。 如果你沒有基礎但熱愛前端,並希望在前端應用方面不斷取得成績,可以先從《HTML5與CSS3實現動態網頁》和《HTML5

乾貨分享:vue2.0做移動開發用到的相關外掛和經驗總結(2)

最近一直在做移動端微信公眾號專案的開發,也是我首次用vue來開發移動端專案,前期積累的移動端開發經驗較少。經過這個專案的鍛鍊,加深了對vue相關知識點的理解和運用,同時,在專案中所涉及到的微信api(微信分享,微信支付),百度地圖api(如何例項化地圖,給地圖新增自定義覆蓋物,給地圖新增自定義標註,對地圖進行

乾貨分享:vue2.0做移動開發用到的相關外掛和經驗總結

最近一直在做移動端微信公眾號專案的開發,也是我首次用vue來開發移動端專案,前期積累的移動端開發經驗較少。經過這個專案的鍛鍊,加深了對vue相關知識點的理解和運用,同時,在專案中所涉及到的微信api(微信分享,微信支付),百度地圖api(如何例項化地圖,給地圖新增自

移動開發web前端開發的區別?

如果說非要有區別的話應該就是開發的軟體和方式不同,因為他們本來就不屬於一端的東西,具體來看看下面: web前端開發 用最簡單粗暴的方式來講,就是用html + css + javascript來構建一個供人瀏覽的網頁,其中又包括兩個主要的分類:p

web開發移動開發程式碼規範開發流程的文件總結

綜合類地址前端文件基本例子https://github.com/mgbq/front-end-Doc/blob/master/base.md前端知識體系http://www.cnblogs.com/sb19871023/p/3894452.html前端知識結構https://

移動開發demo—移動web相簿(一)

本文主要是介紹開發移動端web相簿這樣一案例用到的前置知識。 一、移動端樣式 移動端更接近手機原生的方式。 如下是一個angular mobile的demo的例子:   移動端demo做成這樣的好處: 在手機端瀏覽器中開啟,接近原生app應用。 打包成Android或者io

移動開發Web App開發

寫在前面:本人剛剛接觸移動端開發,希望自己的見解能夠幫助到他人,不足之處還望提醒。1 移動端開發分類1.1 Native App 原生App開發優點:(1)使用者體驗好(2)效能穩定(3)操作速度快(4)能夠訪問本地資源(通訊錄,相簿)(5)能夠設計出色的動效,轉場(6)擁有

Web移動打包成手機app---HBuilder

p12 img 導航 安卓 賬號 itoo nbsp 沒有 pac 將移動端頁面打包成app 1、使用 HBuilder 直接編譯打包 點擊左上角 文件》打開目錄》選擇目錄 選擇用Webpack打包好的dist文件目錄 由於我添

淺談一下web移動基本

5.5 相關 過程 部件 位圖 都是 3.5 柵格 開發 屏幕尺寸、屏幕分辨率、屏幕像素密度 屏幕尺寸: 指屏幕的對角線的長度,單位是英寸,1英寸=2.54厘米。 常見的屏幕尺寸有2.4、2.8、3.5、3.7

web移動兼容

uc瀏覽器 value default 單元 style 表單 str port 新版本 移動端總結和手機兼容問題 H5頁面窗口自動調整到設備寬度,並禁止用戶縮放頁面 <meta name="viewport" content="width=device-width

web移動布局方式整理

有用 ice cool 方式 答案 ref plus 鉤子 都是   寫H5頁面一直寫的有點隨意,只是保證了頁面在各個屏幕下顯示良好,卻沒有保證到在各個屏幕下是等比例放大或者縮小.這些天在寫一些頁面,試著看看能不能寫出等比例放大縮小的頁面,發現不容易啊,在網上找了一些文章,

移動開發用touch事件還是click事件

device 問題 桌面網站 有意義 用戶 雨後春筍 phone 平臺 系統 前端開發現在包含了跨瀏覽器,跨平臺(不同操作系統)和跨設備(不同尺寸的設備)開發。 在移動開發的過程中,到底選取touch事件還是click事件?對了,請不要鄙視click,click在移動端開發