使用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 相关文章推荐
JS拖动技术 关于setCapture使用
Dec 09 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
使用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
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
日期 时间js控件
2009/05/07 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
在Python中使用成员运算符的示例
2015/05/13 Python
python中__call__内置函数用法实例
2015/06/04 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
员工培训心得体会
2013/12/30 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
《观舞记》教学反思
2014/04/16 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
2015年技术员工作总结
2015/04/10 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电