使用場景：掃描公司內部公用車上的二維碼，獲取到vin號，同時鏈接到服務器上數據庫，顯示這輛車的使用人，使用時間，用途，同時可以實現對數據庫的添加（備注：如果這輛車之前就存在在數據庫中，則顯示相關使用者的信息，如果是第一次掃描二維碼，將自動將數據錄入到數據庫中），目前只實現了掃描二維碼并且帶著參數跳轉頁面，同時鏈接到數據庫，顯示信息，添加功能還沒有實現。
效果預覽如下：首頁

點擊按鈕之后隨便選擇一張圖片：
vin號后面就是二維碼自身攜帶的信息，顯示的是我在服務器服務器上自己建的數據庫，添加按鈕本來要實現的就是點擊一下，可以實現添加一行數據，目前我現在還沒有實現。
其他參數代碼如下：
我總共有兩個頁面：

bind頁面：
js代碼：
const app = getApp()
Page({
data: {
result: ‘’
},
onLoad: function () {
},
getScancode: function () {
var _this = this;
// 允許從相機和相冊掃碼
wx.scanCode({
success: (res) => {
wx.navigateTo({
url: ‘…/bind/bind?title=’ + res.result
})
var result = res.result;
_this.setData({
result: result,
})
}
})
}
})
wxml代碼：
掃描車身二維碼
wxss代碼：
.Scancode {
font-size: 39rpx;
background: #aaa;
position: fixed;
bottom: 1000rpx;
display: flex;
width: 90%;
justify-content: center;

color: #fff;
border-radius:59rpx;
margin-left:30rpx;
margin-right: 30rpx;
z-index:999;
}
index頁面
js代碼：
Page({
data: {
focus: false,
inputValue: ‘’,
items: []
},
onLoad: function (options) {
// 生命周期函數–監聽頁面加載
var that = this;
wx.request({
url: ‘你自己的網址’,
header: {
‘content-type’: ‘application/xml’ // 默認值
},
success(res) {
console.log(res.data);
that.setData({
list: res.data
})
},
})
this.setData({
title: options.title

})

}
})
wxml代碼：


vin號：

添加



使用人
日期
用途



{{item.name}}
{{item.time}}
{{item.object}}


{{item.name}}
{{item.time}}
{{item.object}}




wxss代碼：
.search{
display: flex;
flex-direction: row;
}
.yangshi {

float: left;
font-size: 26rpx;
}
.vin {
margin-top: 7rpx;
font-size: 26rpx;
}
.add{
margin-left: 250rpx;
float: right;
margin-top: 7rpx;
font-size: 26rpx;
}
.table {
border: 0px solid darkgray;
font-size: 12px;
height: 100rpx;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 2rem;
align-items: center;
}
.td {
width:40%;
justify-content: center;
text-align: center;
}
.bg-w{
background: snow;
}

.th {
width: 40%;
justify-content: center;
background: rgb(94, 99, 112);
color: #fff;
display: flex;
height: 2rem;
align-items: center;
}
app.json代碼：
{
“pages”: [
“pages/index/index”,
“pages/bind/bind”

],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “車聯網”,
“navigationBarTextStyle”: “black”
}
}
服務器需要自己弄好，并且要用php配好，
php代碼如下：

<?php //$name=$_GET[“name”];//接收參數 $hostname_conn = "自己的數據庫的ip地址"; $database_conn = "自己的數據庫名";//自己建數據庫名 $username_conn = "root"; $password_conn = "數據庫的密碼"; //連接MYSQL數據庫 $conn = mysqli_connect($hostname_conn, $username_conn, $password_conn,$database_conn)or trigger_error(mysqli_error(),E_USER_ERROR); if(!$conn){ echo '連接不成功！'; } $sql = "SELECT * FROM vin"; mysqli_query($conn, "set names 'utf8'"); $result = mysqli_query($conn, $sql); class Vin{ public $id; public $name; public $time; public $vin; public $object; } $data = array(); if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { $vin=new Vin(); $vin->id=$row['id']; $vin->name=$row['name']; $vin->time=$row['time']; $vin->vin=$row['vin']; $vin->object=$row['object']; $data[] = $vin; } echo json_encode($data,JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);//將請求結果轉換為json格式 } ?>

等添加按鈕實現之后我再來更新。

總結

以上是生活随笔為你收集整理的小程序实现扫描二维码带着参数跳转到另外一个页面，实现对mysql数据库访问，并通过表格形式实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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