apicloud apicloud

注册
查看: 13707|回复: 37

[APP开发技巧] 把wap装进APP,execScript实现远程wap页面调用微信分享

 

新手上路

UID:101973

主题:
2
帖子:
7
云币:
33

[APP开发技巧] 把wap装进APP,execScript实现远程wap页面调用微信分享

 
13707 37 | 发表于 2015-8-25 01:56:25 |阅读模式 | |
本帖最后由 entrust 于 2015-8-25 02:04 编辑

本人已经有一个wap站点,由于不会编程,因此无法自己重新在apicloud里做一套前端利用接口来实现微信的分享。因此直接利用apicloud的openFrame来调用远程wap页面,并实现在远程wap页面中点击按钮来触发微信分享接口,直接跳转到微信分享。由于在论坛上查找了一夜,发现关于微信分享的实现以及api.execScript实现远程与本地交互的内容太少,因此将研究出来的代码拿出来分享分享,抛砖引玉!
需求说明:
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接口的朋友们。给个赞吧。哈哈哈


1

查看全部评分

主题:
9
帖子:
197
云币:
1825

APICloud粉丝一周年

发表于 2015-8-25 08:39:38 |
谢谢分享

主题:
2
帖子:
5
云币:
7
发表于 2015-8-25 10:44:08 |
就是我想要的,谢谢分享

驾校小白

UID:147471

主题:
5
帖子:
30
云币:
59

APICloud粉丝一周年

发表于 2015-9-10 09:32:26 |
谢谢帮了我大忙

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-11-13 08:51:24 |
感谢分享

新手上路

UID:112383

主题:
10
帖子:
82
云币:
257
发表于 2015-12-15 16:25:38 |
终于找到了 感谢分享,我还研究了一个小时,怎么令iframe的内容改变时也将iframe的src也同时改变。
感谢分享,正好可以用到

驾校小白

UID:223670

主题:
6
帖子:
17
云币:
31
发表于 2015-12-20 12:37:09 |
很有用。感谢楼主分享~~~

主题:
51
帖子:
206
云币:
112

一周年圣诞节

发表于 2015-12-20 20:53:30 |

谢谢分享

主题:
15
帖子:
95
云币:
152
发表于 2016-1-28 16:04:55 |
学习学习

驾校小白

UID:234685

主题:
10
帖子:
30
云币:
59
发表于 2016-2-17 16:22:41 |
我为什么在wap页面中调用不到本地wx()的方法呢?
另外,//由于直接在index上使用openFrame,因此只需name root。这里的name为啥是root  不是main?
1234下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表