频道导航

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

2018-12-30 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了使用jQuery.wechat构建微信WEB应用，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

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

代码如下:

如果不用bower的，自己从Github上下载、解压，那也是一样一样滴！

加载，那也是水一样的自然
<div class="codetitle"><a style="CURSOR: pointer" data="87987" class="copybut" id="copybut87987" onclick="doCopy('code87987')"> 代码如下:

<div class="codebody" id="code87987">
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js">
<script type="text/javascript" src="bower_components/jquery-wechat/dist/jquery-wechat.min.js">

你如果用了amd，cmd之类的延迟加载技术，想必你也是个行家，不用我再教你怎么配置了吧？

使用——简单、轻松、统一、爽！

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

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

代码如下:

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

隐藏/显示菜单
<div class="codetitle"><a style="CURSOR: pointer" data="5482" class="copybut" id="copybut5482" onclick="doCopy('code5482')"> 代码如下:

<div class="codebody" id="code5482">
$.wechat.hideMenu(); //隐藏菜单
$.wechat.showMenu(); //显示菜单

启用jQuery.wechat之后，就可以随意调用如hideMenu之类的方法了，无需将其他方法写入enable的done回调之中。jQuery.wechat的实现原理是，如果jQuery.wechat还没有启用成功，所有操作会进入排队，一旦启用成功后，则顺序执行；如果启用失败，则永远不会执行。

隐藏/显示底部工具栏
$.wechat.hideToolbar(); //隐藏底部工具栏
$.wechat.showToolbar(); //显示底部工具栏

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

打开图片预览工具

代码如下:

显示这张图片 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' ] //所有要在预览模式下显示的图片 });

获取网络状态

代码如下:

response格式如下：

代码如下:

修改分享格式

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

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

代码如下:

缩略图 title: 'DEMO',//标题 desc: 'The description is set from $.wechat.setShareOption',//描述 link: function() { return window.location.toString(); //消息分享出去后，用户点击消息打开的链接地址 }, callback: function(response) { alert(response); //分享后的回调函数，常见的有成功和取消 } });

具体参考如下截图：

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

关闭当前页
<div class="codetitle"><a style="CURSOR: pointer" data="82646" class="copybut" id="copybut82646" onclick="doCopy('code82646')"> 代码如下:

<div class="codebody" id="code82646">
$.wechat.closeWindow();

停用jQuery.wechat机制

代码如下:

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

原文链接：https://www.f2er.com/jquery/57604.html

jQuery.wechat 微信微信微信构建构建构建

上一篇：使用jQuery将多条数据插入模态框的下一篇：分享一款基于jQuery的视频播放插件

猜你在找的jQuery相关文章

《锋利的jQuery》笔记：插件的使用和写法

jQuery插件的种类 1、封装对象方法这种插件是将对象方法封装起来，用于对通过选择器获取的...

作者：前端之家时间：2020-12-28

jQuery插件开发入门

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。入门编写一个jQuery...

作者：前端之家时间：2020-12-28

jquery.roundabout.js实现3D图片层叠旋转木马切换

最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。兼容...

作者：前端之家时间：2020-12-28

jQuery效果之jQuery实现图片的依次加载图片

css代码： js代码：

作者：前端之家时间：2020-12-28

jQuery之deferred对象详解

一、什么是deferred对象？开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...

作者：前端之家时间：2020-12-28

jQuery插件开发进阶

jQuery插件开发模式软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...

作者：前端之家时间：2020-12-28

jQuery 实现邮箱输入自动提示功能：（一）

记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...

作者：前端之家时间：2020-12-28

jQuery插件之上传文件ajaxfileupload.js源码与使用

在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...

作者：前端之家时间：2020-12-28

jQuery效果之封装一个文章图片弹出放大效果

首先先搭写一个基本的格式：然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...

作者：前端之家时间：2020-12-28

《从零开始学习jQuery》：用jQuery操作元素的属性与样式

元素属性和Dom属性简介对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...

作者：前端之家时间：2020-12-28

最新文章