本人查閱了許多資料，網上大部分的描述都比較模棱兩可，我這里就將我的想法分享出來提供大家學習。

在這里實現一碼多用的功能指的是 同個二維碼在不同端掃出的結果不一樣 例如微信掃跳出 微信小程序，支付寶掃跳出 支付寶小程序，內部APP掃碼跳 內部頁面等等。

1、實現流程

1.1、流程圖

#####1.2、詳細流程步驟

1、 是生成二維碼，鏈接是前端H5界面的鏈接

2、 用戶掃一掃的時候就會根據掃碼的APP進行判斷，其中微信掃一掃如果要 跳轉小程序 的話需要在 微信公眾平臺 配置，而且小程序 暫不支持個人類型小程序開啟此功能。相關配置操作如下：

• 微信公眾平臺鏈接 https://mp.weixin.qq.com/wxamp/devprofile/

• 配置二維碼規則跳轉二維碼
  

• 二維碼規則： 微信api里說的很清楚了
  1、二維碼規則的域名須通過ICP備案的驗證。
  2、支持http、https、ftp開頭的鏈接（如：http://wx.qq.com、https://wx.qq.com/mp/、https://wx.qq.com/mp?id=123）。
  3、一個小程序帳號可配置不多于10個二維碼前綴規則。

• 前綴占用規則：
  開發者可選擇是否占用符合二維碼匹配規則的所有子規則。如選擇占用，則其他帳號不可申請使用滿足該前綴匹配規則的其他子規則。
  如：若開發者A配置二維碼規則：https://wx.qq.com/mp?id=123，并選擇“占用所有子規則“，其他開發者將不可以配置滿足前綴匹配的子規則如https://wx.qq.com/mp?id=1234。

**3、**內置APP需要在掃碼端進行判斷對應掃碼內容并進行處理。如果識別到對應的 H5頁面 和 帶有對應的參數 就跳轉到 對應APP內部頁面，如果是其他頁面則跳轉至單頁面，展示復制并打開瀏覽器即可查看網站/展示對應的內容，這樣就實現了APP掃碼跳轉功能。

2、后端實現

2.1、準備工作

• 下載的網站鏈接 https://packagist.org/packages/yansongda/pay?query=Endroid%5CQrCode
• 選擇生成二維碼包，這里我推薦使用 endroid/qr-code

2.2、代碼實現

• 根據內容安裝依賴包后，我們開始封裝生成二維碼服務類

<?phpnamespace app\common\service; use Endroid\QrCode\ErrorCorrectionLevel; use Endroid\QrCode\QrCode; use think\Hook;class QrcodeService {/*** 生成二維碼* @param string $content 生成二維碼的內容* @param int $userId 用戶ID，默認為0* @param string $logoImg 中間logo的圖片本地路徑* @param int $logoWidth 中間logo的寬度* @param int $logoHeight 中間logo的長度* @return mixed* @throws \Endroid\QrCode\Exception\InvalidPathException*/public function create($content, $userId = 0, $logoImg = 0, $logoWidth = 50, $logoHeight = 50){if(!$logoImg) $logoImg = ASSETS_PATH . 'img/qrcode.png';$qrCode = new QrCode($content);$qrCode->setSize(300);$qrCode->setWriterByName('png');$qrCode->setMargin(10);$qrCode->setEncoding('UTF-8');$qrCode->setErrorCorrectionLevel(ErrorCorrectionLevel::HIGH());$qrCode->setForegroundColor(['r' => 0, 'g' => 0, 'b' => 0, 'a' => 0]);$qrCode->setBackgroundColor(['r' => 255, 'g' => 255, 'b' => 255, 'a' => 0]); // $qrCode->setLabel('Scan the code', 16, __PUBLIC__.'/../assets/fonts/noto_sans.otf', LabelAlignment::CENTER());$qrCode->setLogoPath($logoImg); //設置LOGO$qrCode->setLogoSize($logoWidth, $logoHeight);$qrCode->setRoundBlockSize(true);$qrCode->setValidateResult(false);$qrCode->setWriterOptions(['exclude_xml_declaration' => true]);// Directly output the QR codeheader('Content-Type: ' . $qrCode->getContentType());// Save it to a file$dir = 'qrCode/' . date('Ymd', time()) . '/';if (!file_exists($dir)) mkdir($dir, 0777, true);//文件名稱$dirUrl = $dir . 'qrCode.png';$url = PUBLIC_PATH . $dirUrl;if ($userId) $url = PUBLIC_PATH . $dir . $userId . '-qrCode.png';//寫入本地$qrCode->writeFile($url);//保存到OSS$urlOss = Hook::listen("upload_oss", $url, null, true);//刪除本地圖片和文件夾if (file_exists($url)) {unlink($url);rmdir($dir);}return $urlOss;}}

上面代碼可以根據自己業務需求進行修改，我這里將二維碼生成后 上傳到OSS

• 創建個人二維碼

<?phpnamespace app\api\controller;use app\common\controller\Api; use app\common\service\QrcodeService; use app\common\service\RedisService; use app\common\service\WeChatService;/*** 二維碼接口* @package app\api\controller*/ class Code extends Api { public function createSelfQrCode(){$redis = RedisService::connect();$user = $this->auth->getUser();$userId = $user['id'];$avatar = $user['avatar'];//判斷Redis是否存在$imgUrl = $redis->get(RedisService::SU_QRCODE_SELF_USER . $userId);if (!$imgUrl) {//調用中轉頁面，type=1 個人二維碼$h5Domain = db('sulink_setting')->where('id', 1)->value('h5_domain');$path = $h5Domain . 'pages/index/info/index?user_id=' . $userId . '&type=1';$imgUrl = (new QrcodeService)->create($path, $userId);//存一次Redis$redis->set(RedisService::SU_QRCODE_SELF_USER . $userId, $imgUrl);}$this->success(MSG_OK, ['is_enterprise_certification' => $user['is_enterprise_certification'],'is_certification' => $user['is_certification'],'company' => $user['company'],'username' => $user['username'],'avatar' => $avatar,'qrcode' => $imgUrl,]);} }

這里我將二維碼存到redis中，RedisService是服務類，SU_QRCODE_SELF_USER 為鍵值的常量。

3、前端實現

3.1、APP內置掃一掃

// 允許從相機和相冊掃碼 uni.scanCode({success: function (res) {console.log('條碼類型：' + res.scanType);console.log('條碼內容：' + res.result);} });// 只允許通過相機掃碼 uni.scanCode({onlyFromCamera: true,success: function (res) {console.log('條碼類型：' + res.scanType);console.log('條碼內容：' + res.result);}

• 我們只要識別對應的 res.result 如果是H5頁面的鏈接就直接跳轉到對應的內部APP頁面即可

4、一碼多用第二種方法

如果我們要處理其他端的話，可以添加一個 前端界面（需要部署到服務器）去判斷和跳轉，不過這樣我們需要每次將這個頁面部署成一個可訪問的h5網站，如下流程圖：

4.1、流程圖

4.2、代碼實現

<script>//拆分鏈接后面的參數方法let newObj = {};function getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");console.log(vars);for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");newObj[pair[0]] = pair[1];}return (false);}getQueryVariable();let u = navigator.userAgent;if (u != null && u.contains("AlipayClient")) {// "來自支付寶";if (newObj.type == 1) {//跳轉個人頁window.location.href = 'http://192.168.2.198:8080/#/pages/index/info/index?uid=' + newObj.uid}} else if(u != null && u.contains("MicroMessenger")) {// "來自微信";} else if(u.contains("Android")) {// "Android移動客戶端";} else if(u.contains("iPhone")) {// "iPhone移動客戶端";} else if(u.contains("iPad")) {// "iPad客戶端";} else if(u.contains("Window")) {// "PC端";} else if(u.contains("MY_APP_iOS/1.0.0")) {// "App端";} else if(u.contains("miniProgram")) {// "微信小程序端";} else {// "其他客戶端";}</script>

其中 getQueryVariable 是獲取拆分鏈接后面的參數方法，獲取的參數存在對象 newObj 中。

• 相關 user-agent 對應的類型如下：
• 1、Android 系統下不同手機中微信的user-agent

Mozilla/5.0 (Linux; Android 7.1.1; MI 6 Build/NMF26X; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN Mozilla/5.0 (Linux; Android 7.1.1; OD103 Build/NMF26F; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043632 Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/4G Language/zh_CN Mozilla/5.0 (Linux; Android 6.0.1; SM919 Build/MXB48T; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043632 Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN Mozilla/5.0 (Linux; Android 5.1.1; vivo X6S A Build/LMY47V; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043632 Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN Mozilla/5.0 (Linux; Android 5.1; HUAWEI TAG-AL00 Build/HUAWEITAG-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043622 Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/4G Language/zh_CN

• 2、iPhone 系統下的微信 user-agent

Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13F69 MicroMessenger/6.6.1 NetType/4G Language/zh_CN Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 MicroMessenger/6.6.1 NetType/4G Language/zh_CN Mozilla/5.0 (iPhone; CPU iPhone OS 11_1_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Mobile/15B150 MicroMessenger/6.6.1 NetType/WIFI Language/zh_CN Mozilla/5.0 (iphone x Build/MXB48T; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043632 Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN

• 3、微信內置瀏覽器與小程序中的 user-agent主要區別是小程序多了一個miniProgram

# 安卓系統中小程序 User Agent Mozilla/5.0 (Linux; Android 7.1.1; MI 6 Build/NMF26X; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/4G Language/zh_CN MicroMessenger/6.6.1.1220(0x26060135) NetType/4G Language/zh_CN miniProgram # 安卓系統中微信內置瀏覽器 User Agent Mozilla/5.0 (Linux; Android 7.1.1; MI 6 Build/NMF26X; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/4G Language/zh_CN

• 4、PC端的user-agent

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36

PS : 謝謝大家的觀賞，有什么問題歡迎在留言區留言。

總結

以上是生活随笔為你收集整理的二维码 | 如何实现一码多用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。