web移動端開發-將網站分享朋友圈、微信空間、朋友圈功能
我們知道現在我們無法直接通過js直接跳轉到微信和QQ等軟體進行分享,但是現在像UC瀏覽器和QQ瀏覽器這樣的主流瀏覽器自帶一個分享工具,而他們也有自己定義的js介面.我們通過呼叫瀏覽器的介面去呼叫瀏覽器的分享,從而實現原生分享功能.是不是很酷呢?
工具介紹:
nativeShare是一個可以通過javascript直接呼叫原生分享的工具. 該工具具有以下特點:- 支援原生微博、微信好友、微信朋友圈、QQ好友、QQ空間分享
- 支援呼叫瀏覽器更多分享功能
- 不依賴任何jquery以及其他外掛
- 注意:目前僅支援手機UC瀏覽器和QQ瀏覽器
[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.在需要新增分享的地方插入以下程式碼:
3.新增配置資訊,並例項化<!-- 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 -->
<!-- 分享指令碼 --> <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
QQ、QQ空間、微信好友、微信朋友圈、新浪微博的分享。
對於分享這一塊我也是研究了很久,本來打算用第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在移動端開發