通过`jQuery.wechat`构建你的微信WEB应用

AbnerMing 发布于2019-08-21 10:20 / 2882人阅读

摘要：因为最近自己的产品要在微信公众号中推广，需要提供一些有意义的功能，于是被迫走上了支持微信这条不归路。的实现原理是，如果还没有启用成功，所有操作会进入排队，一旦启用成功后，则顺序执行如果启用失败，则永远不会执行。

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

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

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

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

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

bower install --save jquery-wechat

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

加载，那也是水一样的自然

你如果用了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();

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

更多详情，参考Github-Source

若要试用，请微信中打开jQuery.wechat-DEMO

如有问题, 大胆注册issue

云服务器 GPU云服务器我怎样绑定老公的微信免费的微信小程序怎么盗取别人的微信密码免费的微信防封域名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85341.html

一份最中肯的Java学习路线+资源分享（拒绝傻逼式分享）

摘要：因为某些原因，不方便在这里直接发送百度链接，关注我的微信公众号面试通关手册回复资源分享第一波即可领取。然后大家还有什么问题的话，可以在我的微信公众号后台面试通关手册给我说或者加我微信，我会根据自己的学习经验给了说一下自己的看法。这是一篇针对Java初学者，或者说在Java学习路线上出了一些问题（不知道该学什么、不知道整体的学习路线是什么样的）第一步：Java基础（一个月左右）推荐...

hearaway 2019-08-15 18:05 评论0 收藏0
PHP相关

摘要：的机器学习库的机器学习库，包括算法交叉验证神经网络等内容。在即将到来的大会上，她将和大家分享在机器学习领域的全新可能。入门总结入门相关，如安装配置基本使用等。基于 Swoole 开发 PHP 扩展 Swoole-1.9.7 增加了一个新特性，可以基于 Swoole 使用 C++ 语言开发扩展模块，在扩展模块中可以注册 PHP 内置函数和类。现在可以基于 Swoole 来编写 PHP ...

lewinlee 2019-06-28 14:39 评论0 收藏0
前端经典文章

摘要：上周末看这篇文章时，偶有灵光，所以，分享出来给大家一起看看前端面试四月二十家前端面试题分享请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。前端切图神器 avocode 有了这个神器，切图再也腰不酸，腿不疼了。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，...

lowett 2019-08-22 13:58 评论0 收藏0
微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

赵春朋 2019-08-29 11:20 评论0 收藏0