【原创】微信公众号与HTML 5混合模式揭秘4--jssdk调用微信扫一扫_html/css_WEB-ITnose
微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK
微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片
微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置
在JSSDK中,为开发者提供了一个扫一扫API服务。
还是先创建一份scanQRCode.js文件,为“wxJSSDK”增加“scanQRCode”的相关API,代码如下:
01 wxJSSDK.scanQRCode= function(codeApi){02 if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕03 if(codeApi){04 //其他代码略05 }else{06 console.log("缺少配置参数");07 }08 }else{09 console.log("抱歉,wx没有初始化完毕,请等待wx初始化完毕,再调用扫一扫接口10 服务。");11 }12 13 }
复制一份JSSDK环境,创建一份index.html文件,结构如图8.2所示。
图8.2
8.2.2 调用微信扫一扫接口
微信扫一扫的调用相对简单,官方示例代码如下:
01 wx.scanQRCode({02 needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,03 scanType:["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有04 success: function (res) {05 varresult = res.resultStr; // 当needResult 为 1 时,扫码返回的结果06 }07 });
在scanQRCode.js中,封装“scanQRCode”,如下:
01 wxJSSDK.scanQRCode= function(codeApi){02 if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕03 if(codeApi){04 codeApi.scanQRCode && wx.scanQRCode({05 needResult:codeApi.scanQRCode.needResult, // 默认为0,扫描结果由微06 信处理,1则直接返回扫描结果,07 scanType:codeApi.scanQRCode.scanType || ["qrCode","barCode"], // 可08 以指定扫二维码还是一维码,默认二者都有09 success: function (res) {10 codeApi.scanQRCode.success&&11 codeApi.scanQRCode.success(res);12 }13 });14 }else{15 console.log("缺少配置参数");16 }17 }else{18 console.log("抱歉,wx没有初始化完毕,请等待wx初始化完毕,再调用扫一扫接口19 服务。");20 }21 }
在index.html文件中,增加“扫一扫”按钮,代码结构,如下:
01 02 <htmllang>03 04 <metacharset>05 <meta name="viewport" content="width=device-width, initial-scale=1.0,06 minimum-scale=1,maximum-scale=1.0, user-scalable=no">07 <title>第8章 8.2节微信扫一扫</title>08 <!--依赖文件:jQuery-->09 <scriptsrc>10 <!--依赖文件:微信的JSSDK源文件-->11 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>12 <!--依赖文件:coolie-->13 <scriptsrc>14 <!--JSSDK的环境-->15 <scriptsrc>16 <!--引入检测API的扫一扫服务-->17 <scriptsrc>18 <style>19 input{20 width: 100%;21 padding: 0.2em;22 background-color: #5eb95e;23 font-size: 1.4em;24 background-image:linear-gradient(to bottom, #62c462, #57a957);25 background-repeat: repeat-x;26 color: #ffffff;27 text-align: center;28 text-shadow: 0 -1px 0 rgba(0, 0, 0,0.25);29 border-radius: 0.3em;30 }31 #info{32 border-left: 3px solid #03a9f4;33 background-color: #5eb95e;34 color: #ffffff;35 border-radius: 0.3em;36 text-shadow: 0 -1px 0 rgba(0, 0, 0,0.25);37 }38 </style>39 40 41 <h1 id="">:)</h1>42 <b style="font-size: 3em"> 微信扫一扫接口!</b><br><br>43 <input type="button" value="点击扫一扫" id="scanQRCode"><br><br>44 45 </scriptsrc></scriptsrc></scriptsrc></scriptsrc></metacharset></htmllang>

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
