【Uniapp】支付链转二维码 - 成就云开发者社区

前言

提示：这个是一个很小的项目，大概30分钟就能搞定

实现方式：输入支付代码，存储到对应的数据库表中，二维码访问一个PHP文件通过id来进行重定向，这样就可以使每张二维码都是固定的，替换二维码内容也只需改数据库的即可

提示：以下代码需要导入B-ui插件，或者在页面顶部直接下载资源即可

一、设计UI界面

代码语言：javascript

复制

index.vue
<template>
	<view>
	&lt;view class=&#34;b-popup &#34; v-if=&#34;showPopup&#34; :class=&#34;[directionClass,{&#39;b-popup-round&#39;:round},{&#39;b-popup-animation&#39;:animation}]&#34;&gt;
		&lt;view class=&#34;b-popup-shade&#34; @click=&#34;showPopup = false&#34;&gt;&lt;/view&gt;
		&lt;view class=&#34;b-popup-content&#34;&gt;
			&lt;!-- 你的内容写在这里 --&gt;
			&lt;view class=&#34;b-p-32&#34; style=&#34;width: 500rpx;height: 300rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;&#34;&gt;
				&lt;input placeholder=&#34;填入新的支付代码&#34; v-model=&#34;update_url&#34; style=&#34;background-color: #ccc;height: 80rpx;width: 487rpx;&#34; /&gt;
				&lt;view style=&#34;margin-top: 20rpx;&#34;&gt;
					&lt;button class=&#34;b-btn b-btn-blue&#34; @click=&#34;update__()&#34;&gt;确认&lt;/button&gt;
					&lt;button class=&#34;b-btn b-btn-red&#34; @click=&#34;show(false)&#34; style=&#34;margin-left: 50rpx;&#34;&gt;取消&lt;/button&gt;
				&lt;/view&gt;

			&lt;/view&gt;
		&lt;/view&gt;
	&lt;/view&gt;




	&lt;!-- 	&lt;view class=&#34;b-flex-x b-bg-white b-p-32&#34;&gt;
		&lt;image src=&#34;/static/logo.png&#34; mode=&#34;aspectFit&#34; class=&#34;logo b-radius-8&#34;&gt;&lt;/image&gt;
		&lt;view class=&#34;b-flex-item b-ml-32&#34;&gt;
			&lt;view class=&#34;b-text-B b-text-48 b-text-black&#34;&gt;支付链接转二维码 v{{BuiVersion}}&lt;/view&gt;
			&lt;view class=&#34;b-font-24 b-mt-8 b-text-black-dd&#34;&gt;@园游会永不打烊&lt;/view&gt;
		&lt;/view&gt;
	&lt;/view&gt; --&gt;
	&lt;!-- &lt;view class=&#34;b-flex-grow b-ml-32&#34; style=&#34;width: 680rpx;&#34;&gt;
		&lt;input type=&#34;text&#34; class=&#34;b-form-input&#34; placeholder=&#34;请输入名称&#34; style=&#34;width: 680rpx;&#34; v-model=&#34;name&#34;&gt;
	&lt;/view&gt; --&gt;
	&lt;!-- 	&lt;view class=&#34;b-bg-white b-pl-32 b-pr-32 b-pt-24 b-pb-24&#34;&gt;
		&lt;button class=&#34;b-btn b-btn-blue b-btn-block b-btn-lg&#34;  @click=&#34;upload()&#34;&gt;上传图片&lt;/button&gt;
	&lt;/view&gt; --&gt;
	&lt;view class=&#34;b-pt-32 b-pr-32 b-pl-32 b-pb-24 b-text-black-dd&#34;&gt;列表&lt;/view&gt;
	&lt;view class=&#34;b-list-user b-bg-white&#34;&gt;
		&lt;view class=&#34;b-list-item&#34;
			  v-for=&#34;(item,index) in list&#34; :key=&#34;index&#34;&gt;
			&lt;view class=&#34;b-flex-x&#34;&gt;
				&lt;view class=&#34;b-icon b-text-black-d&#34;&gt;
					&lt;image src=&#34;/static/tabBar/api.png&#34; mode=&#34;widthFix&#34; style=&#34;width: 50rpx;height: 50rpx;&#34;&gt;&lt;/image&gt;
				&lt;/view&gt;
				&lt;view style=&#34;font-size:20rpx;&#34;&gt;位置{{item.id}}&lt;/view&gt;
			&lt;/view&gt;
			&lt;view class=&#34;btns-box&#34;&gt;
				&lt;button class=&#34;b-btn b-btn-blue b-btn-sm&#34; @click=&#34;jumps_edit(item.id)&#34;&gt;修改URL&lt;/button&gt;
				&lt;button class=&#34;b-btn b-btn-blue b-btn-sm&#34; style=&#34;margin-left: 10rpx;&#34; @click=&#34;jumps(item.id)&#34;&gt;生成&lt;/button&gt;
				&lt;!-- &lt;button class=&#34;b-btn b-btn-blue b-btn-sm&#34; style=&#34;margin-left: 10rpx;&#34; @click=&#34;delete_(item.id)&#34;&gt;删&lt;/button&gt; --&gt;
			&lt;/view&gt;
		&lt;/view&gt;
	&lt;/view&gt;

	&lt;view class=&#34;b-p-32 b-text-black-dd b-text-c b-text-20&#34;&gt;
		&lt;view&gt;欢迎使用 B-ui &lt;/view&gt;
		&lt;view class=&#34;b-mt-8&#34;&gt;&amp;copy; 园游会永不打烊&lt;/view&gt;
	&lt;/view&gt;
&lt;/view&gt;

</template>
<script>

export default {
		data() {
			return {
				select_id:&#39;&#39;,
				update_url:&#39;&#39;,
				showPopup:false,
				directionClass:&#34;&#34;,
				round:true,
				animation:true,
				name:&#34;&#34;,
				BuiVersion:&#34;&#34;,
				list:[],
		
		}},
	
		onLoad() {
			this.BuiVersion = uni.Bui.version;
			this.get_list();
		},
		methods: {
			
			update__(){
				let that=this;
					uni.request({
					url: &#39;https://*****/update.php&#39;, 
						data: {
							url:that.update_url,
							id:that.select_id
							},
							method: &#39;POST&#39;,
							header: {
							&#39;content-type&#39;: &#39;application/x-www-form-urlencoded&#39; //自定义请求头信息
							},
							success: (res) =&gt; {
								if (res.data.code==200) {
									uni.showToast({
										title:res.data.msg
									})
								} else{
									uni.showToast({
										title:res.data.msg
									})
								}
								this.update_url=&#39;&#39;;
								that.showPopup=false;
							}
					})
			},
			show(status = true){
				this.showPopup = status;
				this.update_url=&#39;&#39;;
			},
			get_list(){
				 let that=this;
								uni.request({
								url: &#39;https://*****/get_list.php&#39;, 
								data: {
								},
								method: &#39;POST&#39;,
								header: {
								&#39;content-type&#39;: &#39;application/x-www-form-urlencoded&#39; //自定义请求头信息
								},
								success: (res) =&gt; {
									console.log(res.data)
									that.list=res.data.data;
								}
								})
			},
			
	jump(path){
		uni.navigateTo({
			url:&#39;/pages/video/video?path=&#39;+path
		})
	},
	jumps(path){
		console.log(path)
		uni.navigateTo({
			url:&#39;/pages/qrcode/qrcode?path=&#39;+path
		})
	},
	jumps_edit(id){
		let that=this;
		that.select_id=id;
		
		that.showPopup = true;
		
		}
			}
	}

</script>
<style lang="scss">

.logo{

width: 140rpx;

height: 140rpx;

}
	.line-top{
		border-top: #eee solid 1px;
	}

</style>

代码语言：javascript

复制

qrcode.vue

<template xlang="wxml">

<view class="container">

<view class="qrimg">

<view class="qrimg-i">

<tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />

</view>

<!-- <view class="qrimg-i">

<tki-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />

</view> -->

</view>
	&lt;view class=&#34;uni-padding-wrap uni-common-mt&#34;&gt;
		&lt;view class=&#34;uni-title&#34;&gt;设置二维码大小&lt;/view&gt;
	&lt;/view&gt;
	&lt;view class=&#34;body-view&#34;&gt;
		&lt;slider :value=&#34;size&#34; @change=&#34;sliderchange&#34; min=&#34;50&#34; max=&#34;500&#34; show-value /&gt;
	&lt;/view&gt;
	&lt;view class=&#34;uni-padding-wrap&#34;&gt;
		&lt;view class=&#34;btns&#34;&gt;
			&lt;button type=&#34;primary&#34; @tap=&#34;selectIcon&#34;&gt;选择二维码图标&lt;/button&gt;
			&lt;button type=&#34;primary&#34; @tap=&#34;creatQrcode&#34;&gt;生成二维码&lt;/button&gt;
			&lt;button type=&#34;primary&#34; @tap=&#34;saveQrcode&#34;&gt;保存到图库&lt;/button&gt;
	&lt;!-- 		&lt;button type=&#34;warn&#34; @tap=&#34;clearQrcode&#34;&gt;清除二维码&lt;/button&gt;
			&lt;button type=&#34;warn&#34; @tap=&#34;ifQrcode&#34;&gt;显示隐藏二维码&lt;/button&gt; --&gt;
		&lt;/view&gt;
	&lt;/view&gt;
&lt;/view&gt;

</template>

<script>

import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'

export default {

data() {

return {

ifShow: true,

val: '', // 要生成的二维码值

size: 300, // 二维码大小

unit: 'upx', // 单位

background: '#ffffff', // 背景色

foreground: '#252625', // 前景色

pdground: '#252625', // 角标色

icon: '', // 二维码图标/static/logo.jpg

iconsize: 40, // 二维码图标大小

lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行

onval: false, // val值变化时自动重新生成二维码

loadMake: true, // 组件加载完成后自动生成二维码

src: '' // 二维码生成后的图片地址或base64

}

},

methods: {

sliderchange(e) {

this.size = e.detail.value

},

creatQrcode() {

this.$refs.qrcode._makeCode()

},

saveQrcode() {

this.$refs.qrcode._saveCode()

},

qrR(res) {

this.src = res

},

clearQrcode() {

this.$refs.qrcode._clearCode()

this.val = ''

},

ifQrcode() {

this.ifShow = !this.ifShow

},

selectIcon() {

let that = this

uni.chooseImage({

count: 1, //默认9

sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有

sourceType: ['album'], //从相册选择

success: function (res) {

that.icon = res.tempFilePaths[0]

setTimeout(() => {

that.creatQrcode()

}, 100);

// console.log(res.tempFilePaths);

}

});

}

},

components: {

tkiQrcode

},

onLoad(options) {

let that = this;

that.val="https://******/location.php?id="+options.path
},

}

</script>
<style>

/* @import "../../../common/icon.css"; */

.container {

display: flex;

flex-direction: column;

width: 100%;

}
.qrimg {

display: flex;

justify-content: center;

}

.qrimg-i{

margin-right: 10px;

}
slider {

width: 100%;

}
input {

width: 100%;

margin-bottom: 20upx;

}
.btns {

display: flex;

flex-direction: column;

width: 100%;

}
button {

width: 100%;

margin-top: 10upx;

}

</style>

二、设计数据库

三、设计接口

列表接口

固定位置在数据库即可，前端刷新出来通过id进行操作

代码语言：javascript

复制

get_list.php

<?php

// 假设你已经建立了数据库连接 $conn

// 这里我们假设数据库表名为 url_list

include 'conn.php';

// 查询数据库，获取数据

$query = "SELECT * FROM url_list";

result = conn->query($query);
// 检查查询结果是否成功

if (!$result) {

die(

json_encode(

array(

'code' => 500,

'msg' => '查询失败',

),

JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT

)

);

}
// 将查询结果转换为关联数组

$data = array();

while (row = mysqli_fetch_assoc(result)) {

data[] = row;

}
// 释放查询结果资源

mysqli_free_result($result);
// 输出JSON格式的数据

die(

json_encode(

array(

'code' => 200,

'data' => $data,

'msg' => '查询成功',

),

JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT

)

);

?>

数据更新接口

既然要实现，不更改二维码替换内容，那数据库的数据需要改变，就不得不弄一个能修改的操作

代码语言：javascript

复制

update.php

<?php

include 'conn.php';

if ($_POST) {

url=_POST['url'];

id=_POST['id'];

sql=&#34;UPDATE `url_list` SET `url` = &#39;url' WHERE id = '$id'";

res=conn->query($sql);

die(

json_encode(

array(

'code' => 200,

'msg' => '更改成功'

),480)

);

} else {

die(

json_encode(

array(

'code' => 100,

'msg' => '请求失败'

),480)

);

}

四、设计重定向访问页面

上述工作都做完了，现在就差重定向页面。什么是重定向？

重定向是指将一个网页、URL或文件请求从一个位置转发到另一个位置的过程。在互联网和计算机领域，重定向是一种常见的技术，用于将用户从一个网址或链接导向到另一个网址或链接。

重定向通常有两种类型：

服务器端重定向：当用户访问一个网页或URL时，服务器会检测到这个请求，并根据预先设定的规则，将用户的请求从原始网址转发到新的目标网址。这个过程是在服务器端完成的，用户通常无法察觉到重定向的发生。服务器端重定向是通过HTTP状态码实现的，如301永久重定向、302临时重定向等。
客户端重定向：这种重定向是通过网页上的特定代码（通常是JavaScript或HTML的标签）来实现的。当用户访问一个网页时，网页上的代码会检测到用户的请求，并将用户自动导向到新的目标网址。客户端重定向可以通过页面刷新或页面跳转来实现。重定向在网站管理和维护中有多种用途。一些常见的应用包括：
网址更改：当网站的URL发生变化时，可以使用重定向将原始URL导向到新的URL，以确保用户仍能够访问到所需内容。
域名重定向：当网站的域名更改或网站需要多个域名来访问时，可以使用重定向将用户从一个域名导向到另一个域名。
错误页面处理：当用户访问一个不存在的页面或出现错误时，可以使用重定向将用户引导到一个有效的页面，或者返回一个合适的错误信息。
流量管理：通过重定向，网站管理员可以控制特定页面的访问量，将用户导向不同的内容或服务。

总之，重定向是一种有用的技术，能够为网站提供更好的用户体验和更有效的管理，可实现域名跳转。

我们通过对二维码的设置使每个栏位根据id来生成二维码，通过传递id给重定向文件，然后重定向文件去数据库查询最新的URL来实现跳转

代码语言：javascript

复制

onLoad(options) {
		let that = this;
		that.val="https://******/location.php?id="+options.path
},</code></pre></div></div><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">location.php

<?php

// 重定向的目标链接

include("conn.php");

if ($_GET['id']) {

id=_GET['id'];

query = &#34;SELECT url FROM `url_list` WHERE `id` = &#39;id'";

result = conn->query($query);
if ($result->num_rows > 0) {

// If at least one row is found, extract the id

row = result->fetch_assoc();

url = row['url'];

redirect_url = url;

// 执行重定向

header("Location: " . $redirect_url);

} else {

// If no data is found, display a message

echo "没有数据";

}
// Don't forget to close the database connection after using it

$conn->close();

exit();
} else {

die("参数不合法");

}
?>

四、解决跨域问题

第一步

打开manifest.json，勾选Https等其他如图

第二步

替换所有的域名http为https

第三步

服务端配置SSL证书，设置为强制

总结

以上就是今天记录的内容，本次项目很简单，是一个新手练手的项目，重定向解决办法就是保持协议一致，你也可以不按我的来，只要统一即可