更新记录

0.1.2(2020-05-14)

1、修复了iOS里面包含UIWebView的问题

0.1.1(2020-04-20)

1、支持跨域(post/get)请求 2、支持加载本地html;

查看更多

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios


-原生Webview与app通讯工具使用说明

特点:1、可实现app与h5进行交互通讯,数据格式为json;

2、可监听进度,加载失败的的回调;

3、h5我这边提供了vue.js 和html5 两种中配置方式;

4、通讯技术采用的是jsbridge,这个大家可以百度;

注意:

uni-app端:

1、 页面要为nvue(必需的),因为原生组件只支持nvue;

2、要参考我提供的demo;

h5端:

要参考我提供的html进行测试;文件在测试demo中pages->html中;

使用方法

uni-app端;

     <CL-WebH5View 
      class="webView" //要设置组件的大小,不支持百分比;
      ref="webView" />

mounted() {
        //获取对象;
        h5WebView = this.$refs.webView;
        //加载进度和加载失败的监听;
        h5WebView.loadH5State(progress=>{

                    console.log("进度"+progress);

                },fail=>{

                    //code,错误code,msg错误描述;
                    console.log('加载失败'+fail);               
            }       
        )

        //加载链接和监听消息的接口;
        //url为加载连接地址(服务器的地址),要保证格式正确;
        h5WebView.startGetData(url, result => {
            //接收到h5端发送的数据;格式为json对象,数据内容自己可以自定义
             this.showData(result); 
        })

        //加载本地html;
        //path 为html路径
            h5WebView.showLoactionHtml(path, result => {

                this.showData(result);    

            })   

        //具体的参考demo;

    },
    methods: {

            showData: function(info) {

          //显示收到的消息;
          uni.showModal({
            content: JSON.stringify(info)
          })

            },

            //解析得到的数据
            //app发送数据到h5;
            sendDataInfo: function() {
                //发送消息到h5页面;
                要发送json字符串;
                h5WebView.sendMessage(JSON.stringify({
                    'code': 1,
                     msg: '这是我发给h5的数据'
                }));

            }
        }

h5端:(具体的参考我提供的demo,demo包含这个)

html:

 //这段js保证input框不被键盘遮挡;
 

     if (/Android/gi.test(navigator.userAgent)) {
        // 检测userAgent是否为Android
        window.addEventListener('resize', function () {
      if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
        // 判断当前active的元素是否为input/ textarea
        window.setTimeout(function () {
          document.activeElement.scrollIntoViewIfNeeded()
          // 原生方法,滚动至需要显示的位置
        }, 0)
      }
    })
     }
 



   //发送数据到app
     function sendAppData(){

          var data = {type:"back_app",data:'这是我发送的数据,app你收到了吗'};
          sendData(data)
    }

    //发送数据到app
    function sendData(data){

         //call native method
        window.WebViewJavascriptBridge.callHandler(
            'postMessageWeb'
            , data
            , function(responseData) {

             }
        );
    }

     function setupWebViewJavascriptBridge(callback) {
        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 = 'https://__bridge_loaded__';
        document.documentElement(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

      setupWebViewJavascriptBridge(function(bridge) {
       bridge.registerHandler('functionInJs', function(data, responseCallback) {

             console.log("JS Echo called with:", data)

                  document.getElementById("show") = ("h5收到ios端app发送的数据 = " + data);
                })
      })  

 function connectWebViewJavascriptBridge(callback) {  

    if (window.WebViewJavascriptBridge) {
              callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function() {
                     callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    }

    connectWebViewJavascriptBridge(function(bridge) {
      bridge.init(function(message, responseCallback) {
            console.log('JS got a message', message);
            var data = {
                'Javascript Responds': '测试中文!'
            };

            if (responseCallback) {

                responseCallback(data);
            }
        });

        bridge.registerHandler("functionInJs", function(data, responseCallback) {

               document.getElementById("show") = ("h5收到app发过来的数据啦: = " + data);
                });
     })

Vue.js中


import bridge from './JSbridge.js'
export default{
mounted() {

    this.getAPPDate();
   },
methods:{
    function sendAppData(){

        var data = {type:"back_app",data:'这是我发送的数据,app你收到了吗'};
        sendData(data)

    },

    //h5发送数据到app
    function  sendData(data){

            bridge.callHandler('postMessageWeb',data,(responseData)=>{

                   alert('获取app响应数据:'+responseData);
            })

      },    
          //h5收到app的数据
     function getAPPDate(){

              bridge.registerHandler('functionInJs', (data, responseCallback) => {

                   alert('收到'+ data)

                })

      } 

}

隐私、权限及商业化声明

说明:除收费原生SDK插件外,其他插件或示例工程默认均为MIT开源协议。如提供了github地址,并在github上专门标注了开源协议,则以github标注为准。

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问