1、首先在项目中创建一个JS ,命名为 bridge.js 代码如下:

//ios
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 = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
  }
  setupWebViewJavascriptBridge();
  
  //安卓注册事件监听
  function connectWebViewJavascriptBridge(callback) {
      if (window.WebViewJavascriptBridge) {
          callback(WebViewJavascriptBridge)
      } else {
          document.addEventListener(
              'WebViewJavascriptBridgeReady'
              , function() {
                  callback(WebViewJavascriptBridge)
              },
              false
          );
      }
  }
//注册回调函数,第一次连接时调用 初始化函数
 connectWebViewJavascriptBridge(function(bridge) {
       //初始化
      bridge.init(function(message, responseCallback) {
          //var data = {'Javascript Responds': 'Wee!'};
          responseCallback(data);
      });
      //Android调用js方法:functionInJs方法名称需要保持一致 ,并返回给Android通知
      bridge.registerHandler("functionInJs", function(data, responseCallback) {
          responseCallback(data);
      });
  })

2、在main.js 中引入.

/** VUE与APP交互 **/
import './util/bridge.js'

3、在.vue 模板中使用


<script>
export default {    
    data(){
        return{      
                                
        }
    },
    
    methods:{      
     
      //选择图片上传项处理
      clickUploadImg(key,item){
          if(item===undefined){ return false; } 
          let that = this;
          if(item=='拍照'){
            //拍照
            WebViewJavascriptBridge.callHandler('uploadImgPhoto',{'name':'拍照'},function(data) {
                  that.getAppUpImage(data);            
            });              
          }else{
            //从相册选择   
            WebViewJavascriptBridge.callHandler('uploadImgAlbumSelect', {'name':'选择图片'},function(data){
                  that.getAppUpImage(data);
            });           
          }
      },

      getAppUpImage(url){
        let data = JSON.parse(url);
        //this.$vux.alert.show({title:'提示',content:data});
        this.imageData.push(data.path);
        this.imageName.push(data.name);       
      }, 

    }    

}
</script>

 

Logo

前往低代码交流专区

更多推荐