使用jQuery.wechat构建微信WEB应用


Posted in Javascript onOctober 09, 2014

因为最近自己的产品要在微信公众号中推广,需要提供一些有意义的功能,于是被迫走上了支持微信这条不归路。

众所周知,腾讯是那样一个神奇的公司,他们的产品在商业上获得巨大成功,但文档真的很难令人恭维,诺大一个公众号开发平台,我竟然找不到真正的,关于web开发的官方文档,有的就是个别示例,剩下的...呵呵,有一个叫开发者交流互助的东东。

使用jQuery.wechat构建微信WEB应用

看完上面这个图后,有没有这样的感觉,一帮群众拼命的想知道发生了什么,但就是没有官方声明!o(∩_∩)o 哈哈

说了这么多,赶紧入正题,本期要讲的就是我痛苦中挣扎徘徊后写的jQuery.wechat,一个提供了统一API的、基于jQuery.promise的jQuery.plugin。希望能多少帮助到大家。

首先,安装那是相当的简单

bower install --save jquery-wechat

 如果不用bower的,自己从Github上下载、解压,那也是一样一样滴!
 
加载,那也是水一样的自然

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>

<script type="text/javascript" src="bower_components/jquery-wechat/dist/jquery-wechat.min.js"></script>

 你如果用了amd,cmd之类的延迟加载技术,想必你也是个行家,不用我再教你怎么配置了吧?
 
使用——简单、轻松、统一、爽!

启用jQuery.wechat功能
$.wechat.enable(); //So easy!

 因为整个插件是基于jQuery.promise的,所以你也可以给它一个链:

$.wechat.enable().done(function(){

    alert('已经启用成功');

}).fail(function(){

    alert('启用失败');

});

 考虑到目前单页技术(SPA)的广泛应用,工具类的设计必须考虑启用/停用机制,否则可能引起未知错误。
 
隐藏/显示菜单

$.wechat.hideMenu(); //隐藏菜单

$.wechat.showMenu(); //显示菜单

 启用jQuery.wechat之后,就可以随意调用如hideMenu之类的方法了,无需将其他方法写入enable的done回调之中。jQuery.wechat的实现原理是,如果jQuery.wechat还没有启用成功,所有操作会进入排队,一旦启用成功后,则顺序执行;如果启用失败,则永远不会执行。
 
隐藏/显示底部工具栏
$.wechat.hideToolbar(); //隐藏底部工具栏
$.wechat.showToolbar(); //显示底部工具栏

 打开扫描二维码界面
$.wechat.scanQRcode();

 打开图片预览工具

$.wechat.preview({

    current: 'http://xxx/img/pic001.jpg',  //进入预览模式后,直接显示这张图片

    urls: [

        'http://xxx/img/pic001.jpg',

        'http://xxx/img/pic002.jpg',

        'http://xxx/img/pic003.jpg',

        'http://xxx/img/pic004.jpg',

        'http://xxx/img/pic005.jpg',

        'http://xxx/img/pic006.jpg'

    ]                                      //所有要在预览模式下显示的图片

});

 获取网络状态

$.wechat.getNetworkType().done(function(response) {

    $('#network').text(response.split(':')[1]); 

});

response格式如下:

network_type:wifi    wifi网络

network_type:edge    非wifi,包含3G/2G

network_type:fail    网络断开连接

network_type:wwan    (2g或者3g)

 修改分享格式

每次看到别人的app分享出来的消息都带着精美的缩略图、适当的标题和描述,更有甚者消息下面还跟了一行小字指出该消息是由谁发送出来的;再看看你自己分享出去的消息,一个蓝色的默认空白图片,配着不搭调的标题,会不会奇怪是什么逻辑把他们塞进去的?

还好,咱们现在就来解决这个问题:

$.wechat.setShareOption({

    appid: 'xxxx',                                               //小标appid

    img_width: '60',

    img_height: '60',

    img_url: window.location.toString() + 'img/demo.jpg',        //缩略图

    title: 'DEMO',                                               //标题

    desc: 'The description is set from $.wechat.setShareOption', //描述

    link: function() {

        return window.location.toString();                       //消息分享出去后,用户点击消息打开的链接地址

    },

    callback: function(response) {

        alert(response);                                         //分享后的回调函数,常见的有成功和取消

    }

});

 具体参考如下截图:

使用jQuery.wechat构建微信WEB应用

该分享格式变更会影响发送给朋友、分享到朋友圈、分享到微博、发送邮件四项功能。当设置后,再点击右上角菜单键打开菜单后,选择前述四项中的任意一项,就能看到更改后的效果
 
关闭当前页

$.wechat.closeWindow();

 停用jQuery.wechat机制

$.wechat.destroy();

 停用后,所有功能自动重置回初始状态
 该功能在单页应用(SPA)中比较常用

Javascript 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
node+vue实现文件上传功能
May 28 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 #Javascript
get(0).tagName获得作用标签示例代码
Oct 08 #Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 #Javascript
Javascript获取当前日期的农历日期代码
Oct 08 #Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 #Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 #Javascript
javascript学习笔记(八)正则表达式
Oct 08 #Javascript
You might like
在字符串中把网址改成超级链接
2006/10/09 PHP
PHP简洁函数小结
2011/08/12 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python3遍历目录树实现方法
2015/05/22 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python读取表格类型文件代码实例
2020/02/17 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
社区消防工作实施方案
2014/03/21 职场文书
校园元旦活动总结
2014/07/09 职场文书
护士节活动总结
2014/08/29 职场文书
雨花台导游词
2015/02/06 职场文书