当前位置:首页 > jQuery技术文章 > 使用jQuery.wechat构建微信WEB应用

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

  • 发布时间:
  • 作者:码农之家原创
  • 点击:106

这篇文章主要知识点是关于jQuery.wechat、WEB应用、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF作者:(印) 乔希 (Joshi,V.) 著,
立即下载

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

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

众所周知,腾讯是那样一个神奇的公司,他们的产品在商业上获得巨大成功,但文档真的很难令人恭维,诺大一个公众号开发平台,我竟然找不到真正的,关于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)中比较常用

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

深入理解JS函数stack size计算方法

展开 +

收起 -

jQuery 相关电子书
学习笔记
网友NO.229247

jQuery编写网页版2048小游戏

大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起来会遇到各种问题。比如,在最后判断游戏是否结束的时候,我写的语句语法是对的,但就是不执行。最后通过对视频源码的分析对比,发现原作者写的一个setTimeout定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕。-_-||。最后还是很高兴能写出来,也改进了一些源代码的不足。 这篇博客并不是详细的讲解,只是大致介绍函数的作用,其中实现的细节注释中有解释,网上的这个源码有点乱,如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴) 思路 这个小游戏可……

网友NO.192929

基于Layer+jQuery的自定义弹框

目的:XXXX项目中,很多的弹窗是利用freemarker的网页标签追加的形式实现的,网页弹框只是将隐藏的div显示出来,这样会使网页在预加载时速度变慢,增加页面加载和响应时间 解决方法如下:已分中心管理的添加分中心弹框实现机制为例 1.弹框页面部分的html代码和css抽离 html : html/configure/layer-win/_group-add-layer.html css : css/common/componnentWin.css 自定义弹窗通用样式 子层html: _group-add-layer.html !DOCTYPE htmlhtmlheadmeta charset="UTF-8"titlegroup Add/title/headlink rel="stylesheet" type="text/css" href="../../../js/lib/datePicker/skin/WdatePicker.css" /link rel="stylesheet" type="text/css" href="../../../css/common/componnentWin.css" /body ····/bodyscript type="text/javascript" src="../../../js/jquery-1.9.1.js"/scriptscript type="text/javascript" src="../../../js/lib/layer/layer.js"/scriptscript type="text/javascript" src="../../../js/scooper/scooper.tool.xiacy.js"/scripts……

网友NO.896860

jquery星级插件、支持页面中多次使用

效果图如下: css所需背景图片: 二话不说,帖代码: html代码 div class="xing" span 总体评价:font color="#CC3300" size="-1"*/font/spandiv class="rating-wrap" ul id="xing1" lia href="javascript:;" data-rate-value="10" data-hint="很差" title="很差" class="one-star" /a/li lia href="javascript:;" data-rate-value="20" data-hint="差" title="差" class="two-stars " /a/li lia href="javascript:;" data-rate-value="30" data-hint="还行" title="还行" class="three-stars " /a/li lia href="javascript:;" data-rate-value="40" data-hint="好" title="好" class="four-stars" /a/li lia href="javascript:;" data-rate-value="50" data-hint="很好" title="很好" class="five-stars" /a/li /ul /div span class="xing1"点击星星开始打分/span /div divclass="xing" span 广告效果:font color="#CC3300"size="-1"*/font/spandiv class="rating-wrap" ulid="xing2" lia href="javascript:;" data-rate-value="10" data-hint="很差" title="很差" class="one-star" /a/li lia href="javascript:……

网友NO.925545

Jquery焦点图实例代码

本文实例讲述了Jquery焦点图实例代码。分享给大家供大家参考。具体如下: 对于很多建站的朋友来讲,焦点图并不陌生,一般的企业站,门户站都会用到焦点图。我们平时在写html代码的时候,很多人为了省时省力,对于焦点图都是在网上下载一些人家写好的代码,直接套上去即可,很多时候我自己也是这样来的。因为一个焦点图有html布局,css样式调试和最关键的 javascript语句的编写。这些都是一个很麻烦的过程。 今天我就以实例讲解,手把手教你如何写Jquery焦点图。Jquery是js封装的框架,让js的语法变得简单,很多知名网站都在用这个框架。这里星仔为了语法的简单,让大部分网友能看懂,也引用Jquery框架。 长话短说,我直接贴出源代码,和对应的注释。具体代码如下: !DOCTYPE html html head titlefocus code powered by boyxing.com/title script type="text/javascript" s……

网友NO.943159

20款非常优秀的 jQuery 工具提示插件 推荐

因此,今天这篇文章向大家推荐的20款优秀的 jQuery Tooltip 插件就是用于帮助你制作漂亮的工具提示效果。 1. Dynamic tooltip 2. jGrowl 3. jQuery Horizontal Tooltips Menu Tutorials 4. Coda Popup Bubble 5. The Tooltip 6. TipTip 7. (mb)Tooltip 8. vTip 9. Awesomeness 10. jQuery Ajax Tooltip 11. Digg-style post sharing tool with jQuery 12. Input Floating Hint Box 13. Simpletip 14. qTip 15. Orbital Tooltip 16. Tooltip 17. tipsy 18. Easiest jQuery Tooltip Ever 19. Shiny Tooltips 20. BeautyTips ……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757