使用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 flash激活
Oct 19 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
DOM 事件流详解
Jan 20 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
详解uniapp的全局变量实现方式
Jan 11 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
PHP7之Mongodb API使用详解
2015/12/26 PHP
php连接mysql数据库
2017/03/21 PHP
php-app开发接口加密详解
2018/04/18 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
JavaScript 代码压缩工具小结
2012/02/27 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
javascript操作向表格中动态加载数据
2020/08/27 Javascript
简介Django框架中可使用的各类缓存
2015/07/23 Python
vscode 远程调试python的方法
2017/12/01 Python
python requests 测试代理ip是否生效
2018/07/25 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
几个数据库方面的面试题
2016/07/01 面试题
文员岗位职责
2013/11/09 职场文书
超市端午节活动方案
2014/01/23 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
大一学生个人总结
2015/02/15 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
python状态机transitions库详解
2021/06/02 Python