更新记录

0.0.4(2019-12-10)

解决了android webview localStorage缓存失败的问题

0.0.3(2019-12-02)

查看更多

原生插件通用使用流程:

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

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://ask.dcloud.net.cn/article/35763
iOS 离线打包原生插件另见文档 https://ask.dcloud.net.cn/article/35764


通过演示项目来了解功能

注意了:html5中必须加入(之前漏掉了) //用于h5接收ios的数据

setupWebViewJavascriptBridge(function(bridge) {

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

           data为收到的数据

    })

})

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)
}

//h5用于接收android的数据
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) {
                   console.log('JS responding with', data);
                   responseCallback(data);
               }
           });

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

               data为收到的数据

          });

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

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

            document.getElementById("show") = "send get responseData from java, data = " + responseData
        }
    );

}

第一步:下载演示项目,并打开项目,然后点击试用后者购买 image

第二步:选择购买或者试用,然后选择刚刚下载的演示项目; image 第三步:演示项目是没有appid的,需要点击获取image 第四步:要选择云插件,进行插件的配置 image

要自定义基座,自定义成功了之后,选择自定义c基座,才可以成功运行 然后就完成了,点击运行就可以了;

API接口介绍

1、_startGetData(url,result)_ url:需要加载的url; result:接收h5那边返回的数据;url为空会调用演示html; 例如: h5WebView.startGetData(url,result=>{

             this.h5ToAppMessage(result);

        })        

2、loadH5State(progress,fail)监听h5加载进度和状态的接口;

3、goBack(state) 判定h5返回的操作,1表示h5那边可以返回,并自动执行h5后退操作,2表示已到h5的首页了 下面是监听app返回操作的处理; onBackPress(options) {

        if(options.from=='navigateBack')
        {
            return false;
        }
        else
        {
            h5WebView.goBack(state=>{
                if(state==2)
                {
                    uni.navigateBack({

                    })
                }            
            })    
            return true;

        }
    },

4、sendMessage(res) 发送数据到h5页面; res格式可以自定义

导入自己的项目注意事项

1、该组件只支持.nvue页面;因为原生组件的扩展只能用再.nvue中; 2、运行项目的时候,要自定义基座,这是必须的,很重要; 3、如果提示该组件不存在,有两种可能,没有自定义基座,没有设置云插件

隐私、权限及商业化声明

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

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

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

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