android jsBridge库 ios jsBridge库

###在vue中使用插件

  import Vue from 'vue'
  import JsBridge from 'jsBridge-plugin'
  
  Vue.use(JsBridge);

###在vue中使用

  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群891029429欢迎想一起学习进步的小伙伴~

另外方包最近开发了一款工具类的小程序方包工具箱」,功能包括:抖音、小红书、快手去水印,天气预报,小说在线免费阅读(内含上万部热门小说),历史今天,生成图片二维码,图片识别文字,ai伪原创文章,数字摇号抽奖,文字转语音MP3功能...

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

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

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

发表评论

您的电子邮箱地址不会被公开。

20 − = 12