【Uniapp】支付链转二维码

╰+攻爆jí腚メ 2024-04-20 22:25 176阅读 0赞

前言

提示：这个是一个很小的项目，大概30分钟就能搞定
在这里插入图片描述
实现方式：输入支付代码，存储到对应的数据库表中，二维码访问一个PHP文件通过id来进行重定向，这样就可以使每张二维码都是固定的，替换二维码内容也只需改数据库的即可

文章目录

  • 前言
  • 一、设计UI界面
  • 二、设计数据库
  • 三、设计接口
    • 列表接口
    • 数据更新接口
  • 四、设计重定向访问页面
  • 四、解决跨域问题
    • 第一步
    • 第二步
    • 第三步
  • 总结

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

一、设计UI界面

在这里插入图片描述
在这里插入图片描述

  1. index.vue
  2. <template>
  3.     <view>
  6.         <view class="b-popup " v-if="showPopup" :class="[directionClass,{'b-popup-round':round},{'b-popup-animation':animation}]">
  7.             <view class="b-popup-shade" @click="showPopup = false"></view>
  8.             <view class="b-popup-content">
  9.                 <!-- 你的内容写在这里 -->
  10.                 <view class="b-p-32" style="width: 500rpx;height: 300rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
  11.                     <input placeholder="填入新的支付代码" v-model="update_url" style="background-color: #ccc;height: 80rpx;width: 487rpx;" />
  12.                     <view style="margin-top: 20rpx;">
  13.                         <button class="b-btn b-btn-blue" @click="update__()">确认</button>
  14.                         <button class="b-btn b-btn-red" @click="show(false)" style="margin-left: 50rpx;">取消</button>
  15.                     </view>
  17.                 </view>
  18.             </view>
  19.         </view>
  24.         <!--     <view class="b-flex-x b-bg-white b-p-32">
  25.             <image src="/static/logo.png" mode="aspectFit" class="logo b-radius-8"></image>
  26.             <view class="b-flex-item b-ml-32">
  27.                 <view class="b-text-B b-text-48 b-text-black">支付链接转二维码 v{
  28.    {BuiVersion}}</view>
  29.                 <view class="b-font-24 b-mt-8 b-text-black-dd">@园游会永不打烊</view>
  30.             </view>
  31.         </view> -->
  32.         <!-- <view class="b-flex-grow b-ml-32" style="width: 680rpx;">
  33.             <input type="text" class="b-form-input" placeholder="请输入名称" style="width: 680rpx;" v-model="name">
  34.         </view> -->
  35.         <!--     <view class="b-bg-white b-pl-32 b-pr-32 b-pt-24 b-pb-24">
  36.             <button class="b-btn b-btn-blue b-btn-block b-btn-lg"  @click="upload()">上传图片</button>
  37.         </view> -->
  38.         <view class="b-pt-32 b-pr-32 b-pl-32 b-pb-24 b-text-black-dd">列表</view>
  39.         <view class="b-list-user b-bg-white">
  40.             <view class="b-list-item"
  41.                   v-for="(item,index) in list" :key="index">
  42.                 <view class="b-flex-x">
  43.                     <view class="b-icon b-text-black-d">
  44.                         <image src="/static/tabBar/api.png" mode="widthFix" style="width: 50rpx;height: 50rpx;"></image>
  45.                     </view>
  46.                     <view style="font-size:20rpx;">位置{
  47.    {item.id}}</view>
  48.                 </view>
  49.                 <view class="btns-box">
  50.                     <button class="b-btn b-btn-blue b-btn-sm" @click="jumps_edit(item.id)">修改URL</button>
  51.                     <button class="b-btn b-btn-blue b-btn-sm" style="margin-left: 10rpx;" @click="jumps(item.id)">生成</button>
  52.                     <!-- <button class="b-btn b-btn-blue b-btn-sm" style="margin-left: 10rpx;" @click="delete_(item.id)">删</button> -->
  53.                 </view>
  54.             </view>
  55.         </view>
  57.         <view class="b-p-32 b-text-black-dd b-text-c b-text-20">
  58.             <view>欢迎使用 B-ui </view>
  59.             <view class="b-mt-8">© 园游会永不打烊</view>
  60.         </view>
  61.     </view>
  62. </template>
  64. <script>
  65.     export default {
  67.             data() {
  68.                 return {
  69.                     select_id:'',
  70.                     update_url:'',
  71.                     showPopup:false,
  72.                     directionClass:"",
  73.                     round:true,
  74.                     animation:true,
  75.                     name:"",
  76.                     BuiVersion:"",
  77.                     list:[],
  79.             }},
  81.             onLoad() {
  82.                 this.BuiVersion = uni.Bui.version;
  83.                 this.get_list();
  84.             },
  85.             methods: {
  87.                 update__(){
  88.                     let that=this;
  89.                         uni.request({
  90.                         url: 'https://*****/update.php', 
  91.                             data: {
  92.                                 url:that.update_url,
  93.                                 id:that.select_id
  94.                                 },
  95.                                 method: 'POST',
  96.                                 header: {
  97.                                 'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
  98.                                 },
  99.                                 success: (res) => {
  100.                                     if (res.data.code==200) {
  101.                                         uni.showToast({
  102.                                             title:res.data.msg
  103.                                         })
  104.                                     } else{
  105.                                         uni.showToast({
  106.                                             title:res.data.msg
  107.                                         })
  108.                                     }
  109.                                     this.update_url='';
  110.                                     that.showPopup=false;
  111.                                 }
  112.                         })
  113.                 },
  114.                 show(status = true){
  115.                     this.showPopup = status;
  116.                     this.update_url='';
  117.                 },
  118.                 get_list(){
  119.                      let that=this;
  120.                                     uni.request({
  121.                                     url: 'https://*****/get_list.php', 
  122.                                     data: {
  123.                                     },
  124.                                     method: 'POST',
  125.                                     header: {
  126.                                     'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
  127.                                     },
  128.                                     success: (res) => {
  129.                                         console.log(res.data)
  130.                                         that.list=res.data.data;
  131.                                     }
  132.                                     })
  133.                 },
  135.         jump(path){
  136.             uni.navigateTo({
  137.                 url:'/pages/video/video?path='+path
  138.             })
  139.         },
  140.         jumps(path){
  141.             console.log(path)
  142.             uni.navigateTo({
  143.                 url:'/pages/qrcode/qrcode?path='+path
  144.             })
  145.         },
  146.         jumps_edit(id){
  147.             let that=this;
  148.             that.select_id=id;
  150.             that.showPopup = true;
  152.             }
  153.                 }
  154.         }
  155. </script>
  157. <style lang="scss">
  158.     .logo{
  159.             width: 140rpx;
  160.             height: 140rpx;
  161.         }
  165.         .line-top{
  166.             border-top: #eee solid 1px;
  167.         }
  168. </style>
  170. qrcode.vue
  171. <template xlang="wxml">
  172.     <view class="container">
  173.         <view class="qrimg">
  174.             <view class="qrimg-i">
  175.                 <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" />
  176.             </view>
  177.             <!-- <view class="qrimg-i">
  178.                 <tki-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
  179.             </view> -->
  180.         </view>
  183.         <view class="uni-padding-wrap uni-common-mt">
  184.             <view class="uni-title">设置二维码大小</view>
  185.         </view>
  186.         <view class="body-view">
  187.             <slider :value="size" @change="sliderchange" min="50" max="500" show-value />
  188.         </view>
  189.         <view class="uni-padding-wrap">
  190.             <view class="btns">
  191.                 <button type="primary" @tap="selectIcon">选择二维码图标</button>
  192.                 <button type="primary" @tap="creatQrcode">生成二维码</button>
  193.                 <button type="primary" @tap="saveQrcode">保存到图库</button>
  194.         <!--         <button type="warn" @tap="clearQrcode">清除二维码</button>
  195.                 <button type="warn" @tap="ifQrcode">显示隐藏二维码</button> -->
  196.             </view>
  197.         </view>
  198.     </view>
  199. </template>
  200. <script>
  201. import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
  202. export default {
  203.     data() {
  204.         return {
  205.             ifShow: true,
  206.             val: '', // 要生成的二维码值
  207.             size: 300, // 二维码大小
  208.             unit: 'upx', // 单位
  209.             background: '#ffffff', // 背景色
  210.             foreground: '#252625', // 前景色
  211.             pdground: '#252625', // 角标色
  212.             icon: '', // 二维码图标/static/logo.jpg
  213.             iconsize: 40, // 二维码图标大小
  214.             lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
  215.             onval: false, // val值变化时自动重新生成二维码
  216.             loadMake: true, // 组件加载完成后自动生成二维码
  217.             src: '' // 二维码生成后的图片地址或base64
  218.         }
  219.     },
  220.     methods: {
  221.         sliderchange(e) {
  222.             this.size = e.detail.value
  223.         },
  224.         creatQrcode() {
  225.             this.$refs.qrcode._makeCode()
  226.         },
  227.         saveQrcode() {
  228.             this.$refs.qrcode._saveCode()
  229.         },
  230.         qrR(res) {
  231.             this.src = res
  232.         },
  233.         clearQrcode() {
  234.             this.$refs.qrcode._clearCode()
  235.             this.val = ''
  236.         },
  237.         ifQrcode() {
  238.             this.ifShow = !this.ifShow
  239.         },
  240.         selectIcon() {
  241.             let that = this
  242.             uni.chooseImage({
  243.                 count: 1, //默认9
  244.                 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  245.                 sourceType: ['album'], //从相册选择
  246.                 success: function (res) {
  247.                     that.icon = res.tempFilePaths[0]
  248.                     setTimeout(() => {
  249.                         that.creatQrcode()
  250.                     }, 100);
  251.                     // console.log(res.tempFilePaths);
  252.                 }
  253.             });
  254.         }
  255.     },
  256.     components: {
  257.         tkiQrcode
  258.     },
  259.     onLoad(options) {
  260.         let that = this;
  261.         that.val="https://******/location.php?id="+options.path
  263.     },
  264. }
  265. </script>
  267. <style>
  268. /* @import "../../../common/icon.css"; */
  269. .container {
  270.     display: flex;
  271.     flex-direction: column;
  272.     width: 100%;
  273. }
  275. .qrimg {
  276.     display: flex;
  277.     justify-content: center;
  278. }
  279. .qrimg-i{
  280.     margin-right: 10px;
  281. }
  283. slider {
  284.     width: 100%;
  285. }
  287. input {
  288.     width: 100%;
  289.     margin-bottom: 20upx;
  290. }
  292. .btns {
  293.     display: flex;
  294.     flex-direction: column;
  295.     width: 100%;
  296. }
  298. button {
  299.     width: 100%;
  300.     margin-top: 10upx;
  301. }
  302. </style>

二、设计数据库

在这里插入图片描述

三、设计接口

列表接口

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

  1. get_list.php
  2. <?php
  3. // 假设你已经建立了数据库连接 $conn
  4. // 这里我们假设数据库表名为 url_list
  5. include 'conn.php';
  6. // 查询数据库，获取数据
  7. $query = "SELECT * FROM url_list";
  8. $result = $conn->query($query);
  10. // 检查查询结果是否成功
  11. if (!$result) {
  12.     die(
  13.         json_encode(
  14.             array(
  15.                 'code' => 500,
  16.                 'msg' => '查询失败',
  17.             ),
  18.             JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
  19.         )
  20.     );
  21. }
  23. // 将查询结果转换为关联数组
  24. $data = array();
  25. while ($row = mysqli_fetch_assoc($result)) {
  26.     $data[] = $row;
  27. }
  29. // 释放查询结果资源
  30. mysqli_free_result($result);
  32. // 输出JSON格式的数据
  33. die(
  34.     json_encode(
  35.         array(
  36.             'code' => 200,
  37.             'data' => $data,
  38.             'msg' => '查询成功',
  39.         ),
  40.         JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT
  41.     )
  42. );
  43. ?>

数据更新接口

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

  1. update.php
  2. <?php
  3. include 'conn.php';
  4. if ($_POST) {
  5.     $url=$_POST['url'];
  6.     $id=$_POST['id'];
  7.     $sql="UPDATE `url_list` SET `url` = '$url' WHERE `id` = '$id'";
  8.     $res=$conn->query($sql);
  9.      die(
  10.         json_encode(
  11.             array(
  12.             'code' => 200,
  13.             'msg' => '更改成功'
  14.         ),480)
  15. );
  16. } else {
  17.    die(
  18.         json_encode(
  19.             array(
  20.             'code' => 100,
  21.             'msg' => '请求失败'
  22.         ),480)
  23. );
  24. }

四、设计重定向访问页面

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

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

重定向通常有两种类型：

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

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

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

  1. onLoad(options) {
  2.         let that = this;
  3.         that.val="https://******/location.php?id="+options.path
  5.     },
  7. location.php
  8. <?php
  9. // 重定向的目标链接
  10. include("conn.php");
  11. if ($_GET['id']) {
  12. $id=$_GET['id'];
  13. $query = "SELECT url FROM `url_list` WHERE `id` = '$id'";
  14. $result = $conn->query($query);
  16. if ($result->num_rows > 0) {
  17.     // If at least one row is found, extract the id
  18.     $row = $result->fetch_assoc();
  19.     $url = $row['url'];
  20.     $redirect_url = $url;
  21.     // 执行重定向
  22.     header("Location: " . $redirect_url);
  23. } else {
  24.     // If no data is found, display a message
  25.     echo "没有数据";
  26. }
  28. // Don't forget to close the database connection after using it
  29. $conn->close();
  30. exit();
  35. } else {
  36.  die("参数不合法");
  37. }
  40. ?>

四、解决跨域问题

第一步

打开manifest.json，勾选Https等其他如图
在这里插入图片描述

第二步

替换所有的域名http为https

第三步

服务端配置SSL证书，设置为强制
在这里插入图片描述

总结

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

?希望你能喜欢我的其他作品
《记一次云之家签到抓包》
《记一次视频抓包m3u8解密过程》
《抓包部分软件时无网络+过代理检测 解决办法 安卓黄鸟httpcanary+vmos》
《Python】记录抓包分析自动领取芝麻HTTP每日免费IP（成品+教程）》
《某课抓包视频 安卓手机：黄鸟+某课app+VirtualXposed虚拟框架》

推荐专栏：

《Python爬虫脚本项目实战》

该专栏往期文章：
《【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）》

?如果感觉看完文章还不过瘾，欢迎查看我的其它专栏
?作者对python有很大的兴趣，完成过很多独立的项目：例如滇医通等等脚本，但是由于版权的原因下架了，爬虫这一类审核比较严谨，稍有不慎就侵权违规了，所以在保证质量的同时会对文章进行筛选

如果您对爬虫感兴趣请收藏或者订阅该专栏哦《Python爬虫脚本项目实战》，如果你有项目欢迎联系我，我会同步教程到本专栏！

?Python爬虫项目实战系列文章！！
⭐⭐欢迎订阅⭐⭐

【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）
【Python爬虫项目实战二】Chatgpt还原验证算法-解密某宝伪知网数据接口

⭐⭐欢迎订阅⭐⭐
在这里插入图片描述

Python爬虫脚本项目实战
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

    相关 【Uniapp】支付链转二维码

    以上就是今天记录的内容，本次项目很简单，是一个新手练手的项目，重定向解决办法就是保持协议一致，你也可以不按我的来，只要统一即可?希望你能喜欢我的其他作品《记一次云之家签到...

    ╰+攻爆jí腚メ╰+攻爆jí腚メ/ 0 赞/ 176 阅读

    相关 微信二维码支付

    二维码扫描支付 模式二    生成二维码时插入数据 返回订单状态ID (SetAttch 可以附加自定义数据。也就是订单状态ID  回调时候会用到)    支付成功后 根据

    迷南。迷南。/ 0 赞/ 145 阅读