微信jsApI及微信分享对应在手机浏览器的调用总结。

摘录自别人的博客:

第一篇:微信内置浏览器的JsAPI(WeixinJSBridge续)

之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript
Interface)的文章,不过随着微信官方的调整,部分API已经不能直接使用,比如类似直接分享到朋友圈 WeixinJSBridge.invoke(‘shareTimeline‘,data,callback)
这样的功能,直接调用,会得到一个访问拒绝的response。后来重新调研了下,整理出来了一个WeixinAPI的Javascript类库,分享出来,如果你对微信公众平台开发感兴趣,应该对你有用。




/**!

 * 微信内置浏览器的Javascript API,功能包括:

 *

 * 1、分享到微信朋友圈

 * 2、分享给微信好友

 * 3、分享到腾讯微博

 * 4、隐藏/显示右上角的菜单入口

 * 5、隐藏/显示底部浏览器工具栏

 * 6、获取当前的网络状态

 * 7、调起微信客户端的图片播放组件

 *

 * @author zhaoxianlie(http://www.baidufe.com)

 */

var WeixinApi = (function () { 

    /* 这里省略了一堆代码……下面直接看调用接口 */

    return {

        ready           :wxJsBridgeReady,

        shareToTimeline :weixinShareTimeline,

        shareToWeibo    :weixinShareWeibo,

        shareToFriend   :weixinSendAppMessage,

        showOptionMenu  :showOptionMenu,

        hideOptionMenu  :hideOptionMenu,

        showToolbar     :showToolbar,

        hideToolbar     :hideToolbar,

        getNetworkType  :getNetworkType,

        imagePreview    :imagePreview

    };    

});

下面,我们先来看一下这些API都应该怎么使用,先从最简单的入手。

1、假如我希望一打开网页后,就隐藏掉右上角的PopUp菜单入口,并且隐藏掉浏览器下方的工具栏,同时还要获得当前的网络状态,那么,我们的代码可以这样来写:




// 所有功能必须包含在 WeixinApi.ready 中进行

WeixinApi.ready(function(Api){

    // 隐藏右上角popup菜单入口

    Api.hideOptionMenu();

    // 隐藏浏览器下方的工具栏

    Api.hideToolbar();

    // 获取网络状态

    Api.getNetworkType(function(network){

        // 拿到 network 以后,做任何你想做的事

    });

});

如示例代码中的注释所示,所有的功能执行必须放在 WeixinApi.ready 方法中执行,就好比你用jQuery的时候,通常都需要使用
jQuery(document).ready(function(){ })
一样。为什么要这样做?相信不用我解释大家都能明白,因为我们必须要保证在执行这些方法的时候,WeixinJsBridge
API已经被加入到WebView上了!

2、再来看一个有关分享的例子,假如用户在阅读我的文章(或在使用我的产品)的过程中,发现它很有意思或有价值,一般都会将其收藏或分享(给好友、朋友圈、微博等)出去,那现在我就希望能监测到用户的分享行为,比如:自定义用户可分享的内容、甚至是在用户分享之、分享被取消、分享失败、分享成功、以及整个分享操作过程结束,我们都去做点儿什么。那么,这个代码我们可以这样来写:




// 所有功能必须包含在 WeixinApi.ready 中进行

WeixinApi.ready(function(Api){

    // 微信分享的数据

    var wxData = {

        "imgUrl":‘http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg‘,

        "link":‘http://www.baidufe.com‘,

        "desc":‘大家好,我是Alien,Web前端&Android客户端码农,喜欢技术上的瞎倒腾!欢迎多交流‘,

        "title":"大家好,我是赵先烈"

    };

    // 分享的回调

    var wxCallbacks = {

        // 分享操作开始之前

        ready:function () {

            // 你可以在这里对分享的数据进行重组

        },

        // 分享被用户自动取消

        cancel:function (resp) {

            // 你可以在你的页面上给用户一个小Tip,为什么要取消呢?

        },

        // 分享失败了

        fail:function (resp) {

            // 分享失败了,是不是可以告诉用户:不要紧,可能是网络问题,一会儿再试试?

        },

        // 分享成功

        confirm:function (resp) {

            // 分享成功了,我们是不是可以做一些分享统计呢?

        },

        // 整个分享过程结束

        all:function (resp) {

            // 如果你做的是一个鼓励用户进行分享的产品,在这里是不是可以给用户一些反馈了?

        }

    };

    // 用户点开右上角popup菜单后,点击分享给好友,会执行下面这个代码

    Api.shareToFriend(wxData, wxCallbacks);

    // 点击分享到朋友圈,会执行下面这个代码

    Api.shareToTimeline(wxData, wxCallbacks);

    // 点击分享到腾讯微博,会执行下面这个代码

    Api.shareToWeibo(wxData, wxCallbacks);

});

3、当然,如果你的业务需求相当复杂,比如,你的产品就是一个微信网页游戏(类似“2048数字游戏微信版”),你希望用户分享出去的数据是一个网页截屏、或者需要将用户当前的游戏状态回传到服务器动态生成可分享的内容;那么这种情况我们又该怎么做呢?来看下面这个示例代码吧:




// 所有功能必须包含在 WeixinApi.ready 中进行

WeixinApi.ready(function(Api){

    // 分享的回调

    var wxCallbacks = {

        // 分享过程需要异步执行

        async : true,

        // 分享操作开始之前

        ready:function () {

            var self = this;

            // 假设你需要在这里发一个 ajax 请求去获取分享数据

            $.post(yourServerUrl,yourPostData,function(responseData){

                // 可以解析reponseData得到wxData

                var wxData = responseData;

                // 调用dataLoaded方法,会自动触发分享操作

                // 注意,当且仅当 async为true时,wxCallbacks.dataLoaded才会被初始化,并调用

                self.dataLoaded(wxData);

            });

        }

        /* cancel、fail、confirm、all 方法同示例2,此处略掉 */

    };

    // 用户点开右上角popup菜单后,点击分享给好友,会执行下面这个代码

    Api.shareToFriend({}, wxCallbacks);

});

唯一的区别就是在wxCallbacks中,增加了配置项async为true,表示这个分享过程是异步调用的,其实就是指的ready方法异步执行,在这种情况下,我们需要在ready方法中显式地调用wxCallbacks的dataLoaded方法,以保证分享过程能继续往下执行。也许你会发现,这个wxCallbacks中,根本就没有配置dataLoaded方法啊!是的,当async为true时,WeixinApi中我会自动对其进行初始化,dataLoaded方法需要一个参数,表示需要分享出去的数据!

4、当然,如果你非要去配置dataLoaded方法,也是没有问题的,你的配置也会被执行,不会被覆盖,执行顺序是:用户配置优先。

上面是直接给出使用方法,也许你现在开始关心每个方法的参数列表是什么样的了?我们以分享到朋友圈的方法为例,来看看参数都有哪些配置项:




/**

 * 分享到微信朋友圈

 * @param       {Object}    data       待分享的信息

 * @p-config    {String}    appId      公众平台的appId(服务号可用)

 * @p-config    {String}    imageUrl   图片地址

 * @p-config    {String}    link       链接地址

 * @p-config    {String}    desc       描述

 * @p-config    {String}    title      分享的标题

 *

 * @param       {Object}    callbacks  相关回调方法

 * @p-config    {Boolean}   async                   ready方法是否需要异步执行,默认false

 * @p-config    {Function}  ready(argv)             就绪状态

 * @p-config    {Function}  dataLoaded(data)        数据加载完成后调用,async为true时有用

 * @p-config    {Function}  cancel(resp)    取消

 * @p-config    {Function}  fail(resp)      失败

 * @p-config    {Function}  confirm(resp)   成功

 * @p-config    {Function}  all(resp)       无论成功失败都会执行的回调

 */

WeixinApi.shareToTimeline(data,callbacks);

分享给微信好友以及分享到腾讯微博的参数列表都一样,这里就不罗列了。

5、如果你的文章中有很多图片,那么,点击图片直接调起微信客户端自带的图片播放组件,那必然是一件好事;对此,你可以这样来做:




// 调起微信客户端的图片播放组件进行播放

WeixinApi.ready(function(Api){

    var srcList = [];

    $.each($(‘img‘),function(i,item){

       if(item.src) {

           srcList.push(item.src);

           $(item).click(function(e){

               // 通过这个API就能直接调起微信客户端的图片播放组件了

               Api.imagePreview(this.src,srcList);

           });

       }

    });

});

就这么一段儿简单的代码,一切都搞定了!不过,需要指出的是,Api.imagePreview的参数是会进行强检测的:




/**

 * 调起微信Native的图片播放组件。

 * 这里必须对参数进行强检测,如果参数不合法,直接会导致微信客户端crash

 *

 * @param {String} curSrc 当前播放的图片地址

 * @param {Array} srcList 图片地址列表

 */

function imagePreview(curSrc,srcList) ;

需要指出的是,微信公众平台对Android、iOS平台支持力度不统一,比较费劲,具体有:

  • iOS平台下,分享出去的数据wxData中,imageUrl可以是DataURI格式的;但在Android平台下,必须是全路径的图片地址

  • iOS平台下,分享的回调callback基本全都可以得到执行;但在Android平台下,分享到微信朋友圈的callback无法得到执行(ready方法除外)

  • iOS平台下,无法在非mp.weixin.qq.com域下的页面中通过WeixinJSBridge.invoke(‘profile‘)的方式打开某微信号的资料页面;Android平台下则可以通过<a
    href="weixin://contacts/profile/微信ID">的方式打开资料页;WinPhone下,则是通过<a
    href="weixin://profile/微信ID">的方式打开。

期待官方能早日实现各平台API的统一吧!!!

至于API内部是怎么实现的,如果感兴趣,那就看源码吧,使用过程中如遇到什么Bug,请来这里反馈。

为了便于Api的维护与共享,已将其放到Github上了,大家这里走起:https://github.com/zxlie/WeixinApi

第二篇 微信内置JsAPI之WeixinJSBridge

在微信上,通过公众平台推送给用户的文章,是在微信内部直接打开的,用的无外乎就是一个UIWebView控件(IOS上,Android上也差不多)。但特殊的是,微信官方在这里面加了一个默认的Js
API--WeixinJSBridge,通过它,能直接在该页面上做这些操作:

1、将文章分享到微信朋友圈

2、将文章直接发送给微信上的好友

3、将文章分享到腾讯微博

4、关注指定用户

以上这些操作,都是通过WeixinJSBridge.invoke接口来完成的,那么,这个WeixinJSBridge对象还有没有提供一些别的方法可以让我们来使用的?于是,我做了这么个测试,用来提取WeixinJSBridge对象中的其他接口:http://www.baidufe.com/demo/weixinjsapi.html 请用微信打开该网址,怕输入麻烦的话,可以扫描如下二维码:

如果你也是一个技术控,那就把下面这段儿代码拿过去,自己玩儿吧:




/**

 * 检测微信JsAPI

 * @param callback

 */

function detectWeixinApi(callback){

    if(typeof window.WeixinJSBridge == ‘undefined‘ || typeof window.WeixinJSBridge.invoke == ‘undefined‘){

        setTimeout(function(){

            detectWeixinApi(callback);

        },200);

    }else{

        callback();

    }

}

     

detectWeixinApi(function(){

    var html = [];

    for(var key in window.WeixinJSBridge) {

        var js = ‘WeixinJSBridge.‘ + key + ‘ = ‘ + window.WeixinJSBridge[key].toString();

        js = js_beautify(js); // 美化一下,看着舒服些

        html.push(‘<pre class="brush:js;toolbar:false;">‘ + js + ‘</pre>‘)

    }

     

    document.getElementById(‘WeixinJsApi‘).innerHTML = html.join(‘‘);

     

    // 代码高亮

    SyntaxHighlighter.highlight();

});

内容更新:

-----------------------------

比较多网友都在咨询这个微信内置API,在这里更新一下文章吧:这个Api大部分接口都被官方限制使用了,具体原因无外乎是为了安全、为了盈利!如果你也还在寻找这个接口的使用方法,估计也没有什么好的办法了。

另外,如果你是在做微信公众平台的话,我还写了另外一篇关于这个WeixinJSBridge
API的文章,里面有几个API是官方提供的,稳定可用,链接:http://www.baidufe.com/item/c4bacb3bd66930f2e43e.html  ,希望对你有用。

内容更新:2014

-----------------------------

在Android版本的微信环境中,依然可以通过如下两种方式进行微信(公众)号的推广:

1、<a
href="weixin://contacts/profile/微信号原始ID(如:gh_dd4b2c2ada8b)">Baidufe</a>

这种方法能直接打开该号的微信资料页,直接关注;但获取原始ID比较麻烦。

2、<a
href="weixin://contacts/profile/微信号(如:www_baidufe_com)">Baidufe</a>

这种方法会打开“加入到通讯录”的界面,然后再是资料页

第三篇:微信WeixinJSBridge API续

之前写了一篇关于这个WeixinJSBridge API的文章,文章地址 ,于是有很多网友都在过来咨询这个API的使用,在这里有必要跟大家再说一下:这个API在以前公布的部分接口被官方和谐掉很久了,
比如一键关注、分享给好友、分享到朋友圈等。当然,你可能会发现微信官方推送的一些文章还能使用这些功能,粗略估计,官方是对这个API增加了白名单控制,判断Referer,如果是微信官方的地址、或者是有合作的商家地址,则允许调用,否则,返回“access
denied”!

截止目前,笔者还没用发现还有什么办法能继续使用它!不过,官方和谐掉这个API其实也是说得过去的,因为在整个WebView的右上角,官方做了一个Navtive的按钮,点开以后,包括分享给好友、分享到朋友圈这样的功能都有,所以,官方也是在做一些引导。

当然,WeixinJSBridge这个API也并不是所有功能都被和谐掉了,相反,有好几个功能还是相当有用的,可以正常使用,比如:

1、隐藏微信网页右上角的按钮(...按钮):开发者可以用这个功能来禁止当前页面被分享

2、隐藏微信网页底部的导航栏(比如前进后退和刷新):这个导航栏会占用一定的区域,开发者可以认为用户不会用到它,将其隐藏掉

3、在微信网页中获取用户的网络状态:开发者可以利用这个API获得用户的网络状态,并提供不同的服务,比如视频类,在wifi下提供高清视频流,在2g网络下提供普通清晰视频流等等

下面分别通过简单的几行代码,说明这几个API的用法:

1、隐藏微信网页右上角的按钮




document.addEventListener(‘WeixinJSBridgeReady‘function onBridgeReady() {

    // 通过下面这个API隐藏右上角按钮

    WeixinJSBridge.call(‘hideOptionMenu‘);

});

           

document.addEventListener(‘WeixinJSBridgeReady‘function onBridgeReady() {

    // 通过下面这个API显示右上角按钮

    WeixinJSBridge.call(‘showOptionMenu‘);

});

2、隐藏微信网页底部的导航栏




document.addEventListener(‘WeixinJSBridgeReady‘function onBridgeReady() {

    // 通过下面这个API隐藏底部导航栏

    WeixinJSBridge.call(‘hideToolbar‘);

});

          

document.addEventListener(‘WeixinJSBridgeReady‘function onBridgeReady() {

    // 通过下面这个API显示底部导航栏

    WeixinJSBridge.call(‘showToolbar‘);

});

3、在微信网页中获取用户的网络状态




WeixinJSBridge.invoke(‘getNetworkType‘,{},function(e){

    // 在这里拿到e.err_msg,这里面就包含了所有的网络类型

    alert(e.err_msg);

});

e.err_msg的取值如下所示:

network_type:wifi         wifi网络
network_type:edge 非wifi,包含3G/2G
network_type:fail 网络断开连接
network_type:wwan 2g或者3g

可以戳这个链接测试一下:http://www.baidufe.com/demo/wxjsapi2.html

或者直接用微信扫描下面这个二维码:

以上!分享给需要用到的网友。

微信jsApI及微信分享对应在手机浏览器的调用总结。,布布扣,bubuko.com

时间: 2024-11-03 01:36:45

微信jsApI及微信分享对应在手机浏览器的调用总结。的相关文章

Mindjump-微信跳转浏览器功能源码,实现微信内自动跳转手机浏览器访问网页url

源码使用场景:1.用来实现微信自动跳转外部浏览器下载app2.用来实现微信内打开网页链接自动跳转浏览器访问指定页面3.防止网页链接由于被微信拦截,导致用户无法正常在微信内打开 源码说明: 适用安卓和苹果系统,支持任何网页链接.并且无论链接是否已经被微信拦截,均可实现微信内自动跳转浏览器打开. 生成的跳转链接具有极佳的防拦截效果. 源码体验: 1.复制分享链接(app下载页链接或网页链接),然后在浏览器(电脑和手机上都可以)中打开我们需要用到的 Mindjump 平台:http://www.min

web页面手机浏览器qq浏览器自带分享和微信浏览器自带分享的总结

我们公司有ios原生和安卓原生的app,后面新加H5的手机浏览器页面,页面需要分享.公司参照京东分享模式进行开发.本来想用h5和js一起写分享,后面发现每个浏览器都自带分享按钮,所以就用浏览器自带的分享按钮. 1.首先,qq浏览器是最简单,但是百度上最没有文档.qq浏览器打开页面,按分享按钮可以分享到qq好友.qq空间.朋友圈和微信好友,四种方式.但是分享必须自带自家产品的图片和标题,所以进行代码设置:如图: 设置这三者就可以把你想要的描述,标题和图片带过去.我是动态改变meta的内容的.(网上

分享!手机浏览器跳转微信一键关注公众号的方案

第三方浏览器打开微信的接口,微信只给部分合作平台开放了接口权限,任何第三方想调用只能是通过一些技术手段来请求接口,获取秘钥(ticket).那么如果我们想减少用户从外部关注公众的操作步骤应该怎么办呢?我们只要实现外部wap网页一键跳转微信打开指定页面的功能即可. 功能实现后可以实现从手机浏览器打开微信并跳转到指定网页,该网页可以是你的个人二维码,可以是公众号二维码当然也可以直接跳转到公众号关注页面,这个功能减少了用户等待,以前需要复制微信号然后打开微信点开添加按钮输入微信号等一系列操作,现只需要

微信JSAPI模式与浏览器类型安全访问

摘要: 微信浏览器是在微信安装时内置在微信中的,针对浏览器的类型我们可以设置相应的安全策略--仅允许在微信内置浏览器中打开.本文选自<微信企业号开发完全自学手册>. 1 JSAPI模式介绍 在介绍JSAPI模式之前,首先需要介绍一下微信内置浏览器.可能很多人注意到了,在打开微信"朋友圈"链接的时候会出现进度条,如图5.1所示,这实际上就是微信内置浏览器访问页面的进度.也就是说,"朋友圈"是通过微信内置的浏览器访问的手机页面,并且微信浏览器是在微信安装时内

使用微信JSSDK自定义微信分享标题、描述、和图标

最近做一个项目的时候用到微信的分享 ,实现定义分享标题,图片,了解到微信在发布JSSDK后,把包括自定义分享在内的众多网页服务接口进行了统一.如果要想自定义分享自己的网页信息给好友或朋友圈,就最好使用这个统一的网页服务接口. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 步

微信web开发自定义分享

php后台部分-微信类 /**************************************************************************微信自定义分享 开始************************************************************/ /** * 获取微信自定已分享配置参数包 * @author ganyuanjiang <[email protected]> * @createtime 2017-08-05 1

QQ 微信 新浪 无法 分享 收集

1.网络请求报错.升级Xcode 7.0发现网络访问失败.输出错误信息 The resource could not be loaded because the App Transport Security policy requires the use of a secure connection. 原因:iOS9引入了新特性App Transport Security (ATS).详情:App Transport Security (ATS)新特性要求App内访问的网络必须使用HTTPS协议

如何下载微信图文消息里的视频?在浏览器中打开保存到手机

刚刚看到别人分享在朋友圈里的文章里面有个视频,是微信公众平台内嵌视频,挺有意思的,想把它下载下来,那么,怎么提取微信图文消息里的视频呢? 研究了好一会,采用迂回术总算把微信图文里的视频保存到手机了 打开那个含有视频的图文消息,点击右上角的菜单,选“在浏览器中打开”,下图红色箭头所示 一般默认的浏览器都可以播放视频,播放的过程中会有一个下载的菜单,如下图箭头所示 点击下载就能把图文消息里的视频保存到手机中.当然有特殊情况,在苹果Safari浏览器中,视频右侧没有出现下载按钮,建议换用其他的

微信JSApi支付~集成到MVC环境后的最后一个坑(网上没有这种解决方案)

大叔第一人 之前写了关于微信的坑<微信JSApi支付~坑和如何填坑>,今天将微信的jsapi支付封装到了MVC环境里,当然也出现了一些新的坑,如支付参数应该是Json对象而不是Json字符串,这样也会应付引起“get_brand_wcpay_request:fail_invalid appid”这个大家都知道的异常,呵呵,解决方案网上说是“授权目录“,事实上,还有一种原因,那就是你的WeixinJSBridge.invoke方法里的参数应该是Json对象而不是字符串,这才是最重要的. 代码我们