一、前言
欢迎来到本期的博客！
本篇将为您介绍微信支付在小程序 Uniapp 端的全新篇章。微信支付作为移动支付领域的先驱之一，不断演进与创新，为用户和开发者提供更便捷、安全的支付体验。在本文中，我们将深入探讨微信支付在小程序 Uniapp 端的应用与优势。
随着移动互联网的蓬勃发展，小程序成为了用户获取信息、进行交互和购买商品的重要平台之一。微信支付作为小程序中不可或缺的支付方式，不仅为用户提供了快捷方便的支付方式，还为商家创造了更多的销售机会。在这个背景下，微信支付不断完善其在小程序 Uniapp 端的集成，以满足不同场景下的支付需求。
在本文中，我们将探讨微信支付在小程序 Uniapp 端的接入步骤，介绍其提供的各种支付功能，我们还将深入研究微信支付在安全性方面的保障措施，确保用户的支付信息和资金得到充分的保护。
无论您是小程序开发者还是企业主，亦或是对移动支付技术感兴趣的读者，本文都将为您提供有关在小程序 Uniapp 端集成微信支付的实用知识和技巧。让我们一同探索微信支付的新篇章，为用户营造更加便捷、安全的支付环境。
💗 本次为前端知识点如果不懂前段可以去仓库直接copy出来使用,如果有什么问题可以在评论区留言,我会第一时间回复大家的.关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
本次项目使用技术栈
后端: SpringBoot3.1.x、Mysql8.0、MybatisPlus
前端: Vue3、Vite、ElementPlus
小程序: Uniapp、UviewPlus、Vue3
演示地址查看 ： WEB端 小程序 看评论区~ 这里不能发链接
本片文章大约三万字纯手打希望可以帮助到您 喜欢的同学们麻烦点个赞和收藏 谢谢啦
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
一、登录原型需求分析
可以看到一打开映入眼帘的是需要登录,可能同学们会有疑问🤔️? 为啥PC端的不需要就可以直接玩微信支付呢?
遇事不决直接打开文档看看为啥子
商户微信支付文档: https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_5_1.shtml
必须要传递 openId 才能玩支付呀,那么这玩意在哪里拿? 只能是登录咯\ ⚠️注意: 登录功能等搭建完毕下单页面在进行添加登录弹出功能\ ⚠️注意: 登录功能等搭建完毕下单页面在进行添加登录弹出功能\ ⚠️注意: 登录功能等搭建完毕下单页面在进行添加登录弹出功能
二、下单页面原型需求分析
可以看到这里的页面和我们在PC上面编写的不能说一模一样只能说一模一样.
分三个区域 上 中 下 和PC端的代码都是一样的样式我们直接CV大法复制PC端的css文件即可\
但是对于没有看过PC的同学我就直接把样式文件贴出来了看下文 全局样式
三、全局样式
首先我们设置一个全局的样式 内边距 在 App.vue 当中
设置内边距 10 橡素
<style lang="scss"> .app-container { padding: 10px !important; box-sizing: border-box !important; } </style>
静态文件样式
在 static 文件夹当中新增 css 文件夹\
新增全局自定义样式文件 global.scss
#index { margin-left: auto; margin-right: auto; padding: 0 10px 80px 10px; box-sizing: border-box; } .comm-title { overflow: hidden; clear: both; margin: 40px 0 30px; } #footer { background-color: #323232; border-top-width: 5px; border-top-style: solid; color: #999; width: 100%; overflow: hidden; padding-top: 30px; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } #index .content { padding: 10px; box-sizing: border-box; box-shadow: 0 4px 30px #a5a8abcc; text-align: center; display: flex; flex-flow: wrap; justify-content: space-between; } #index .item { margin: 10px; } #index .orderBtn { position: relative; border: 1px solid #f3e2c6; background-color: #ffffff; color: #ff8686; font-weight: bold; border-radius: 5px; width: 140px; height: 50px; line-height: 50px; font-size: 15px; display: inline-block; text-align: center; text-decoration: none; } .current { border-color: #ff8686 !important; } .current:after { content: ""; display: block; position: absolute; right: -1px; bottom: -1px; width: 28px; height: 28px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOKADAAQAAAABAAAAOAAAAAANV2hTAAADnUlEQVRoBd3ZzUsUYRwH8O/zzK6llaZkm5mkWdEhN4KEgqKkDhpU9KJpNy/hKch/QK9BdRM7SAQeSnujDgUWXqKgyBBqISKDlswwETXzbZ15eubRGbZ1dp3dmdndmQd255nnZef34Tf7G2UBD7fIta3txKs+FcfA2jwJ1HBq8jwHjMZ5DhiL8xTQCOcZYDycJ4CJcK4HroZzNdAMzrVAszhXApPBuQ6YLM5VwFRwrgGminMF0Aou64FWcVkNtAOXtUC7cFkJtBOXdUC7cVkFdAKXNUCncFkBdBKXcaDTuIwC04HLGDBduIwA04lLOzDduLQCM4FLGzBTuLQAM4lTgZL65lRzGkerWyCduQX41oL9eGvIcOzXJcdxNe2Qqi8LFPv7G4sd+wyBPsNRi4OO4giFVHsdtKpRj1IZ7Nb7sR3bM+gojvohne4E3X1Sd8ivb0Dhr3jNVqCjOH8upLO3QcuPCgtjDEp/G5SBrng2MW4b0BRuTQEwP5kwIMNJvk+60A1aekBMM0WG/LwVLHTfcHn0oC1V1AxOqrsJ6VQnSH4p2NcX0TEk7q8rhu9iL2jJUhFhi/OQn7aAfX6SeN/yrOUiYwanXotsPwxCCEiwiZ9QkQGAJQ4yfxvH9YAUVoh1bGEG8uNmsO+vEu+LmrWUQbM49Xpsbgp0V624NAnsBdlQwjPZFxVKTLdoJ3xND0EKysQEm5uA3NsU93kXs1s/TRmYDE5cbTQEzIyDVh4XpyRQBbI+ADa08nYlgSB8jb18frNYy6ZHsXivHhj9qAdutpMSMGnccjTs1yAwNwm6o0aMkC1BIK8Y7NtLPV5SdhBS/V2Q3I1ijE2EOe48MD6kr0mmkzQwVZwWFBv5wCvpH9CKY2JIFI/cIo7sB6k8AencHZCcPDHHxr4s4aaGte1JH5MCWsVp0bGfA0BkRn+m0ZL9IPxFD10BkXLEMmVkEHJPA7+tx7RtKR1NA+3CaVGy4fcAL/m0/IgYUisl4dVVbUr4DeQHl3imp8S5lTdTQLtxWsBs+B0gR0D5I0RrCq+s8qNmjp/VhiwdVwU6hdOiFv/mRGZBNu2B8qkHyrOrPIURbdryMeGfak7jLEe/ygdw3PTSTW+w0O04lcQIwoZAL+BUIGG0b8Ut6hkc/yb7/P7gfxn0Ck5kj5BO0hoO6UCP4fql8sJWFSqAXsHx75tCCenwlRfWkYbQgsik23Hqo0CtlmpB8fmlLvW2VGFa+wcOncY5YWRXPQAAAABJRU5ErkJggg==) no-repeat; background-size: 28px 28px; } .PaymentChannel_title { position: relative; display: flex; padding-left: 18 rpx; margin: 10px 0; } .PaymentChannel_title:before { content: ""; display: block; position: absolute; left: 0; top: calc(50% - 10px); width: 4px; height: 18px; background: #fa8919; border-radius: 0 4px 4px 0; } .payButtom { margin: 30px 0; display: flex; justify-content: space-around; }
新增默认HTML样式清空样式文件 reset.scss
@charset "utf-8"; html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}body{font-size:12px;line-height:160%;font-family:"Helvetica Neue",\5FAE\8F6F\96C5\9ED1,"SimHei",Tohoma;word-break:break-all;word-wrap:break-word;position:relative}ol,ul,li{list-style:none}blockquote,q{quotes:none}table{border-collapse:collapse;border-spacing:0;empty-cells:show}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins,s{text-decoration:none}del{text-decoration:line-through}em,i{font-style:normal}a,img{border:0;text-decoration:none}a{text-decoration:none}a:hover{text-decoration:underline}a:focus{outline:0;-moz-outline:0}a:active{outline:0;blr:expression(this.onFocus=this.blur())}h1{font-size:36px;line-height:45px;font-weight:normal}h2{font-size:24px;line-height:30px;font-weight:normal}h3{font-size:18px;line-height:22px;font-weight:normal}h4{font-size:16px;line-height:20px;font-weight:normal}h5{font-size:14px;line-height:18px;font-weight:normal}h6{font-size:12px;line-height:16px;font-weight:normal}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
这下子我们就有两个文件了,如果一两个引入到页面当中使用还好如果一旦多起来了是不是很麻烦不美观\
我们创建一个 index.scss 文件用来管理 到时候引入一个文件就好啦
注意样式表名称
@import 'reset'; @import 'global';
引入全局使用
修改 main.js 放在公共css的下面即可
四、下单页面的搭建
ok,我们继续看看咋玩,可以看到顶部有一个🎺喇叭旁边有文字滚动\
走去组件库看看
<u-notice-bar color="red" text="本案例使用JSAPI模式拉取微信支付弹出用户进行微信支付操作"></u-notice-bar>
我滴妈 和 ElementPlus一样 so easy to happy! 啊 后面的我就不多说了嗷
使用自定义样式
<template> <view class="app-container"> <view id="index" class="container"> 我是index </view> </view> </template>
跟着PC有肉🥩吃
剩下的就都和PC的一样了我们直接舔
⚠️ 下面的代码都是在 view id="index" 当中
设置头部区域内容
<u-notice-bar color="red" text="本案例使用JSAPI模式拉取微信支付弹出用户进行微信支付操作"></u-notice-bar> <view class="PaymentChannel_title"> <u-tooltip text="个人博客网站: https://yby6.com" copyText="https://yby6.com" overlay></u-tooltip> </view> <view class="PaymentChannel_title"> <u-tooltip text="PC端微信支付系统: https://lzys522.cn/wx" copyText="https://lzys522.cn/wx" overlay></u-tooltip> </view> <view class="PaymentChannel_title"> <u-tooltip text="博客项目案例: https://lzys522.cn" copyText="https://lzys522.cn" overlay></u-tooltip> </view> <view class="PaymentChannel_title" style="color: red; margin-bottom: 10px;font-size: 14px;height: auto !important;"> <u-tooltip text="开源仓库: https://gitee.com/yangbuyi/wxDemo" copyText="https://gitee.com/yangbuyi/wxDemo" overlay></u-tooltip> </view>
交互
编写 列表集合
在 setup 当中编写代码(和pc一样哦)
编写 函数方法
下单页面测试
刷新小程序开发工具
我滴妈太好看了~
小Bug
因编辑器格式化 导致 rpx 出现了空格导致样式丢失
解决将空格去掉即可
