api微信内置浏览器js_微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记

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

下面&＃xff0c;咱们先来看一下这些API都应该怎么使用&＃xff0c;先从最简单的入手。git

一、假如我但愿一打开网页后&＃xff0c;就隐藏掉右上角的PopUp菜单入口&＃xff0c;而且隐藏掉浏览器下方的工具栏&＃xff0c;同时还要得到当前的网络状态&＃xff0c;那么&＃xff0c;咱们的代码能够这样来写&＃xff1a;github

如示例代码中的注释所示&＃xff0c;全部的功能执行必须放在 WeixinApi.ready 方法中执行&＃xff0c;就比如你用jQuery的时候&＃xff0c;一般都须要使用 jQuery(document).ready(function(){ }) 同样。为何要这样作&＃xff1f;相信不用我解释你们都能明白&＃xff0c;由于咱们必需要保证在执行这些方法的时候&＃xff0c;WeixinJsBridge API已经被加入到WebView上了&＃xff01;ajax

二、再来看一个有关分享的例子&＃xff0c;假如用户在阅读个人文章(或在使用个人产品)的过程当中&＃xff0c;发现它颇有意思或有价值&＃xff0c;通常都会将其收藏或分享(给好友、朋友圈、微博等)出去&＃xff0c;那如今我就但愿能监测到用户的分享行为&＃xff0c;好比&＃xff1a;自定义用户可分享的内容、甚至是在用户分享之、分享被取消、分享失败、分享成功、以及整个分享操做过程结束&＃xff0c;咱们都去作点儿什么。那么&＃xff0c;这个代码咱们能够这样来写&＃xff1a;浏览器

三、固然&＃xff0c;若是你的业务需求至关复杂&＃xff0c;好比&＃xff0c;你的产品就是一个微信网页游戏(相似“2048数字游戏微信版”)&＃xff0c;你但愿用户分享出去的数据是一个网页截屏、或者须要将用户当前的游戏状态回传到服务器动态生成可分享的内容&＃xff1b;那么这种状况咱们又该怎么作呢&＃xff1f;来看下面这个示例代码吧&＃xff1a;服务器

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

四、固然&＃xff0c;若是你非要去配置dataLoaded方法&＃xff0c;也是没有问题的&＃xff0c;你的配置也会被执行&＃xff0c;不会被覆盖&＃xff0c;执行顺序是&＃xff1a;用户配置优先。网络

上面是直接给出使用方法&＃xff0c;也许你如今开始关心每一个方法的参数列表是什么样的了&＃xff1f;咱们以分享到朋友圈的方法为例&＃xff0c;来看看参数都有哪些配置项&＃xff1a;app

分享给微信好友以及分享到腾讯微博的参数列表都同样&＃xff0c;这里就不罗列了。

五、若是你的文章中有不少图片&＃xff0c;那么&＃xff0c;点击图片直接调起微信客户端自带的图片播放组件&＃xff0c;那必然是一件好事&＃xff1b;对此&＃xff0c;你能够这样来作&＃xff1a;

就这么一段儿简单的代码&＃xff0c;一切都搞定了&＃xff01;不过&＃xff0c;须要指出的是&＃xff0c;Api.imagePreview的参数是会进行强检测的&＃xff1a;

须要指出的是&＃xff0c;微信公众平台对Android、iOS平台支持力度不统一&＃xff0c;比较费劲&＃xff0c;具体有&＃xff1a;

iOS平台下&＃xff0c;分享出去的数据wxData中&＃xff0c;imageUrl能够是DataURI格式的&＃xff1b;但在Android平台下&＃xff0c;必须是全路径的图片地址

iOS平台下&＃xff0c;分享的回调callback基本全均可以获得执行&＃xff1b;但在Android平台下&＃xff0c;分享到微信朋友圈的callback没法获得执行(ready方法除外)

iOS平台下&＃xff0c;没法在非mp.weixin.qq.com域下的页面中经过WeixinJSBridge.invoke(&＃39;profile&＃39;)的方式打开某微信号的资料页面&＃xff1b;Android平台下则能够经过的方式打开资料页&＃xff1b;WinPhone下&＃xff0c;则是经过的方式打开。

期待官方能早日实现各平台API的统一吧&＃xff01;&＃xff01;&＃xff01;

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

为了便于Api的维护与共享&＃xff0c;已将其放到Github上了&＃xff0c;你们这里走起&＃xff1a;https://github.com/zxlie/WeixinApi