【apicloud】通过execScript实现wap调用APP中的微信分享

翻滚的胖子
2019-10-17 22:57:06
APP开发
APICloud

感谢【entrust】的分享

本文主要说明wap套壳封装的APP如何调取APP中的微信分享模块，同理，可运用在其他功能的调取上。

需求说明：
1、触发微信分享的按钮必须在远程wap端，即在openFrame调用的远程页面上。本地app只用到index页面做入口。
2、远程wap分享的是动态的title和url，能够将远程wap的动态参数传递给本地index的wx()方法上。
实现：
主要利用api.execScript 来进行调用本地的wx()，以及将远程的url传递到本地。

代码：
本地的index代码：
用api.openFrame来调用远程wap站点页面
   api.openFrame({
      name: 'main',
      //url: 'html/main.html',
      url:'http://share.weicare.im',
      bounces: true,
      rect: {
            x: 0,
            y: headerPos.h,
            w: headerPos.w,
            h: mainPos.h
      }

   });

在本地的index页面写入微信分享方法 wx()
      <script>
            function wx(title,description,thumb,contentUrl) {
            var v_title = title;
            var v_description = description;
            var v_thumb = thumb;
            var v_contentUrl = contentUrl;
                     //alert("正在使用微信进行分享！");
                     var wx = api.require('wx');
                     wx.isInstalled(function(ret, err) {
                              if (ret.installed) {
                                    alert("当前设备已安装微信客户端");
                              } else {
                                    alert('当前设备未安装微信客户端');
                              }
                     });
                     wx.auth({
                              apiKey : 'wx7493d962199c36b6'
                     }, function(ret, err) {
                              if (ret.status) {
                                    //    alert(JSON.stringify(ret));
                                    alert("授权成功");
                                    wx.shareWebpage({
                                             apiKey : 'wx7493d962199c36b6',
                                             scene : 'timeline',
                                             title : v_title,
                                             description : v_description,
                                             thumb : v_thumb,
                                             contentUrl : v_contentUrl
                                    }, function(ret, err) {
                                             if (ret.status) {
                                                      alert('分享成功');
                                             } else {
                                                      alert(err.code);
                                             }
                                    });
                              } else {
                                    alert(err.code);
                              }
                     });
            }
      </script>

由于openFrame调用的是站点的首页，而楼主需要的是进入wap站点的文章内容页才开始出发分享，因此在出发本地的wx()时，必须将动态的url等值传回到index中。
function wx(title,description,thumb,contentUrl)  将wx.shareWebpage所需的几个变量值标题，简介，图片，url 在执行前声明一下，以便从wap远程调回。

远程站点上的文章内容页代码：
//在远程wap站点的页面上组合url
<?php
$vUrl="http://share.weicare.im/a/?read=".$urlid."_".$union_uid."";
//echo $vUrl;
?>

<script>

  apiready = function() {
            };
            function wx() {
                     api.execScript({
                              name : 'root',  //由于直接在index上使用openFrame，因此只需name root。
                              script : "wx('<?php echo$title;?>','<?php echo$title;?>','<?php echo$images;?>','<?php echo$vUrl;?>')" //这里的四个值分别在本地页面出发方法后由php传给js再传给本地的index。
                     });
            }

</script>

//由于楼主的wap站点是同时在微信公众号和app里使用，因此在远程的wap内容页按钮上做了一个判断，当浏览器为微信内置浏览器时，隐藏分享按钮（因为微信直接右上角分享），当从APP进入wap站点时，显示出页面上的分享按钮。
<?php $weixin = $_SERVER['HTTP_USER_AGENT'];
$weixin = stripos($weixin,"MicroMessenger");
if($weixin == null){
echo "<div class='button' onclick='wx()'>分享</div>";

}?>
希望这个能够帮助有需要实现远程与本地交互和利用站点调用本地原生api接口的朋友们。给个赞吧。哈哈哈