h5与android和ios分享方法调用

最新推荐文章于 2025-01-02 15:16:08 发布

qq_40194097

最新推荐文章于 2025-01-02 15:16:08 发布

阅读量1.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40194097/article/details/113105339

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何实现H5页面调用Android和iOS的分享功能。首先，通过在H5页面中定义regShareBtns(options)方法，当用户在iOS上点击时，该方法会被触发并传递参数。在app.js中，调用了安卓和iOS的分享接口。在具体的文章页面（如article.vue）中，可以调用这个分享方法。另一方面，客户端可以通过在H5中定义的shareActionDone事件来调用H5的方法，该事件在H5的mounted阶段被暴露到window对象上，以便于客户端调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，h5调用android,与ios方法（按钮在A，ios中点击，h5调用点击事件传参数）
定义点击事件为regShareBtns(options)方法

创建app.js,调用安卓ios的分享方法，并传参（options）

 initShare(content,options){
    // h5给客户端传递的参数
    const can={
      share_title:content.title,
      share_desc :content.desc,
      share_icon:content.cover,
      share_url:content.url,
      btn_wx:options.btn_wx,
      btn_sns:options.btn_sns,
      btn_qq:options.btn_qq,
      btn_weibo:options.btn_weibo,
      btn_browser:options.btn_browser,
      btn_copy:options.btn_copy,
      btn_reload:options.btn_reload,
      btn_fav:options.btn_fav,
    }
    
    if(user.getEquipmentInfo()=='ios'){
      window.webkit.messageHandlers.regShareBtns.postMessage(can) //调用原生ios方法window.webkit.messageHandlers
    }else{     
      window.android.regShareBtns(JSON.stringify(can)) //安卓收不到对象，转字符串  调用原生安卓方法window.android
    }
    
  },

有分享的页面调用分享方法比如分享文章
articel.vue

import app from '@/utils/app.js' //引入app.js
created(){
	 article({
       code:this.$getParam.getQueryString("code"),
      }).then(res =>{
        console.log(res)
        this.content= res.article
        this.actionShare()//在加载数据前调用方法，防止客户端拿不到options
      })
},
methods:{
	 actionShare(){
        let options={
          btn_wx:1, //显示分享至微信好友
          btn_sns:1 ,//显示分享到朋友圈
          btn_qq:1,//显示分享到qq
          btn_weibo:1,// 显示分享到weibo
          btn_browser:1,// 显示用浏览器打开按钮
          btn_copy:1 ,//显示复制链接
          btn_reload:1,// 显示刷新按钮
          btn_fav:this.content.is_fav==0?1:2 
         }
        app.initShare(this.content,options)
      },
}

2.客户端调用h5方法点击事件在h5中（shareActionDone暴露在window中）

创建app.js,写h5分享完执行事件

shareActionDone(options,code,content){   
    if(options.from==="btn_fav"){
      // alert(JSON.stringify(content) )
      action({
         code:code,
         act:'fav'
         }).then(res =>{
           if(content.is_fav==1)
           Toast("取消收藏")
           else
           Toast("收藏成功")
          content.is_fav = content.is_fav==0?1:0;
          this.initShare(content,options)
          
         })
   }
  }

在mounted中将事件暴露在window中供客户端调用



mounted() {
      window.shareActionDone=(options,_this)=>{
        app.shareActionDone(options,this.$route.query.code,this.content)
      } 
    },