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

 众所周知,腾讯是那样一个神奇的公司,他们的产品在商业上获得巨大成功,但文档真的很难令人恭维,诺大一个公众号开发平台,我竟然找不到真正的,关于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);                                         //分享后的回调函数,常见的有成功和取消
    }
});

 

 具体参考如下截图:

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

复制代码 代码如下:

$.wechat.closeWindow();

 

 停用jQuery.wechat机制

复制代码 代码如下:

$.wechat.destroy();

时间: 2024-07-28 13:30:06

使用jQuery.wechat构建微信WEB应用的相关文章

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

因为最近自己的产品要在微信公众号中推广,需要提供一些有意义的功能,于是被迫走上了支持微信这条不归路. 众所周知,腾讯是那样一个神奇的公司,他们的产品在商业上获得巨大成功,但文档真的很难令人恭维,诺大一个公众号开发平台,我竟然找不到真正的,关于web开发的官方文档,有的就是个别示例,剩下的...呵呵,有一个叫开发者交流互助的东东. 看完上面这个图后,有没有这样的感觉,一帮群众拼命的想知道发生了什么,但就是没有官方声明!o(∩_∩)o 哈哈 说了这么多,赶紧入正题,本期要讲的就是我痛苦中挣扎徘徊后写

使用CSS3+jquery.js 实现微信抽奖转盘效果

为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖jquery的动画效果插件,旋转角度插件. 不废话 贴源码: PS:该动画不支持IE10及以下(11没测 应该也不支持,想要全兼容访问jquery版本-详见第一行连接),其他浏览器测试可用.UC,微信内核测试可用. (DEMO附件在下方,需wamp环境.)   <!--最基本的结构-->   <div class="demo">         <img id="di

使用jQuery UI库开发Web界面的简单入门指引_jquery

一.jQuery UIjQuery UI 是以jQuery 为基础的开源JavaScript 网页用户界面代码库.包 含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很 好交互性的web 应用程序. jQuery UI 的官网网站为:http://jqueryui.com/ jquery-ui-x.xx.x.custom.zip .里面目录结构如下: 1.css,包含与jQuery UI 相关的CSS 文件: 2.js,包含jQuery UI 相关的JavaScrip

jQuery+PHP实现微信转盘抽奖功能的方法_jquery

本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div class="demo"> <div id="disk"></div> <div

jQuery表格插件:帮助Web设计者驾御HTML表格

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这些插件很多都包含详细的教程. jQuery 表格插件 Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧. Chromatab

利用免费JS框架构建强大web接口界面

现今,随着web应用方面提供了日益丰富的免费工具.代码等,构建web应用已经变得越来越流行.一些资源已经被开发出来,并经过测试,所以你可以用来快速地增加应用特性.一个典型的例子是script.aculo.us(或者scriptaculous)网站,该网站提供了用于构建强大web应用的javascript库,重要的是这些资源都是免费的.本周,我们将带你对该网站和它提供的资源进行亲密接触. 它是什么? Scriptaculous是一种用于构建动态web 2.0接口的框架.它使用了另外一个称为prot

使用Jersey和Apache Tomcat构建RESTful Web服务

RESTful Web 服务简介 REST 在 2000 年由 Roy Fielding 在博士论 文中提出,他是 HTTP 规范 1.0 和 1.1 版的首席作者之一. REST 中最 重要的概念是资源(resources),使用全球 ID(通常使用 URI)标识.客户端 应用程序使用 HTTP 方法(GET/ POST/ PUT/ DELETE)操作资源或资源集. RESTful Web 服务是使用 HTTP 和 REST 原理实现的 Web 服务.通常,RESTful Web 服务应该定义

利用GoAhead构建嵌入式web应用

1 简介 廉价的硬件,功能强大的32操作系统,以及无处不在的因特网,它们一起促成了网络应用和设备的飞速增长.大量的设备连接到网络上,于是人们希望通过一种通用.熟悉.快捷的方式来访问和控制它们.嵌入式web服务器正好迎合了这种需求,它们嵌入在网络设备之中,使用标准的浏览器就可以远程访问和控制它们. 然而,并不是所有的web服务器都可以担当如此重任,我们需要的是一个强大,安全,标准的,而且最好是久经考验的嵌入式web服务器.这里将要介绍的GoAhead嵌入式web服务器能够满足所有这些需求,包括西门

微信web开发者工具怎么用?

   微信web开发者工具是一款由微信公众平台最新发布的开发工具,该工具的发布对于开发者来说,简直就是福音;开发人员通过该软件可方便快捷的在PC电脑端完成开发与测试,而一些用户在初次使用该软件时,不知道如何使用,所以小编为大家带了微信web开发工具的使用方法,需要的用户可参考下!   微信web开发者工具怎么使用 1.微信web开发者工具下载,并安装 2.启动微信web开发者工具 3.登录微信公众号,进入web开发者工具,绑定个人微信号 4.通过个人微信号,登录微信web开发者工具 5.从微信公