微信內(nèi)置瀏覽器WeixinJSBridge的使用技巧(隱藏右上角按鈕,獲取用戶網(wǎng)絡(luò)狀態(tài),支付等)
微信瀏覽器私有接口WeiXinJsBridge,大致有以下幾個(gè)有用的知識(shí)點(diǎn):
- 分享給好友
- 分享到朋友圈
- 分享到微博
- 隱藏下方工具欄
- 隱藏微信右上角分享按鈕(三個(gè)小圓點(diǎn))
- 關(guān)閉瀏覽器回到公眾號(hào)對(duì)話窗口
- 獲取用戶的網(wǎng)絡(luò)狀態(tài)
- 微信瀏覽器支付函數(shù)
WeiXinJsBridge的分享函數(shù)
WeiXinJsBridge的分享函數(shù)分為分享給好友,分享到朋友圈,分享到微博,但是這三種分享都是在下面在個(gè)函數(shù)內(nèi)部實(shí)現(xiàn)的。
function sendMessage(){ WeixinJSBridge.on('menu:share:appmessage',function(argv){ alert("發(fā)送給好友"); }); }
只要在需要進(jìn)行分享的位置處,調(diào)用此函數(shù),就可以完成分享功能。
分享給好友 (menu:share:appmessage)
function sendMessage(){ WeixinJSBridge.on('menu:share:appmessage', function(argv){ WeixinJSBridge.invoke('sendAppMessage',{ "appid":"", //appid 設(shè)置空就好了。 "img_url": imgUrl, //分享時(shí)所帶的圖片路徑 "img_width": "120", //圖片寬度 "img_height": "120", //圖片高度 "link":url, //分享附帶鏈接地址 "desc":"我是一個(gè)介紹", //分享內(nèi)容介紹 "title":"標(biāo)題,再簡(jiǎn)單不過了。" }, function(res){ /*** 回調(diào)函數(shù),最好設(shè)置為空 ***/ }); }); }
分享到朋友圈(menu:share:timeline)
function sendMessage(){ WeixinJSBridge.on('menu:share:timeline', function(argv){ WeixinJSBridge.invoke('shareTimeline',{ "appid":"", //appid 設(shè)置空就好了。 "img_url": imgUrl, //分享時(shí)所帶的圖片路徑 "img_width": "120", //圖片寬度 "img_height": "120", //圖片高度 "link":url, //分享附帶鏈接地址 "desc":"我是一個(gè)介紹", //分享內(nèi)容介紹 "title":"標(biāo)題,再簡(jiǎn)單不過了。" }, function(res){ /*** 回調(diào)函數(shù),最好設(shè)置為空 ***/}); }); }); }
分享到微博(menu:share:weibo)
function sendMessage(){ WeixinJSBridge.on('menu:share:weibo', function(argv){ WeixinJSBridge.invoke('shareWeibo',{ "content":dataForWeixin.title+' '+dataForWeixin.url, "url":dataForWeixin.url }, function(res){ /*** 回調(diào)函數(shù),最好設(shè)置為空 ***/ }); }); }
三個(gè)分享功能主要是監(jiān)聽的接口不同,
分享給好友(menu:share:appmessage);invoke(‘sendAppMessage’);
分享到朋友圈(menu:share:timeline);invoke(‘shareTimeline’);
分享到微博(menu:share:weibo);invoke(‘shareWeibo’);
注意:如果微信瀏覽器內(nèi)部尚未初始化,所有的接口都會(huì)是undefined。為了避免進(jìn)去馬上就調(diào)用出錯(cuò),獲取微信初始化完成響應(yīng)事件,初始化完成調(diào)用sendMessage進(jìn)行綁定。
if(document.addEventListener){ document.addEventListener('WeixinJSBridgeReady',sendMessage,false); }else if(document.attachEvent){ document.attachEvent('WeixinJSBridgeReady' , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage); }
WeixinJSBridge的隱藏函數(shù)
- WeixinJSBridge.call(‘hideToolbar’); //隱藏右下面工具欄
- WeixinJSBridge.call(‘showToolbar’); //顯示右下面工具欄
- WeixinJSBridge.call(‘hideOptionMenu’); //隱藏右上角三個(gè)點(diǎn)按鈕。
- WeixinJSBridge.call(‘showOptionMenu’); //顯示右上角三個(gè)點(diǎn)按鈕。
WeixinJSBridge的關(guān)閉函數(shù)使用場(chǎng)景:頁(yè)面操作結(jié)束,需要關(guān)閉當(dāng)前瀏覽器,回到公眾號(hào)對(duì)話窗口。
例如:某項(xiàng)目需求支持用戶將openId和手機(jī)號(hào)進(jìn)行綁定和解綁定,在執(zhí)行完解綁定后關(guān)閉當(dāng)前微信瀏覽器回到公眾號(hào)對(duì)話窗口。
完成頁(yè)面操作后,在適當(dāng)?shù)臅r(shí)機(jī)調(diào)用微信提供的方法:
WeixinJSBridge.call('closeWindow');
即可關(guān)閉瀏覽器回到公眾號(hào)會(huì)話窗口。
在微信網(wǎng)頁(yè)中獲取用戶的網(wǎng)絡(luò)狀態(tài)
WeixinJSBridge.invoke('getNetworkType',{},function (e){ // 在這里拿到e.err_msg,這里面就包含了所有的網(wǎng)絡(luò)類型 alert(e.err_msg); }); //e.err_msg的取值如下所示: //network_type:wifi wifi網(wǎng)絡(luò) //network_type:edge 非wifi,包含3G/2G //network_type:fail 網(wǎng)絡(luò)斷開連接 //network_type:wwan 2g或者3g
在微信網(wǎng)頁(yè)中支付
function onBridgeReady(orderId, response) { WeixinJSBridge.invoke( "getBrandWCPayRequest", { appId: response.appId, //公眾號(hào)ID,由商戶傳入 timeStamp: response.timeStamp, //時(shí)間戳,自1970年以來的秒數(shù) nonceStr: response.nonceStr, //隨機(jī)串 package: response.packageVal, signType: response.signType, //微信簽名方式: paySign: response.paySign //微信簽名 }, function (res) { // 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示: //res.err_msg將在用戶支付成功后返回ok,但并不保證它絕對(duì)可靠。 if (res.err_msg == "get_brand_wcpay_request:ok") { $api.pay_order(orderId).then(res => { if (res.code == 1) { state.assistOne = false; state.assistTwo = false; $Toast({ duration: 3000, message: "支付成功!" }); emit("get_brand_wcpay"); } }); } // 支付過程中用戶取消 if (res.err_msg == "get_brand_wcpay_request:cancel") { } // 支付失敗 if (res.err_msg == "get_brand_wcpay_request:fail") { } /** * 其它 * 1、請(qǐng)檢查預(yù)支付會(huì)話標(biāo)識(shí)prepay_id是否已失效 * 2、請(qǐng)求的appid與下單接口的appid是否一致 * */ if (res.err_msg == "調(diào)用支付JSAPI缺少參數(shù):total_fee") { } } ); } if (typeof WeixinJSBridge == "undefined") { if (document.addEventListener) { document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false); } else if (document.attachEvent) { document.attachEvent("WeixinJSBridgeReady", onBridgeReady); document.attachEvent("onWeixinJSBridgeReady", onBridgeReady); } } else { onBridgeReady(); }
以上就是微信內(nèi)置瀏覽器WeixinJSBridge的使用技巧(隱藏右上角按鈕,獲取用戶網(wǎng)絡(luò)狀態(tài),支付等)的詳細(xì)內(nèi)容,更多關(guān)于微信內(nèi)置瀏覽器WeixinJSBridge的使用技巧的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js遍歷對(duì)象數(shù)組并獲取對(duì)象相應(yīng)的屬性值實(shí)例代碼
對(duì)于數(shù)組或者對(duì)象的遍歷,篩選,提取等操作是前端開發(fā)中經(jīng)常有的需求,下面這篇文章主要給大家介紹了關(guān)于js遍歷對(duì)象數(shù)組并獲取對(duì)象相應(yīng)的屬性值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06JavaScript實(shí)現(xiàn)簡(jiǎn)易輪播圖最全代碼解析(ES5)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易輪播圖最全代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JS實(shí)現(xiàn)選項(xiàng)卡插件的兩種寫法(jQuery和class)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)選項(xiàng)卡插件的兩種寫法:jQuery和class,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12Javascript中設(shè)置默認(rèn)參數(shù)值示例
這篇文章主要介紹了Javascript中默認(rèn)參數(shù)值的設(shè)置,很簡(jiǎn)單,但很實(shí)用,需要的朋友可以參考下2014-09-09JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹的方法
這篇文章主要介紹了JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹的方法,文章通過代碼示例給大家講解的非常詳細(xì),?對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06ajaxfileupload.js實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了ajaxfileupload.js實(shí)現(xiàn)上傳文件功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-04-04微信小程序如何調(diào)用新聞接口實(shí)現(xiàn)列表循環(huán)
這篇文章主要介紹了微信小程序如何調(diào)用新聞接口實(shí)現(xiàn)列表循環(huán),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07