<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          H5/web混合開發,js獲取android,ios原生應用返回數據的實例方法

          時間:?2017-10-31閱讀:?4715標簽:?h5

          現在的app開發,已經不在是以前一樣所以頁面都是有原生開發,基于應用的更新上線繁瑣,由于H5的易更新,易維護性, 現在很多應用都采用同H5頁面混合開發模式,例如:淘寶、QQ、京東、聚劃算等等。這邊文章主要講解JS中如何獲取原生應用返回給js的數據方法,包括android和ios

          js代碼如下
          function setupWebViewJavascriptBridge(callback) {//ios的橋接
              if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
              if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
              window.WVJBCallbacks = [callback]; 
              var WVJBIframe = document.createElement('iframe');
              WVJBIframe.style.display = 'none';
              WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
              document.documentElement.appendChild(WVJBIframe);
              setTimeout(callbackction() { document.documentElement.removeChild(WVJBIframe) }, 0)
          }
          function getAppinfor(data,callback){//數據,回調
          	if(window.android!=undefined){//android掛載的對象
          		data.userid=window.android.getUserId();//用戶userid	
          		if(callback!=undefined){callback();};
          	}else{//ios
          		setupWebViewJavascriptBridge(callbackction(bridge) { //js回調 (oc向js發送消息后 , js返回信息)
          	        bridge.registerHandler('IOSData', callbackction(data, responseCallback){
          	        	data.session=data.UserId;
          	        	if(callback!=undefined){callback();};
          	        });
          		});
          	};
          }
          //獲取原生iso,android的數據
          var data={userid:null};
          getAppinfor(data,()=>{
          	//后續的操作
          })
          ios代碼

          代碼開始運行:通過webView加載了js,Object-C中配置橋接的代碼,并注冊"IOSData"傳遞數據,h5收到的數據data,并且執行回調函數。

          @interface ViewController () <UIWebViewDelegate>
          @property (nonatomic, strong) UIWebView *webView;
          @property (nonatomic, strong) WebViewJavascriptBridge *bridge;
          @end

          //以上控制器中創建一個webView,并且加載h5的頁面

          - (void)viewDidLoad {
              [super viewDidLoad];
              UIWebView *wb = [[UIWebView alloc] initWithFrame:CGRectZero];
              // 設置代理,可以通過攔截請求的方式回調
              wb.delegate = self;
              self.webView = wb;
              // 通過request方式加載本地文件
              NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil]]];
              [wb loadRequest:request];
              // 通過JSBridge實現調用js方法
              self.bridge = [WebViewJavascriptBridge bridgeForWebView:wb];
              // 調用js代碼中注冊的名為IOSData的方法,并且傳遞參數data。
              //當js中處理完后,調用callback會回調到responseCallback:并且傳遞responseData回來
              [self.bridge callHandler:@"IOSData" data:@"<data from objc>" responseCallback:^(id responseData) {
                  NSLog(@"收到來自js的回調數據 %@", responseData);
              }];
          }
          android代碼
          webView.getSettings().setJavaScriptEnabled(true);
          webView.addJavascriptInterface(new JS(), "android"); 
          //在JS類里實現javascript想調用的方法,并將其實例化傳入webview, "android"就是js中調用這個實例的方法
          public class JS{
                  public void getUserId(){
                     return "";//返回給js的數據
                  }  
          }

          完結:這邊文章主要講代碼的實現,并沒怎么深入的講解他具體一步一步實現的原理

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/36

          H5嵌入APP后,通過window.WebViewJavascriptBridge原生APP與H5之間交互

          原生APP跳轉到H5頁面時,往往需要攜帶一些用戶信息,之前做法是在跳轉的地址中拼接H5頁面需要的參數,現在通過window.WebViewJavascriptBridge悄悄的進行數據交互

          h5頁面的viewpoint

          只要寫手機端的h5頁面,viewpoint是繞不過的坎,不處理好這個東西,h5頁面就無法正常顯示。那它到底是怎么回事呢?網上曾看到一個據說很有名的外國人,寫過一篇\\\"三個viewpoint\\\"的概念,但是看了,覺得似懂非懂,后來做了不少h5頁面

          h5開發在ios瀏覽器遇到的坑

          click事件;在ios上,最后一個元素加margin-bottom無效;時間轉化問題;position: fixed中的input框聚焦軟鍵盤彈出,IOS下會有光標錯位問題;滾動穿透問題

          Android H5秒開方案調研—今日頭條H5秒開方案詳解

          文件下載耗時:包括html、css、js、圖片等;頁面渲染耗時:頁面渲染,解析js、css文件等;WebView創建耗時:首次創建WebView耗時大約需要500ms左右,第二次創建耗時大約需要20ms左右

          H5喚醒App之scheme方案

          在寫移動端頁面會遇到喚醒App的需求, 一般都是通過scheme協議喚起的,這里記錄一下,以新浪微博為例: 其協議為 sinaweibo://splash; 這些協議需要自己去收集

          H5活動頁面2小時快速開發

          這是一套我自己經常用的H5活動頁面開發腳手架,針對目前一般的H5頁面,基本上2小時就能完成相關的開發內容。俗話說:工欲善其事必先利其器,有了這么一套H5頁面腳手架,我相信80%的H5頁面,都能夠在2小時當中開發完成。

          H5頁面中喚起APP的方法

          需要在從APP分享出去的H5頁面中,帶有一個立即打開的按鈕,如果本地安裝了app,那么就直接喚起本地的app,如果沒有安裝,則跳轉到下載。這是一個很正常的推廣和導流量的策略。

          H5與企業微信jssdk集成

          注冊企業微信,在應用與小程序欄目中,設置可信域名,配置公眾號菜單。可信域名不得不說下,在最初開發時,認為設置并驗證后,微信認證接口會實現跨域請求,其實并沒有。所以全在H5端還得配合服務端完成票據獲取等操作。

          h5通過css實現禁止ios端長按復制選中文字的方法

          在ios端默認的長按選擇,可以對文字進行復制粘貼。但是在實際開發中,針對一些按鈕一般要避免長按時彈出選中文字,或者一些罩層要避免彈出。 這篇文章通過css3實現禁止ios端長按復制選中文字的方法

          如何在h5中調用支付寶支付功能

          如何在自己的H5頁面如何集成支付寶支付呢?目前采用前后端分離的開發模式,數據都是通過服務器那邊獲取的,現在需要集成支付寶支付,下面就簡單介紹下。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网