vue项目中使用jsBridge技术和原生APP通信

  import {setJsBridge} from 'jsBridge-plugin'  //引入插件

  //vue生命周期钩子
  ready : function(){ 
      
      //注册js方法 让原生调用
      setJsBridge((bridge)=>{
          
          bridge.registerHandler(this.$jsBridgeCmd.publish, (data, responseCallback)=>{
              $("#app_resp").html("点击了提交按钮");
              this.publish().then((id)=>{
                  responseCallback(id);
              })
          });
          
      });
  }
  
  methods: {
        //点击事件方法或者其他场景
        addImage(){
            //调用原生方法  需要原生那边也注册方法
            this.$jsBridge.callHandler(
                this.$jsBridgeCmd.chooseImage 
                , { name : '添加图片' }
                , (responseData) =>{
                    //回调函数
                }
            );
        },
  }

工作流程：

①App的webview加载指定url，加载成功后加载文件PluginConfig.json并将其对应的plugin实例化并保存到map中，再读取LDJSBridge.js.txt文件内容，然后App通过调用js方法的形式加载内容（webview.load）。

②前端调用mapp.xxx.xxx调用JSAPI。

③JSAPI调用相应的方法，然后拼装url(ldjsbridge://xxx)，最后创建一个iFrame并添加。

④App端拦截js的iFrame得到一个url，然后拦截获取类名，方法名，参数等，最后根据找到相应的plugin实例并处理。

⑤App处理完成后调用js的execGlobalCallback方法，js找到相应的回调方法并执行操作。

总结：App端通过webview调用js方法和App拦截js创建iFrame来实现webview和js的交互，核心是封装在app端的js协议，保证了交互的安全性。

jsBridge参考文章：
https://zhuanlan.zhihu.com/p/438763800
https://blog.csdn.net/yqq577/article/details/116527772
https://m.php.cn/article/419335.html
https://github.com/yjj5855/vue-jsBridge


本期内容就到这里啦～以上内容均可在 方包博客「http://fang1688.cn」 网站直接搜索名称访问哦。欢迎感兴趣的小伙伴试试，如果本文对您有帮助，也请帮忙点个 赞 + 在看 啦！❤️
欢迎大家加入方包的「优派编程」学习圈子，和多名小伙伴们一起交流学习，向方包 1 对 1 提问、跟着方包做项目、领取大量编程资源等。Q群「763256989」欢迎想一起学习进步的小伙伴~
另外方包最近开发了一款工具类的小程序「方包工具箱」,功能包括：抖音、小红书、快手去水印，天气预报，小说在线免费阅读（内含上万部热门小说），历史今天，生成图片二维码,图片识别文字，ai伪原创文章，数字摇号抽奖，文字转语音MP3功能...

送福利！关注下方的公众号：「优派编程」回复「资料」，即可获得软件app下载资源和python、java等编程学习资料！


   
点击卡片关注「优派编程」
定期分享 it编程干货

‍‍‍ ⬇️ 点击链接阅读原文直达 方包博客