2. 程式人生 > >最全、最好用微信瀏覽器JS API合集！！！

最全、最好用微信瀏覽器JS API合集！！！

阿新 • • 發佈：2019-02-12
尋找了多少次，終於發現它了，感謝網友的貢獻，在此也分享給大家，檢視附件~微信公眾平臺Js API（WeixinApi）  
微信公眾平臺Js API（WeixinApi）
1、API能實現什麼？

1、分享到微信朋友圈
2、分享給微信好友
3、分享到騰訊微博
4、新的分享介面，包含朋友圈、好友、微博的分享（for iOS）
5、隱藏/顯示右上角的選單入口
6、隱藏/顯示底部瀏覽器工具欄
7、獲取當前的網路狀態
8、調起微信客戶端的圖片播放元件
9、關閉公眾平臺Web頁面
10、判斷當前網頁是否在微信內建瀏覽器中開啟
11、增加開啟掃描二維碼
12、支援WeixinApi的錯誤監控
13、檢測應用程式是否已經安裝（需要官方開通許可權）

你可以用微信的“掃一掃”來開啟下面這個二維碼體驗一把：

Weixin Api Demo

2、如何使用？

使用起來比較簡單，具體可參考demo.html中的實現

1）、初始化等待分享

JavaScript程式碼 
  1. // 開發階段，開啟WeixinApi的除錯模式
  2. WeixinApi.enableDebugMode();
  3. // 初始化WeixinApi，等待分享
  4. WeixinApi.ready(function(Api) {
  5.   // 微信分享的資料
  6.   var wxData = {
  7.     "appId": "", // 服務號可以填寫appId
  8.     "imgUrl" : 'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg'
    ,
  9.     "link" : 'http://www.baidufe.com',
  10.     "desc" : '大家好，我是Alien，Web前端&Android客戶端碼農，喜歡技術上的瞎倒騰！歡迎多交流',
  11.     "title" : "大家好，我是趙先烈"
  12.   };
  13.   // 分享的回撥
  14.   var wxCallbacks = {
  15.     // 分享操作開始之前
  16.     ready : function() {
  17.     // 你可以在這裡對分享的資料進行重組
  18.     alert("準備分享");
  19.     },
  20.     // 分享被使用者自動取消
  21.     cancel : function(resp) {
  22.     // 你可以在你的頁面上給使用者一個小Tip，為什麼要取消呢？
  23.     alert("分享被取消，msg=" + resp.err_msg);
  24.     },
  25.     // 分享失敗了
  26.     fail : function(resp) {
  27.     // 分享失敗了，是不是可以告訴使用者：不要緊，可能是網路問題，一會兒再試試？
  28.     alert("分享失敗，msg=" + resp.err_msg);
  29.     },
  30.     // 分享成功
  31.     confirm : function(resp) {
  32.     // 分享成功了，我們是不是可以做一些分享統計呢？
  33.     alert("分享成功，msg=" + resp.err_msg);
  34.     },
  35.     // 整個分享過程結束
  36.     all : function(resp,shareTo) {
  37.     // 如果你做的是一個鼓勵使用者進行分享的產品，在這裡是不是可以給使用者一些反饋了？
  38.     alert("分享" + (shareTo ? "到" + shareTo : "") + "結束，msg=" + resp.err_msg);
  39.     }
  40.   };
  41.   // 使用者點開右上角popup選單後，點選分享給好友，會執行下面這個程式碼
  42.   Api.shareToFriend(wxData, wxCallbacks);
  43.   // 點選分享到朋友圈，會執行下面這個程式碼
  44.   Api.shareToTimeline(wxData, wxCallbacks);
  45.   // 點選分享到騰訊微博，會執行下面這個程式碼
  46.   Api.shareToWeibo(wxData, wxCallbacks);
  47.   // iOS上，可以直接呼叫這個API進行分享，一句話搞定
  48.   Api.generalShare(wxData,wxCallbacks);
  49. });
可能有的朋友不知道appId從哪兒獲取，請看這裡：如何獲取appId

2）、隱藏右上角option menu入口

JavaScript程式碼 
  1. WeixinApi.ready(function(Api) {
  2.   // 隱藏
  3.   Api.hideOptionMenu();
  4.   // 顯示
  5.   // Api.showOptionMenu();
  6. });
3）、隱藏底部工具欄

JavaScript程式碼 
  1. WeixinApi.ready(function(Api) {
  2.   // 隱藏
  3.   Api.hideToolbar();
  4.   // 顯示
  5.   // Api.showToolbar();
  6. });
4）、獲取當前的網路型別

JavaScript程式碼 
  1. WeixinApi.ready(function(Api) {
  2.   Api.getNetworkType(function(network){
  3.     /**
  4.     * network取值：
  5.     *
  6.     * network_type:wifi  wifi網路
  7.     * network_type:edge  非wifi,包含3G/2G
  8.     * network_type:fail  網路斷開連線
  9.     * network_type:wwan  2g或者3g
  10.     */
  11.   });
  12. });
5）、調起客戶端圖片播放元件

PHP程式碼 
  1. WeixinApi.ready(function(Api) {
  2.   // 需要播放的圖片src list
  3.   var srcList = [src1, src2, ..., srcN];
  4.   // 選一個作為當前需要展示的圖片src
  5.   var curSrc = src1;
  6.   // 調起
  7.   Api.imagePreview(curSrc, srcList);
  8. });
調起客戶端圖片播放元件，還有一種更屌的方法，不需要依賴這個WeixinApi，直接a標籤實現就行，具體格式：

HTML程式碼 
  1. <a href="weixin://viewimage/`YourImageURL`">AnyThing</a>
我們可以用A標籤來巢狀這個img，具體Demo如下：

HTML程式碼 
  1. <a href="weixin://viewimage/http://www.baidu.com/img/bdlogo.gif">
  2.   <img src="http://www.baidu.com/img/bdlogo.gif">
  3. </a>
  4. <a href="weixin://viewimage/http://tb2.bdstatic.com/tb/static-common/img/search_logo_big_6a13b553.gif">
  5.   <img src="http://tb2.bdstatic.com/tb/static-common/img/search_logo_big_6a13b553.gif">
  6. </a>
6）、關掉當前微信公眾頁面視窗

JavaScript程式碼 
  1. WeixinApi.ready(function(Api) {
  2.   // 關閉視窗
  3.   WeixinApi.closeWindow({
  4.     success : function(resp){
  5.     alert('關閉視窗成功！');
  6.     },
  7.     fail : function(resp){
  8.     alert('關閉視窗失敗');
  9.     }
  10.   });
  11. });
7）、判斷當前網頁是否在微信內建瀏覽器中開啟

JavaScript程式碼 
  1. WeixinApi.ready(function(Api) {
  2.   // true or false
  3.   var flag = Api.openInWeixin();
  4. });
8）、開啟掃描二維碼

JavaScript程式碼 
  1. WeixinApi.ready(function(Api) {
  2.   // 掃描二維碼
  3.   WeixinApi.scanQRCode({
  4.     success : function(resp){
  5.     alert('掃描器已開啟！');
  6.     },
  7.     fail : function(resp){
  8.     alert('掃描器無法開啟');
  9.     }
  10.   });
  11. });
9）、開啟WeixinApi的錯誤監控

注意，這句程式碼務必放在WeixinApi.ready之前；上線的時候，根據實際需要，可刪掉它

JavaScript程式碼 
  1. // 方法1：不帶任何引數，將以alert方式提示出錯資訊
  2. WeixinApi.enableDebugMode();
  3. // 方法2：給一個callback，自己處理錯誤資訊
  4. WeixinApi.enableDebugMode(function(errObj){
  5.   // errObj = {
  6.   //  message : errorMessage,
  7.   //  script : scriptURI,
  8.   //  line : lineNumber,
  9.   //  column : columnNumber
  10.   // }
  11. });
// 當然，你還可以做一件事：把這些錯誤資訊上報到伺服器
3、其他

詳細的使用場景，可以到這裡獲取：http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html

注意：這只是發燒版本，非微信官方出品！有問題可大家一起來討論，我很樂意與大家一起來完善這個API。

相關推薦

最全、最好用微信瀏覽器JS API合集！！！

尋找了多少次，終於發現它了，感謝網友的貢獻，在此也分享給大家，檢視附件~微信公眾平臺Js API（WeixinApi）  微信公眾平臺Js API（WeixinApi）1、API能實現什麼？1、分享到微信朋友圈2、分享給微信好友3、分享到騰訊微博4、新的分享介面，包含朋友圈

某課最全Python flask構建微信小程式訂餐系統

第1章 《Python Flask構建微信小程式訂餐系統》課程簡介本章內容會帶領大家通覽整體架構，功能模組，及學習建議。讓大家在一個清晰的開發思路下，進行後續的學習。本次課程是嚴格按照商業系統進行架構開發的，從PC管理員端到小程式會員端，從專案搭建到部署上線，通俗易懂。.

PC端微信瀏覽器js點選事件失效

**電腦端微信瀏覽器js點選事件失效** 前段時間發現開發的一個微信公眾號上一個按鈕的點選事件在手機上是正常的，電腦端手機微信裡卻不起作用。 在網上找了好久都沒有找到解決辦法。 後來檢視

史上最全的 Python 學習資料，PDF 電子書大合集

keep on coding這些年在學習 Python 的過程中，蒐集了很多 Python 的資源。我把這些資源都整理了下，有些資源是付費的資源，有些是同行大牛分享的資源。都是非常不錯的 Python 學習資料。今天全部送給大家，感謝大家一直以來對痴海的支援。關注公眾號「痴海

微信隱藏程式碼功能合集

讓微信底欄動起來，更貼合 Android Design： //switchtabpos將微信聊天頁和文章頁多視窗顯示 //multiwebview檢視當前聊天視窗訊息數量 //checkcoun

[福利]微信小程式demo合集

領取demo的方法： 如果需要小程式原始碼demo，歡迎關注 【碼農之家】微信公眾號，回覆【小程式】一鍵領取30個微信小程式原始

Android調用微信登陸、分享、支付

cep from thum 請求 mil 問題 start 返回 ear 前言:用了微信sdk各種痛苦,感覺比qq sdk調用麻煩多了,回調過於麻煩,還必須要在指定包名下的actvity進行回調,所以我在這裏寫一篇博客,有這個需求的朋友可以借鑒一下,以後自己別的項目有用到也

一、單頁應用如何調用微信接口和手機端的一些方法？

9.png 啟用 調用 對象賦值 之前 手動 全局 微信公眾平臺 一個 因為angular 是單頁應用，所以在調用一些手機端可微信接口的地方會很麻煩，這裏總結一下在手機端調用分享和調用微信接口的時候出現的問題及解決的辦法： 出現問題： 手機端的方法如果有回調，H5需要調

用chrome模擬微信瀏覽器訪問需要OAuth2.0網頁授權的頁面

mil col cnblogs bre letter 型號 默認 刷新 build 現在很流行微信網頁小遊戲，用html5制作的小遊戲移過來，可以放到微信瀏覽器中打開，關鍵是可以做成微信分享朋友圈的形式，大大提高遊戲的傳播，增強好友的遊戲互動。 微信瀏覽器中打開網頁遊戲效

微信支付：手機系統自帶的瀏覽器，調用微信支付如何實現（非掃碼）

所有 價格 驗證 返回 調用 -i 是否為空 支付申請 data- Q:翻看了微信支付的api沒發現支持h5調支付接口的情況（微信js除外），然後卻發現美團的支付成功調用了，這是怎麽實現的？ A: 使用微信H5支付即可。H5支付通過URL調起微信APP，

css3中-moz、-ms、-webkit,-o分別代表的意思，以及微信瀏覽器內核分析

ogl mod ref rotate ftw 世界之窗 說了 ike tps 這種方式在業界上統稱：識別碼、前綴 //-ms代表【ie】內核識別碼 //-moz代表火狐【firefox】內核識別碼 //-webkit代表谷歌【chrome】/蘋果【safari】內核識別碼

在微信瀏覽器中 location.reload() 不刷新解決方案(直接調用方法)

arc time lac load() 直接 新解 () light 刷新 1、問題 　　在微信瀏覽器中，需要時刷新當前頁面。 　　正常情況下我們直接使用 location.reload 方法來刷新。 2、解決方法 function realod(){

微信瀏覽器裡區分ios、安卓

在微信瀏覽器裡判斷是ios還是安卓： function getClientType(){ var userAgent = navigator.userAgent; var isAndroid = userAgent.indexOf('Android') > -1 || us

關於用微信開啟視訊預設全屏問題

在網上找了很多解決辦法:最開始是用H5的屬性來試 事實證明這種辦法不行, 後來瞭解到時因為微信瀏覽器的問題: 解決辦法: <video src="${fishDisease.video}" type="video/mpeg" controls="" x5-playsi

php 判斷訪問的是否為移動端（移動端、pc端），是否為微信瀏覽器端？

函式，設定為公共函式即可！ /** * //判斷是否手機裝置 * @return boolean */ function is_mobile_request() { $_SERVER['ALL_HTTP'] = isset($_SERVER['ALL_HTTP']) ? $_SERVER

解決UC瀏覽器、微信瀏覽器使用display:flex;的相容性問題

flex是個非常好用的屬性，如果說有什麼可以完全代替 float 和 position ，那麼肯定是非它莫屬了（雖然現在還有很多不支援 flex 的瀏覽器）。然而在移動開發中，本來絕大多數瀏覽器（包括安卓2.3以上的自帶瀏覽器）都支援的屬性，偏偏有個例外，就是國產某某X

微信瀏覽器內相容android iOS調取手機攝像頭進行拍照、打水印、壓縮、預覽

實現這些功能使用瞭如下外掛： html部分 //調起攝像頭按鈕 <input type="file" id="file" accept="image/*" capture="camera"> //預覽圖片 <div id="file

根據瀏覽器判斷是否為Android、ios或微信環境

agen navig 相關信息 agent san ipa andro span hone 寫h5頁面時經常有業務邏輯需要判斷頁面所處的環境，這時我們可以通過navigator對象來獲取瀏覽器相關信息加以判斷，方法如下： 　　 let ua = navigator.use

通過UserAgent判斷智慧手機(裝置,Android,IOS)、微信瀏覽器

定義和用法 userAgent 屬性是一個只讀的字串，聲明瞭瀏覽器用於 HTTP 請求的使用者代理頭的值。 一般來講，它是在 navigator.appCodeName 的值之後加上斜線和 navigator.appVersion 的值構成的。 例如：Mozilla/4

微信瀏覽器分享到朋友圈自定義標題、描述和圖片，檢視圖片可伸縮、儲存

/* * 在微信瀏覽器可伸縮檢視圖片，並儲存 * +----------------------------------+ * 單圖模式，src須為絕對路徑 * +-----------------