侧边栏壁纸
博主头像
杨不易呀

你的压力来源于无法自律,只是假装努力,现状跟不上内心欲望,所以你焦虑又恐慌。——杨不易呀

  • 累计撰写 71 篇文章
  • 累计创建 71 个标签
  • 累计收到 23 条评论

从零玩转系列之微信小程序微信支付实战UniApp基础项目搭建

杨不易呀
2023-09-02 / 0 评论 / 0 点赞 / 406 阅读 / 3,154 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-09-02,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

一、前言

欢迎来到本期的博客!

本篇将为您介绍微信支付在小程序 Uniapp 端的全新篇章。微信支付作为移动支付领域的先驱之一,不断演进与创新,为用户和开发者提供更便捷、安全的支付体验。在本文中,我们将深入探讨微信支付在小程序 Uniapp 端的应用与优势。

随着移动互联网的蓬勃发展,小程序成为了用户获取信息、进行交互和购买商品的重要平台之一。微信支付作为小程序中不可或缺的支付方式,不仅为用户提供了快捷方便的支付方式,还为商家创造了更多的销售机会。在这个背景下,微信支付不断完善其在小程序 Uniapp 端的集成,以满足不同场景下的支付需求。

在本文中,我们将探讨微信支付在小程序 Uniapp 端的接入步骤,介绍其提供的各种支付功能,我们还将深入研究微信支付在安全性方面的保障措施,确保用户的支付信息和资金得到充分的保护。

无论您是小程序开发者还是企业主,亦或是对移动支付技术感兴趣的读者,本文都将为您提供有关在小程序 Uniapp 端集成微信支付的实用知识和技巧。让我们一同探索微信支付的新篇章,为用户营造更加便捷、安全的支付环境。

💗 本次为前端知识点如果不懂前段可以去仓库直接copy出来使用,如果有什么问题可以在评论区留言,我会第一时间回复大家的.关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

输入图片说明

本次项目使用技术栈

后端: SpringBoot3.1.x、Mysql8.0、MybatisPlus

前端: Vue3、Vite、ElementPlus

小程序: Uniapp、UviewPlus、Vue3

演示地址查看 WEB端 小程序

二、介绍

什么是uni-app?

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。

uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。

为什么要选择uni-app?

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

输入图片说明

功能框架图

从下面uni-app功能框架图可看出,uni-app在跨平台的过程中,不牺牲平台特色,可优雅的调用平台专有能力,真正做到海纳百川、各取所长。

输入图片说明

只能说Uni-App牛逼!!!

三、快速上手

uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。

可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。

开始之前,开发者需先下载安装如下工具:

HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

我这里就使用HbuilderX来构建项目

创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目(快捷键Ctrl+N):

输入图片说明

选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。

uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例,还有一个重要模板是 uni ui项目模板,日常开发推荐使用该模板,已内置大量常用组件。

输入图片说明

开发者也可以使用cli方式创建项目,另见文档

差别是:HBuilderX创建的项目根目录就是源码,可直接编辑。uni-app的编译器在HBuilderX的插件目录下,跟随HBuilderX升级而一起升级。

如果开发者习惯于node模式的项目,对HBuilderX可视化方式感到困惑,可另行参考文档:## cli创建项目和HBuilderX可视化界面创建项目的区别

输入图片说明

运行uni-app

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。

注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。

输入图片说明

注意:微信开发者工具需要开启服务端口 在微信工具的设置->安全。

输入图片说明

点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具

输入图片说明

四、UviewPlus组件库

在PC端我们引入了ELementPLus的组件库那么小程序也有自己的组件库 这里我们就使用 UviewPlus

uview-plus3.0是基于uView2.x修改的vue3版本,感谢uView2.x开发者。

uview-plus来源于社区,也回归到社区,正是有一群热爱uni-app生态的同学推着它前行,而我们也一如既往的承诺,uview-plus永久开源,永远免费。

关于uview-plus的取名来由,就是uview加上plus。

关于uview的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.jsVueView(延伸为UI、视图之意)同音,同时view组件是uni-app中 最基础,最重要的组件,故取名uview-plus,表达源于uni-appVue之意,同时在此也对它们表示感谢。

uview-plus是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序,其它小程序平台的兼容可能存在一些问题,后续会针对这方面持续优化。

输入图片说明

安装

点击下载地址 到dcloud

输入图片说明

输入图片说明

输入图片说明

配置

关于SCSS

uview-plus依赖SCSS,您必须要安装此插件,否则无法正常运行。

  • 如果您的项目是由HBuilder X创建的,相信已经安装scss插件,如果没有,请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装, 如不生效,重启HX即可

引入uview-plus主JS库

在项目根目录中的main.js中,引入并使用uview-plus的JS库,注意这两行要放在const app = createSSRApp(App)之后。

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
import uviewPlus from '@/uni_modules/uview-plus'
/* 每个页面公共css */
import "@/uni_modules/uview-plus/index.scss";

export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

在引入uview-plus的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件,放在第一行

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';

配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

温馨提示

  1. uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。
  2. 请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。
// pages.json

"easycom": {
		"custom": {
			"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
			"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
		}
	}

配置TabBar菜单栏

{
	"easycom": {
		"custom": {
			"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
			"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
		}
	},
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages

		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "杨不易呀"
			}
		},
		{
			"path": "pages/order/order",
			"style": {
				"navigationBarTitleText": "杨不易呀-我的订单"
			}
		},
		{
			"path": "pages/about/about",
			"style": {
				"navigationBarTitleText": "杨不易呀-关于"
			}
		}

	],
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#1296db",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/index/index",
				// "iconPath": "static/icon/fun.png",
				// "selectedIconPath": "static/icon/fun-selected.png",
				"text": "购买课程"
			},
			{
				"pagePath": "pages/order/order",
				// "iconPath": "static/icon/order_1.png",
				// "selectedIconPath": "static/icon/order_2.png",
				"text": "我的订单"
			},
			{
				"pagePath": "pages/about/about",
				// "iconPath": "static/icon/about_1.png",
				// "selectedIconPath": "static/icon/about_2.png",
				"text": "关于"
			}
		]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}

}

分页创建 Index、Order、About 页面

输入图片说明

输入图片说明

tabBar的图标后续可在仓库当中下载

配置完成

去官网随便cv一个组件来看看

文档: https://uiadmin.net/uview-plus/components/button.html

输入图片说明

如果样式不起效果则重新运行和在微信开发者工具当中清除缓存

输入图片说明

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

0
广告 广告

评论区