脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>因为最近自己的产品要在微信公众号中推广,需要提供一些<code>有意义</code>的功能,于是被迫走上了支持微信这条不归路。</p> <p>众所周知,腾讯是那样一个神奇的公司,他们的产品在商业上获得巨大成功,但文档真的很难令人恭维,诺大一个公众号开发平台,我竟然找不到<code>真正的,关于web开发的</code>官方文档,有的就是个别示例,剩下的...呵呵,有一个叫<code>开发者交流互助</code>的东东。</p> <p><span class="img-wrap"><img data-src="/img/bVc9TP" src="/img/bVc9TP" alt="微信文档" style="cursor: pointer; display: inline;"></span></p> <p>看完上面这个图后,有没有这样的感觉,一帮群众拼命的想知道发生了什么,但就是没有官方声明!o(∩_∩)o 哈哈</p> <p>说了这么多,赶紧入正题,本期要讲的就是我痛苦中挣扎徘徊后写的<a rel="nofollow" href="http://leftstick.github.io/jquery-wechat/" target="_blank">jQuery.wechat</a>,一个提供了统一<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>的、基于<a rel="nofollow" href="http://api.jquery.com/Types/#Promise" target="_blank">jQuery.promise</a>的<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>.plugin。希望能多少帮助到大家。</p> <h2 id="articleHeader0">首先,安装那是相当的简单</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="bower install --save jquery-wechat " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>bower <span class="hljs-keyword">install</span> <span class="hljs-comment">--save jquery-wechat</span> </code></pre> <blockquote> <p>如果不用bower的,自己从<a rel="nofollow" href="https://github.com/leftstick/jquery-wechat/archive/master.zip" target="_blank">Github</a>上下载、解压,那也是一样一样滴!</p> </blockquote> <h2 id="articleHeader1">加载,那也是水一样的自然</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;text/javascript&quot; src=&quot;bower_components/jquery/dist/jquery.min.js&quot;></script><br /> <script type=&quot;text/javascript&quot; src=&quot;bower_components/jquery-wechat/dist/jquery-wechat.min.js&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"bower_components/jquery/dist/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"bower_components/jquery-wechat/dist/jquery-wechat.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <blockquote> <p>你如果用了<code>amd</code>,<code>cmd</code>之类的延迟加载技术,想必你也是个行家,不用我再教你怎么配置了吧?</p> </blockquote> <h2 id="articleHeader2">使用——简单、轻松、统一、爽!</h2> <h3 id="articleHeader3">启用<code><a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>.wechat</code>功能</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.wechat.enable(); //So easy! " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>$.wechat.enable(); <span class="hljs-comment">//So easy!</span> </code></pre> <p>因为整个插件是基于<a rel="nofollow" href="http://api.jquery.com/Types/#Promise" target="_blank">jQuery.promise</a>的,所以你也可以给它一个链:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.wechat.enable().done(function(){ alert('已经启用成功'); }).fail(function(){ alert('启用失败'); }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>$.wechat.enable().done(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ alert(<span class="hljs-string">'已经启用成功'</span>); }).fail(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ alert(<span class="hljs-string">'启用失败'</span>); }); </code></pre> <blockquote> <p>考虑到目前单页技术(<a rel="nofollow" href="http://en.wikipedia.org/wiki/Single-page_application" target="_blank">SPA</a>)的广泛应用,工具类的设计必须考虑<code>启用/停用</code>机制,否则可能引起未知错误。</p> </blockquote> <h3 id="articleHeader4">隐藏/显示菜单</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.wechat.hideMenu(); //隐藏菜单 $.wechat.showMenu(); //显示菜单 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>$.wechat.hideMenu(); <span class="hljs-comment">//隐藏菜单</span> $.wechat.showMenu(); <span class="hljs-comment">//显示菜单</span> </code></pre> <blockquote> <p>启用<code><a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>.wechat</code>之后,就可以随意调用如<code>hideMenu</code>之类的方法了,无需将其他方法写入<code>enable</code>的<code>done</code>回调之中。<code>jQuery.wechat</code>的实现原理是,如果<code>jQuery.wechat</code>还没有启用成功,所有操作会进入排队,一旦启用成功后,则顺序执行;如果启用失败,则永远不会执行。</p> </blockquote> <h3 id="articleHeader5">隐藏/显示底部工具栏</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.wechat.hideToolbar(); //隐藏底部工具栏 $.wechat.showToolbar(); //显示底部工具栏 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>$.wechat.hideToolbar(); <span class="hljs-comment">//隐藏底部工具栏</span> $.wechat.showToolbar(); <span class="hljs-comment">//显示底部工具栏</span> </code></pre> <h3 id="articleHeader6">打开扫描二维码界面</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.wechat.scanQRcode(); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>$.wechat.scanQRcode(); </code></pre> <h3 id="articleHeader7">打开图片预览工具</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.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' ] //所有要在预览模式下显示的图片 }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>$.wechat.preview({ current: <span class="hljs-symbol">'http</span>:<span class="hljs-comment">//xxx/img/pic001.jpg', //进入预览模式后,直接显示这张图片</span> urls: [ <span class="hljs-symbol">'http</span>:<span class="hljs-comment">//xxx/img/pic001.jpg',</span> <span class="hljs-symbol">'http</span>:<span class="hljs-comment">//xxx/img/pic002.jpg',</span> <span class="hljs-symbol">'http</span>:<span class="hljs-comment">//xxx/img/pic003.jpg',</span> <span class="hljs-symbol">'http</span>:<span class="hljs-comment">//xxx/img/pic004.jpg',</span> <span class="hljs-symbol">'http</span>:<span class="hljs-comment">//xxx/img/pic005.jpg',</span> <span class="hljs-symbol">'http</span>:<span class="hljs-comment">//xxx/img/pic006.jpg'</span> ] <span class="hljs-comment">//所有要在预览模式下显示的图片</span> }); </code></pre> <h3 id="articleHeader8">获取网络状态</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.wechat.getNetworkType().done(function(response) { $('#network').text(response.split(':')[1]); }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>$.wechat.getNetworkType().done(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">response</span>) </span>{ $(<span class="hljs-string">'#network'</span>).text(response.split(<span class="hljs-string">':'</span>)[<span class="hljs-number">1</span>]); }); </code></pre> <p><code>response</code>格式如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="network_type:wifi wifi网络 network_type:edge 非wifi,包含3G/2G network_type:fail 网络断开连接 network_type:wwan (2g或者3g) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">network_type:</span>wifi wifi网络 <span class="hljs-string">network_type:</span>edge 非wifi,包含<span class="hljs-number">3</span>G/<span class="hljs-number">2</span>G <span class="hljs-string">network_type:</span>fail 网络断开连接 <span class="hljs-string">network_type:</span>wwan (<span class="hljs-number">2</span>g或者<span class="hljs-number">3</span>g) </code></pre> <h3 id="articleHeader9">修改分享格式</h3> <p>每次看到别人的app分享出来的消息都带着精美的缩略图、适当的标题和描述,更有甚者消息下面还跟了一行小字指出该消息是由<code>谁</code>发送出来的;再看看你自己分享出去的消息,一个蓝色的默认空白图片,配着不搭调的标题,会不会奇怪是什么逻辑把他们塞进去的?</p> <p>还好,咱们现在就来解决这个问题:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.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); //分享后的回调函数,常见的有成功和取消 } }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>$.wechat.setShareOption({ <span class="hljs-attr">appid</span>: <span class="hljs-string">'xxxx'</span>, <span class="hljs-comment">//小标appid</span> img_width: <span class="hljs-string">'60'</span>, <span class="hljs-attr">img_height</span>: <span class="hljs-string">'60'</span>, <span class="hljs-attr">img_url</span>: <span class="hljs-built_in">window</span>.location.toString() + <span class="hljs-string">'img/demo.jpg'</span>, <span class="hljs-comment">//缩略图</span> title: <span class="hljs-string">'DEMO'</span>, <span class="hljs-comment">//标题</span> desc: <span class="hljs-string">'The description is set from $.wechat.setShareOption'</span>, <span class="hljs-comment">//描述</span> link: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">window</span>.location.toString(); <span class="hljs-comment">//消息分享出去后,用户点击消息打开的链接地址</span> }, <span class="hljs-attr">callback</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">response</span>) </span>{ alert(response); <span class="hljs-comment">//分享后的回调函数,常见的有成功和取消</span> } }); </code></pre> <p>具体参考如下截图:</p> <p><span class="img-wrap"><img data-src="/img/bVc9TQ" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="分享消息" style="cursor: pointer;"></span></p> <blockquote> <p>该分享格式变更会影响<code>发送给朋友</code>、<code>分享到朋友圈</code>、<code>分享到微博</code>、<code>发送邮件</code>四项功能。当设置后,再点击右上角菜单键打开菜单后,选择前述四项中的任意一项,就能看到更改后的效果</p> </blockquote> <h3 id="articleHeader10">关闭当前页</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.wechat.closeWindow(); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>$.wechat.closeWindow(); </code></pre> <h3 id="articleHeader11">停用<code>jQuery.wechat</code>机制</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$.wechat.destroy(); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>$.wechat.destroy(); </code></pre> <blockquote> <p>停用后,所有功能自动重置回初始状态<br /> 该功能在单页应用(<a rel="nofollow" href="http://en.wikipedia.org/wiki/Single-page_application" target="_blank">SPA</a>)中比较常用</p> </blockquote> <p>更多详情,参考<a rel="nofollow" href="https://github.com/leftstick/jquery-wechat" target="_blank">Github-Source</a></p> <p>若要试用,请微信中打开<a rel="nofollow" href="http://leftstick.github.io/jquery-wechat/" target="_blank">jQuery.wechat-DEMO</a></p> <p>如有问题, 大胆注册<a rel="nofollow" href="https://github.com/leftstick/jquery-wechat/issues" target="_blank">issue</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过