zoukankan      html  css  js  c++  java
  • react native 中webview内的点击事件传到外部原生调用

    先说一下我使用webview的时候遇到的一个功能需求

    是这样的,上图中的这个页面是用h5做的,但是由于点击“我的优惠劵”是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点击事件,但是由于这个页面不是在我们本地弄的,而是在后台那边弄好,然后通过给一个h5链接,所以我们在本地是没有办法给它添加点击事件。嗯,是的,我们没有办法给它添加事件点击,但是我们没有拿到这个点击事件,我们怎么进行跳转呢。到重点了。

    在react native有一个第三方的组件,是可以实现这个功能的:

    1 react-native-webview-bridge

    是的就是这个东西。这个具体怎么有哪些方法,大家可以到Github上看看,直接搜索这个就可以了,我这里只说我实现这个功能用到的一些东东。

    首先,我们得将这个家伙添加到我们的项目中去

    1 var WebViewBridge = require('react-native-webview-bridge');

    然后webViewBridge就可以作为一个控件一样使用了。

     1 'use strict';
     2 import React, {
     3     Component
     4 } from 'react';
     5 
     6 import  {
     7     AppRegistry,
     8     StyleSheet,
     9     View,
    10     WebView,
    11 } from 'react-native';
    12 
    13 import WebViewPage from '../wiget/webViewPage';
    14 
    15 var WebViewBridge = require('react-native-webview-bridge');
    16 
    17 
    18 /**
    19  * webView
    20  * 22  * @url     跳转的地址
    23  */
    24 export default class WebViewForBridge extends Component {
    25     constructor(props) {
    26         super(props);
    27     }
    28 
    29 
    30     onBridgeMessage(message) {
    31         const {navigator} = this.props;
    32         if (message === "coupons") {
    33             if (navigator) {
    34                 navigator.push({
    35                     component: WebViewPage,
    36                     params: {
    37                         url: this.props.myCoupons,
    38                         title: Strings.MyCoupons,
    39                     },
    40                 });
    41             }
    42         } 
    43     }
    44 
    45     render() {
    46         return (
    47             <View style={{flex: 1}}>
    48               
    49                 <WebViewBridge
    50                     ref="webViewBridge"
    51                     onBridgeMessage={this.onBridgeMessage.bind(this)}
    52                     style={styles.webViewStyle}
    53                     source={{uri: this.props.url === undefined ? DEFAULT_URL : this.props.url}}
    54                     startInLoadingState={true}
    55                     domStorageEnabled={true}
    56                     javaScriptEnabled={true}/>
    57             </View>
    58         );
    59     }
    60 }
    61 
    62 var styles = StyleSheet.create({
    63     webViewStyle: {
    64         backgroundColor: ‘#f2f2f2’
    65     }
    66 });
    soource是我显示的h5链接,因为有些东西是我们自己项目封装的,所以不方便贴出来,朋友们不要傻傻的全部复制粘贴啊,嗯好了,原生代码就写完了,当然你现在测试的话,一点用都没有,因为我们还需要改h5链接里面的代码。
    我在前面弄了一张图,我下面就把h5的源代码贴出来,

      1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=2.0">
      6     <title>慢钱精选小额理财-慢钱</title>
      7     <meta name="keywords" content="小额理财、零钱理财、普惠理财、精选理财">
      8     <meta name="description" content="慢钱独家打造,精选小额理财,优中选优,轻松实现财务自由">
      9     
     10 
     11 
     12 
     13 <script>
     14 
     15     // 百度统计
     16     var _vds = _vds || [];
     17     window._vds = _vds;
     18     (function(){
     19         _vds.push(['setAccountId', 'df10dc61bd6c48c7854b439c2dbb4295']);
     20         (function() {
     21             var vds = document.createElement('script');
     22             vds.type='text/javascript';
     23             vds.async = true;
     24             vds.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'dn-growing.qbox.me/vds.js';
     25             var s = document.getElementsByTagName('script')[0];
     26             s.parentNode.insertBefore(vds, s);
     27         })();
     28     })();
     29 
     30     var browser = {
     31         versions: function () {
     32             var u = navigator.userAgent, app = navigator.appVersion;
     33             return {     //移动终端浏览器版本信息
     34                 trident: u.indexOf('Trident') > -1, //IE内核
     35                 presto: u.indexOf('Presto') > -1, //opera内核
     36                 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
     37                 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
     38                 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
     39                 ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
     40                 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
     41                 iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
     42                 iPad: u.indexOf('iPad') > -1, //是否iPad
     43                 webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
     44             };
     45         }(),
     46         language: (navigator.browserLanguage || navigator.language).toLowerCase()
     47     }
     48 
     49     var _hmt = _hmt || [];
     50     (function() {
     51         var hm = document.createElement("script");
     52         hm.src = "https://hm.baidu.com/hm.js?4fbebe5a92c9c38862e6bad7fc00d6bd";
     53         var s = document.getElementsByTagName("script")[0];
     54         s.parentNode.insertBefore(hm, s);
     55     })();
     56 </script>
     57 
     58 <link rel="stylesheet" type="text/css" href="/static/css/mui.min.css?v=2016123481123">
     59 <link rel="stylesheet" type="text/css" href="/static/css/manqianbao.min.css?v=2016123481123">
     60 <link rel="stylesheet" type="text/css" href="/static/css/swiper-3.4.0.min.css?v=2016123481123">
     61 <script src="/static/js/jquery.v2.1.1-min.js?v=2016123481123"></script>
     62 <script src="/static/js/swiper-3.4.0.jquery.min.js?v=2016123481123"></script>
     63 <script src="/static/js/progressbar.min.js?v=2016123481123"></script>
     64 <script src="/static/js/common.min.js?v=2016123481123"></script>
     65 <script src="/static/js/jquery.dateFormat.min.js?v=2016123481123"></script>
     66 <script src="/static/js/mui.min.js?v=2016123481123"></script>
     67 
     68 <div class="opt" style="z-index: 99;"></div>
     69 <div class="head-daohang">
     70     <table>
     71         <tbody>
     72         <tr>
     73             <td onclick="window.location.href='/'">慢钱首页</td><td onclick="window.location.href='/bao/list.html'">零钱理财</td>
     74         </tr>
     75         <tr>
     76             <td onclick="window.location.href='/product/index.html'">百万理财</td><td onclick="window.location.href='http://www.manqian.cn/master.html'">金牌理财师</td>
     77         </tr>
     78         <tr>
     79             <td onclick="window.location.href='http://m.toutiao.manqian.cn/'">慢钱头条</td><td onclick="window.location.href='http://www.manqian.cn/research/all_1.html'">投研中心</td>
     80         </tr>
     81         <tr>
     82             <td onclick="window.location.href='http://www.manqian.cn/subject.html'">热门资讯</td><td onclick="window.location.href='/user/index.html'">个人主页</td>
     83         </tr>
     84         </tbody>
     85     </table>
     86 </div>
     87 
     88 <!----------页面共用的错误提示------------>
     89 <div class="common-error">
     90     <p></p>
     91 </div>
     92 <script>
     93 
     94     //自动隐藏的错误提示框
     95     function ErrorOut(){
     96         $('.common-error').fadeOut();
     97     }
     98     function errorTip(msg, e) {
     99         e.stopPropagation();
    100         $('.common-error').find('p').text(msg);
    101         $('.common-error').show();
    102         setTimeout(ErrorOut,3000);
    103     }
    104     $('.common-error').click(function(e){
    105         e.stopPropagation();
    106     })
    107     $('body').click(function(){
    108         $('.common-error').fadeOut();
    109     })
    110 
    111     function result(code, msg) {
    112         var result = new Object();
    113         result.code = code;
    114         result.msg = msg;
    115         return result;
    116     }
    117 </script>
    118 
    119     <script src="/static/js/webviewbridge.min.js?v=2016123481123" type="text/javascript"></script>
    120 </head>
    121 
    122 
    123 <body class="f2bg">
    124 
    125 <div class="wrap">
    126     <div class="center-banner my-zichan-YE">
    127         <div class="my-zichan">
    128             <table>
    129                 <tbody>
    130                 <tr><td>资产总额(元)</td>
    131                 </tr>
    132                 <tr>
    133                     <td></td>
    134                 </tr>
    135                 </tbody>
    136             </table>
    137         </div>
    138     </div>
    139 
    140     <div class="center-menu my-zichan-YE2 mt10">
    141         <li>账户余额(元) <em></em> <button class="zichan-tixian zichan-tixian-red" id="withdraw">提现</button></li>
    142         <li>待收本金(元) <span></span></li>
    143         <li>待收收益(元) <span></span></li>
    144     </div>
    145 
    146     <div class="center-menu my-zichan-YE3 mt10">
    147         <li class="acticveBg-gray" onclick="window.location.href='/discountCoupon/list.html'">我的优惠券<span class="mui-icon mui-navigate-right"></span></li>
    148     
    149     </div>
    150 
    151 </div>
    152 
    153 </body>
    154 
    155 <script>
    156     $(function () {
    157       /*  $('#myCoupons').on("click", function () {
    158             WebViewBridge.send("coupons");
    159         });
    160 */
    161         $("#withdraw").click(function(){
    162             window.location.href="/asset/withdrawInfo.html";
    163         });
    164     })
    165 
    166 </script>
    167 
    168 </html>

    前面一大堆的代码不用管,只需要关注几个地方就好了,

    其中一个就是这里

    <script src="/static/js/webviewbridge.min.js?v=2016123481123" type="text/javascript"></script>

    这个就是将这个第三方集成进来,如果不懂的朋友,可以找做js的朋友帮忙。

    其次是这里
     <li class="acticveBg-gray" onclick="window.location.href='/discountCoupon/list.html'">我的优惠券<span class="mui-icon mui-navigate-right"></span></li>

    给这个定义一个ID,

    通过ID,我们可以写一个方法

    1  $('#myCoupons').on("click", function () {
    2             WebViewBridge.send("coupons");
    3         });

    然后通过webViewBridge.send();发送一个字符串过去,发送什么字符串,由自己决定,我这里传递这个,是方便我识别。

    好了,又回到原生页面中,

    找到这一段代码

     1 onBridgeMessage(message) {
     2 31         const {navigator} = this.props;
     3 32         if (message === "coupons") {
     4 33             if (navigator) {
     5 34                 navigator.push({
     6 35                     component: WebViewPage,
     7 36                     params: {
     8 37                         url: this.props.myCoupons,
     9 38                         title: Strings.MyCoupons,
    10 39                     },
    11 40                 });
    12 41             }
    13 42         } 
    14 43     }

    是不是瞬间明白了。是不是很简单。吃饭去了

    
    
    
  • 相关阅读:
    web自动化中的上传操作
    HTTP协议
    创建一个get测试
    下载安装
    unittest 介绍
    selenium常用操作
    video视频操作
    调用JavaScript
    下拉框操作
    弹窗操作
  • 原文地址:https://www.cnblogs.com/huangjialin/p/6169327.html
Copyright © 2011-2022 走看看