微信公眾平臺使用JSSDK網頁調起掃碼並獲取掃碼資料（PHP）

阿新 • • 發佈：2019-01-19

微信公眾平臺使用JSSDK網頁調起掃碼並獲取掃碼資料

初學者，部分css樣式在網上扒下來的，功能實現了，程式碼很糙，非常糙，望海涵，也希望大神多指導

得到你的APPID與AppSecret
獲取到access_token與ticket
配置wx.config
呼叫掃碼
二維碼與條形碼處理
獲取返回值
關於蘋果端網頁掃碼調起的問題處理
2017年12月20日增加仿順豐側邊欄
最後

廢話不多說直接上程式碼：

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("你的ADPPID", "你的AppSecret");
$signPackage 
 = $jssdk->GetSignPackage();
//sample.php,獲取你的APPID與AppSecret傳遞到JSSDK處理
?>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><!-- 適應螢幕縮放等亂七八糟的-->
<meta name="format-detection" 
 content="telephone=no, email=no">
<title>這是標題啊</title>
<script src="vp.js" charset="utf-8"></script>
<link rel="stylesheet" href="swiper.min.css" media="screen" charset="utf-8">
<link rel="stylesheet" href="queryExp.css" media="screen" charset="utf-8">
</head>
<body class 
="page-query member-login-page">
        <header class="page-title">
        <a class="my-nav" href="javascript:void(0)"></a>
        <h1 class="title">這是名字啊</h1>
    </header>
    <section class="form-main">
        <!--<input id="waybillNoId" type="button" value="請輸入要查詢的單號" onclick="window.location.href='history.html?from=query'">-->
        <input id="waybillNoId" type="button" value="請輸入要查詢的單號" onclick="">
        <i  id="query"class="scan"></i>  <!-- 這裡是點選那個掃碼的圖片-->
    </section>
       <script src="jweixin-1.0.0.js"></script>
        <script type="text/javascript" src="jquery.js"></script> 
        <script type="text/javascript">
<!-- 這裡寫wx.config和wx.scanQRCode-->
      wx.config({//配置wx.config
     //debug: true,//除錯輸出需要的話就拿出來
      appId: '<?php echo $signPackage["appId"];?>',
      timestamp: <?php echo $signPackage["timestamp"];?>,
      nonceStr: '<?php echo $signPackage["nonceStr"];?>',
      signature: '<?php echo $signPackage["signature"];?>',
      jsApiList: [
      //要呼叫的介面全部寫在這
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',
        'translateVoice',
        'startRecord',
        'stopRecord',
        'onRecordEnd',
        'playVoice',
        'pauseVoice',
        'stopVoice',
        'uploadVoice',
        'downloadVoice',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType',
        'openLocation',
        'getLocation',
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',
        'scanQRCode',
        'chooseWXPay',
        'openProductSpecificView',
        'addCard',
        'chooseCard',
        'openCard'
      ]

  });
 wx.ready(function () {
    document.querySelector('#query').onclick = function () {//呼叫掃碼事件返回掃碼值
    wx.scanQRCode({
      needResult: 1,
      desc: 'scanQRCode desc',
      success: function (res) {
      alert(res.resultStr)//掃碼資料在這看
        }         
      }
    });
  };   
});

       </script>
    </body>
</html>

實際操作發現當掃描二維碼的時候沒有什麼問題，但是掃碼掃到條碼時會出現問題，下面貼上處理方法：


 if(res.resultStr.indexOf(',') > 0){
 //條形碼時返回的格式類似為【code128,123456789】      
     var dealserialNumber=res.resultStr.split(',')[1];          
     dealserialNumber = dealserialNumber.replace(/[^a-z\d]/ig, "");//處理條形碼掃描的字元
     location.href='接收結果頁面='+dealserialNumber;//掃描結果傳遞到的處理頁面
else{
//二維碼時
location.href='接收結果頁面='+res.resultStr;//掃描結果傳遞到的處理頁面
}

側邊欄：

<a class="sidenav" data-sidenav data-sidenav-toggle="#sidenav-toggle" >
<div class="sidenav-brand">
貨哪兒網
</div>
<div class="sidenav-header">
寄快遞      
</div>
<div class="sidenav-header">
查快遞      
</div>
<div class="sidenav-header">
我的快遞
</div>  
<div class="sidenav-header">
個性設定
</div>  
<div class="sidenav-header">
貨哪兒網服務     
</div> 
</a>

關於蘋果端掃碼，晚上看了下，說什麼網路請求之類的問題，要怎麼怎麼處理，我處理起來比較粗暴，所有的js檔案本地化，測試沒發現什麼的問題，不知道這樣處理是不是正確。效果如下圖所示：
這裡寫圖片描述

最後

希望大家多多留言交流，新手野生碼農，且寫且珍惜。有用的話頂一下吧、(╹▽╹)

微信公眾平臺開發網頁獲取使用者地理位置

在這篇微信公眾平臺開發教程中，我們將介紹如何在網頁中獲取使用者的地理位置資訊。本文分為以下二個部分：生成JS-SDK許可權驗證簽名使用地理位置介面獲取座標一、微信JS-SDK1. 獲得Access Token2. 獲取jsapi_ticket生成簽名之前必須先了解一下jsap

微信公眾平臺開發網頁授權獲取使用者基本資訊

如果使用者在微信中（Web微信除外）訪問公眾號的第三方網頁，公眾號開發者可以通過此介面獲取當前使用者基本資訊（包括暱稱、性別、城市、國家）。利用使用者資訊，可以實現體驗優化、使用者來源統計、帳號繫結、使用者身份鑑權等功能。請注意，“獲取使用者基本資訊介面是在使用者和公眾號產生訊息互動時，才能根據使用者Ope

微信公眾平臺開發網頁開發

以前寫過一篇《微信公眾平臺開發的一點收穫》，這一篇說說微信公眾平臺網頁開發的知識。微信公眾平臺應該是國內最大的開放平臺，對於技術開發人員來說，不管有沒有自己的公眾號，應該也要有一定的瞭解，其實只要有一個域名和虛擬主機，就基本上能夠嘗試著去開發。回顧上篇文章的知識點（1）上篇文章的內容可以理解為公眾號訊息開發，

微信公眾號開發之調起微信掃一掃介面

參考微信JS-SDK說明文件看到網上很多都說微信的說明文件很坑，在我看來，仔細閱讀的話，介紹還是很全的。1.首先在JSP頁面引入http://res.wx.qq.com/open/js/jweixin-1.1.0.js2.通過config介面注入許可權驗證配置wx.conf

微信公眾平臺開發之基於百度 BAE3.0 的開發環境搭建（採用 Baidu Eclipse）

轉載請標明出處<http://blog.csdn.net/bingtianxuelong/article/details/17843111>，謝謝！版本說明： V1: 2014-2-13更新，紅色字型代表最近一次更新的內容。

微信公眾平臺使用JSSDK網頁調起掃碼並獲取掃碼資料（PHP）

微信公眾平臺使用JSSDK網頁調起掃碼並獲取掃碼資料初學者，部分css樣式在網上扒下來的，功能實現了，程式碼很糙，非常糙，望海涵，也希望大神多指導得到你的APPID與AppSecret 獲取到access_token與ticket 配置wx.confi

微信公眾平臺網頁開發實戰--3.利用JSSDK在網頁中獲取地理位置（HTML5+jQuery）

fff .html 1.4 style minimum log fill rdquo 位置復制一份JSSDK環境，創建一份index.html文件，結構如圖7.1所示。圖7.1 7.1節文件結構在location.js中，封裝“getLoc

微信公眾平臺開發——為何不能在網頁調用微信jsapi？

什麽 ket 平臺使用 scrip ken 進行兩個 pro 說到這問題，相信大部分程序員老手都會輕蔑一笑，當然是跨域導致的啊！但是為了一些小白，我覺得還是很有必要再說一次的。首先介紹什麽是跨域，由於瀏覽器的同源策略，出於防範跨站腳本的攻擊，禁止客戶端腳本（主要是J

微信公眾平臺網頁開發實戰--3.利用JSSDK在網頁中獲取地理位置

複製一份JSSDK環境，建立一份index.html檔案，結構如圖7.1所示。圖7.1 7.1節檔案結構在location.js中，封裝“getLocation”介面，如下： 01 wxJSSDK.location = function(locationApi){

微信公眾平臺網頁開發實戰--1.微信分享一個網頁到朋友圈

微信開發 html5 jssdk 實戰網頁開發對微信的JSSDK進行封裝一下，創建一份類似的文件結構，增加index.html與shareApi.js文件，結構如圖3.3所示。圖3.3 3.2節文件結構另外，提醒讀者一下，wxJSSDK.js文件的JSSDK環境配置中，需要

Java微信公眾平臺開發之OAuth2.0網頁授權

col nts har 順序 pan getcount iba unionid syn 根據官方文檔點擊查看在微信公眾號請求用戶網頁授權之前，開發者需要先到公眾平臺官網中的“開發 - 接口權限 - 網頁服務 - 網頁帳號 - 網頁授權獲取用戶基本信息”的配置選項中，修改授權

微信公眾平臺開發（二）網頁授權

是否 color 平臺開發基本業務自動跳轉 str gpo 點擊微信公眾平臺OAuth2.0授權詳細步驟如下： 1. 用戶關註微信公眾賬號。2. 微信公眾賬號提供用戶請求授權頁面URL。3. 用戶點擊授權頁面URL，將向服務器發起請求4. 服務器詢問用戶是否同意授權

微信公眾平臺開發，模板消息，網頁授權，微信JS-SDK，二維碼生成（4）

支持 post 網頁信息行業使用步驟獲取公眾符號微信公眾平臺開發，模板消息，什麽是模板消息，模板消息接口指的是向用戶發送重要的服務通知，只能用於符合場景的要求中去，如信用卡刷卡通知，購物成功通知等等。不支持廣告營銷，打擾用戶的消息，模板消息類有固定的模板，每個

微信公眾平臺網頁登入授權多次重定向跳轉，導致code使用多次問題

背景：微信網站開發　　昨天我負責的一個專案忽然出現了一個十分詭異的bug，進行微信授權登入的時候請求code的時候安卓手機會多次重定向調轉我的介面接收code的介面（redirect_uri 微信請求調轉接收code的的介面，加了utl.encode()），也就是我這邊預設請求了多次這個介面，然而蘋果手機

微信公眾平臺開發 OAuth2.0網頁授權認證網頁授權獲取使用者基本資訊

一、什麼是OAuth2.0 官方網站：http://oauth.net/ http://oauth.net/2/ 權威定義：OAuth is An open protocol to allow secure authorization in a simple and

微信公眾平臺開發 OAuth2.0網頁授權

一、什麼是OAuth2.0 官方網站：http://oauth.net/ http://oauth.net/2/ 權威定義：OAuth is An open protocol to allow secure authorization in a si

微信公眾平臺網頁開發實戰--2.從手機相簿中選照片然後分享

通過對需求的瞭解，可以將其分解為：（1）微信端手機使用者，可以使用微信的JSSDK。（2）選取圖片，使用JSSDK的“chooseImage”，由於分享圖片時本地地址無法分享，因此還需要JSSDK的“uploadImage”。（3）分享到朋友圈，需要JSSDK的“o

微信公眾平臺開發 OAuth2.0網頁授權認證

一、什麼是OAuth2.0 官方網站：http://oauth.net/ http://oauth.net/2/ 權威定義：OAuth is An open protocol to allow secure authorization in a simple an

微信公眾平臺開發OAuth2.0網頁授權

本文章轉自方倍工作室：http://www.cnblogs.com/txw1958/p/weixin71-oauth20.html 一、什麼是OAuth2.0 官方網站：http://oauth.net/ http://oauth.net/2/ 權威定義：OA

Java微信公眾平臺開發(十五)--微信JSSDK的使用

轉自：http://www.cuiyongzhi.com/post/63.html 在前面的文章中有介紹到我們在微信web開發過程中常常用到的【微信JSSDK中Config配置】，但是我們在真正的使用中我們不僅僅只是為了配置Config而已，而是要在我們的專案中真正去使用微信JS-S

微信公眾平臺使用JSSDK網頁調起掃碼並獲取掃碼資料（PHP）

微信公眾平臺使用JSSDK網頁調起掃碼並獲取掃碼資料

最後

相關推薦