feat: 提交模板代码
This commit is contained in:
熊熊熊子路
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/* pages/date/date.wxss */
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 20rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.example-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.example-item {
|
||||
padding: 20rpx;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 12rpx;
|
||||
border-left: 4rpx solid #1890ff;
|
||||
}
|
||||
|
||||
.example-label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.example-format {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 12rpx;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.example-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #1890ff;
|
||||
word-break: break-all;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
padding: 8rpx 20rpx;
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.copy-btn:active {
|
||||
background-color: #40a9ff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
// pages/date/date.ts
|
||||
import { formatTime, formatDateTime } from '../../utils/util'
|
||||
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
// formatTime 示例
|
||||
formatTimeExamples: [] as Array<{ label: string; value: string }>,
|
||||
// formatDateTime 示例 - 不同格式模板
|
||||
formatDateTimeExamples: [] as Array<{ label: string; format: string; value: string }>,
|
||||
// formatDateTime 示例 - 不同输入类型
|
||||
inputTypeExamples: [] as Array<{ label: string; input: string; value: string }>,
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
this.initExamples()
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化所有示例数据
|
||||
*/
|
||||
initExamples() {
|
||||
const now = new Date()
|
||||
const timestamp = now.getTime()
|
||||
const dateString = '2024-01-15 14:30:45'
|
||||
const chineseDateString = '2024年1月15日'
|
||||
|
||||
// formatTime 示例
|
||||
const formatTimeExamples = [
|
||||
{
|
||||
label: '当前时间',
|
||||
value: formatTime(now),
|
||||
},
|
||||
{
|
||||
label: '指定日期',
|
||||
value: formatTime(new Date(2024, 0, 15, 14, 30, 45)),
|
||||
},
|
||||
{
|
||||
label: '昨天',
|
||||
value: formatTime(new Date(timestamp - 24 * 60 * 60 * 1000)),
|
||||
},
|
||||
{
|
||||
label: '明天',
|
||||
value: formatTime(new Date(timestamp + 24 * 60 * 60 * 1000)),
|
||||
},
|
||||
]
|
||||
|
||||
// formatDateTime 示例 - 不同格式模板
|
||||
const formatDateTimeExamples = [
|
||||
{
|
||||
label: '默认格式（YYYY/MM/DD HH:mm:ss）',
|
||||
format: 'YYYY/MM/DD HH:mm:ss',
|
||||
value: formatDateTime(now),
|
||||
},
|
||||
{
|
||||
label: '中文日期格式',
|
||||
format: 'YYYY年MM月DD日 HH:mm:ss',
|
||||
value: formatDateTime(now, 'YYYY年MM月DD日 HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
label: '短日期格式',
|
||||
format: 'YY/MM/DD',
|
||||
value: formatDateTime(now, 'YY/MM/DD'),
|
||||
},
|
||||
{
|
||||
label: '12小时制格式',
|
||||
format: 'YYYY-MM-DD hh:mm:ss A',
|
||||
value: formatDateTime(now, 'YYYY-MM-DD hh:mm:ss A'),
|
||||
},
|
||||
{
|
||||
label: '24小时制格式',
|
||||
format: 'YYYY-MM-DD HH:mm:ss',
|
||||
value: formatDateTime(now, 'YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
label: '仅日期',
|
||||
format: 'YYYY-MM-DD',
|
||||
value: formatDateTime(now, 'YYYY-MM-DD'),
|
||||
},
|
||||
{
|
||||
label: '仅时间',
|
||||
format: 'HH:mm:ss',
|
||||
value: formatDateTime(now, 'HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
label: '带毫秒',
|
||||
format: 'YYYY-MM-DD HH:mm:ss.SSS',
|
||||
value: formatDateTime(now, 'YYYY-MM-DD HH:mm:ss.SSS'),
|
||||
},
|
||||
{
|
||||
label: '美式日期格式',
|
||||
format: 'MM/DD/YYYY',
|
||||
value: formatDateTime(now, 'MM/DD/YYYY'),
|
||||
},
|
||||
{
|
||||
label: '完整中文格式',
|
||||
format: 'YYYY年MM月DD日 HH时mm分ss秒',
|
||||
value: formatDateTime(now, 'YYYY年MM月DD日 HH时mm分ss秒'),
|
||||
},
|
||||
]
|
||||
|
||||
// formatDateTime 示例 - 不同输入类型
|
||||
const inputTypeExamples = [
|
||||
{
|
||||
label: 'Date 对象',
|
||||
input: 'new Date()',
|
||||
value: formatDateTime(now),
|
||||
},
|
||||
{
|
||||
label: '时间戳（数字）',
|
||||
input: `${timestamp}`,
|
||||
value: formatDateTime(timestamp),
|
||||
},
|
||||
{
|
||||
label: '日期字符串（标准格式）',
|
||||
input: dateString,
|
||||
value: formatDateTime(dateString),
|
||||
},
|
||||
{
|
||||
label: '中文日期字符串',
|
||||
input: chineseDateString,
|
||||
value: formatDateTime(chineseDateString),
|
||||
},
|
||||
{
|
||||
label: '仅年份字符串',
|
||||
input: '2024',
|
||||
value: formatDateTime('2024'),
|
||||
},
|
||||
{
|
||||
label: '年月字符串',
|
||||
input: '2024/01',
|
||||
value: formatDateTime('2024/01'),
|
||||
},
|
||||
]
|
||||
|
||||
this.setData({
|
||||
formatTimeExamples,
|
||||
formatDateTimeExamples,
|
||||
inputTypeExamples,
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {},
|
||||
|
||||
/**
|
||||
* 复制文本到剪贴板
|
||||
*/
|
||||
copyText(e: WechatMiniprogram.Touch) {
|
||||
const { text } = e.currentTarget.dataset
|
||||
if (!text) {
|
||||
return
|
||||
}
|
||||
|
||||
wx.setClipboardData({
|
||||
data: text,
|
||||
success: () => {
|
||||
wx.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success',
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,74 @@
|
||||
<!--pages/date/date.wxml-->
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text class="title">日期时间格式化示例</text>
|
||||
</view>
|
||||
|
||||
<!-- formatTime 函数示例 -->
|
||||
<view class="section">
|
||||
<view class="section-title">formatTime 函数示例</view>
|
||||
<view class="section-desc">固定格式：YYYY/MM/DD HH:mm:ss</view>
|
||||
<view class="example-list">
|
||||
<view class="example-item" wx:for="{{formatTimeExamples}}" wx:key="label">
|
||||
<view class="example-label">{{item.label}}：</view>
|
||||
<view class="example-value">
|
||||
<text class="result-text" selectable="{{true}}">{{item.value}}</text>
|
||||
<text
|
||||
class="copy-btn"
|
||||
data-text="{{item.value}}"
|
||||
bindtap="copyText"
|
||||
wx:if="{{item.value}}"
|
||||
>
|
||||
复制
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- formatDateTime 函数示例 - 不同格式模板 -->
|
||||
<view class="section">
|
||||
<view class="section-title">formatDateTime 函数示例 - 不同格式模板</view>
|
||||
<view class="section-desc">支持自定义格式模板，灵活配置日期时间显示格式</view>
|
||||
<view class="example-list">
|
||||
<view class="example-item" wx:for="{{formatDateTimeExamples}}" wx:key="label">
|
||||
<view class="example-label">{{item.label}}</view>
|
||||
<view class="example-format">格式模板：{{item.format}}</view>
|
||||
<view class="example-value">
|
||||
<text class="result-text" selectable="{{true}}">{{item.value}}</text>
|
||||
<text
|
||||
class="copy-btn"
|
||||
data-text="{{item.value}}"
|
||||
bindtap="copyText"
|
||||
wx:if="{{item.value}}"
|
||||
>
|
||||
复制
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- formatDateTime 函数示例 - 不同输入类型 -->
|
||||
<view class="section">
|
||||
<view class="section-title">formatDateTime 函数示例 - 不同输入类型</view>
|
||||
<view class="section-desc">支持 Date 对象、时间戳、日期字符串等多种输入类型</view>
|
||||
<view class="example-list">
|
||||
<view class="example-item" wx:for="{{inputTypeExamples}}" wx:key="label">
|
||||
<view class="example-label">{{item.label}}</view>
|
||||
<view class="example-format">输入：{{item.input}}</view>
|
||||
<view class="example-value">
|
||||
<text class="result-text" selectable="{{true}}">{{item.value}}</text>
|
||||
<text
|
||||
class="copy-btn"
|
||||
data-text="{{item.value}}"
|
||||
bindtap="copyText"
|
||||
wx:if="{{item.value}}"
|
||||
>
|
||||
复制
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
/* pages/index.wxss */
|
||||
.container {
|
||||
padding: 40rpx;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 2rpx solid #eee;
|
||||
}
|
||||
|
||||
.input-textarea {
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
padding: 20rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
background-color: #fafafa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #07c160;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
background-color: #06ad56;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #576b95;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-secondary:active {
|
||||
background-color: #4a5d84;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
margin-bottom: 24rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #fafafa;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
padding: 8rpx 20rpx;
|
||||
background-color: #07c160;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.copy-btn:active {
|
||||
background-color: #06ad56;
|
||||
}
|
||||
|
||||
.error-box {
|
||||
margin-top: 30rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #fff3cd;
|
||||
border: 2rpx solid #ffc107;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 26rpx;
|
||||
color: #856404;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
// pages/index.ts
|
||||
import { Encrypt, Decrypt, BASE64Encrypt, BASE64Decrypt, AESError } from '../../utils/aes'
|
||||
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
// 输入原文
|
||||
plainText: 'Hello, 小程序 AES 加密示例！',
|
||||
// 标准 Base64 加密结果
|
||||
encryptedText: '',
|
||||
// 标准 Base64 解密结果
|
||||
decryptedText: '',
|
||||
// URL Safe Base64 加密结果
|
||||
base64EncryptedText: '',
|
||||
// URL Safe Base64 解密结果
|
||||
base64DecryptedText: '',
|
||||
// 错误信息
|
||||
errorMessage: '',
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
// 页面加载时自动执行一次加密解密示例
|
||||
this.handleEncrypt()
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {},
|
||||
|
||||
/**
|
||||
* 输入原文变化
|
||||
*/
|
||||
onPlainTextInput(e: WechatMiniprogram.Input) {
|
||||
this.setData({
|
||||
plainText: e.detail.value,
|
||||
errorMessage: '',
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 执行标准 Base64 加密
|
||||
*/
|
||||
handleEncrypt() {
|
||||
try {
|
||||
const { plainText } = this.data
|
||||
if (!plainText.trim()) {
|
||||
wx.showToast({
|
||||
title: '请输入要加密的内容',
|
||||
icon: 'none',
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 执行加密
|
||||
const encrypted = Encrypt(plainText)
|
||||
this.setData({
|
||||
encryptedText: encrypted,
|
||||
errorMessage: '',
|
||||
})
|
||||
|
||||
wx.showToast({
|
||||
title: '加密成功',
|
||||
icon: 'success',
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
} catch (error) {
|
||||
const errorMsg = error instanceof AESError ? error.message : '加密失败'
|
||||
this.setData({
|
||||
errorMessage: errorMsg,
|
||||
})
|
||||
wx.showToast({
|
||||
title: errorMsg,
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 执行标准 Base64 解密
|
||||
*/
|
||||
handleDecrypt() {
|
||||
try {
|
||||
const { encryptedText } = this.data
|
||||
if (!encryptedText.trim()) {
|
||||
wx.showToast({
|
||||
title: '请输入要解密的内容',
|
||||
icon: 'none',
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 执行解密
|
||||
const decrypted = Decrypt(encryptedText)
|
||||
if (decrypted === null) {
|
||||
this.setData({
|
||||
errorMessage: '解密失败：密钥不匹配或密文被篡改',
|
||||
})
|
||||
wx.showToast({
|
||||
title: '解密失败',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.setData({
|
||||
decryptedText: decrypted,
|
||||
errorMessage: '',
|
||||
})
|
||||
|
||||
wx.showToast({
|
||||
title: '解密成功',
|
||||
icon: 'success',
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
} catch (error) {
|
||||
const errorMsg = error instanceof AESError ? error.message : '解密失败'
|
||||
this.setData({
|
||||
errorMessage: errorMsg,
|
||||
})
|
||||
wx.showToast({
|
||||
title: errorMsg,
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 执行 URL Safe Base64 加密
|
||||
*/
|
||||
handleBase64Encrypt() {
|
||||
try {
|
||||
const { plainText } = this.data
|
||||
if (!plainText.trim()) {
|
||||
wx.showToast({
|
||||
title: '请输入要加密的内容',
|
||||
icon: 'none',
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 执行 URL Safe Base64 加密
|
||||
const encrypted = BASE64Encrypt(plainText)
|
||||
this.setData({
|
||||
base64EncryptedText: encrypted,
|
||||
errorMessage: '',
|
||||
})
|
||||
|
||||
wx.showToast({
|
||||
title: '加密成功',
|
||||
icon: 'success',
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
} catch (error) {
|
||||
const errorMsg = error instanceof AESError ? error.message : '加密失败'
|
||||
this.setData({
|
||||
errorMessage: errorMsg,
|
||||
})
|
||||
wx.showToast({
|
||||
title: errorMsg,
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 执行 URL Safe Base64 解密
|
||||
*/
|
||||
handleBase64Decrypt() {
|
||||
try {
|
||||
const { base64EncryptedText } = this.data
|
||||
if (!base64EncryptedText.trim()) {
|
||||
wx.showToast({
|
||||
title: '请输入要解密的内容',
|
||||
icon: 'none',
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 执行 URL Safe Base64 解密
|
||||
const decrypted = BASE64Decrypt(base64EncryptedText)
|
||||
if (decrypted === null) {
|
||||
this.setData({
|
||||
errorMessage: '解密失败：密钥不匹配或密文被篡改',
|
||||
})
|
||||
wx.showToast({
|
||||
title: '解密失败',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.setData({
|
||||
base64DecryptedText: decrypted,
|
||||
errorMessage: '',
|
||||
})
|
||||
|
||||
wx.showToast({
|
||||
title: '解密成功',
|
||||
icon: 'success',
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
} catch (error) {
|
||||
const errorMsg = error instanceof AESError ? error.message : '解密失败'
|
||||
this.setData({
|
||||
errorMessage: errorMsg,
|
||||
})
|
||||
wx.showToast({
|
||||
title: errorMsg,
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 复制文本到剪贴板
|
||||
*/
|
||||
copyText(e: WechatMiniprogram.Touch) {
|
||||
const { text } = e.currentTarget.dataset
|
||||
if (!text) {
|
||||
return
|
||||
}
|
||||
|
||||
wx.setClipboardData({
|
||||
data: text,
|
||||
success: () => {
|
||||
wx.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success',
|
||||
}).catch(() => {
|
||||
console.error('showToast error')
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,104 @@
|
||||
<!--pages/index.wxml-->
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text class="title">AES 加密解密示例</text>
|
||||
</view>
|
||||
|
||||
<!-- 原文输入区域 -->
|
||||
<view class="section">
|
||||
<view class="section-title">原文输入</view>
|
||||
<textarea
|
||||
class="input-textarea"
|
||||
value="{{plainText}}"
|
||||
placeholder="请输入要加密的内容"
|
||||
bindinput="onPlainTextInput"
|
||||
maxlength="500"
|
||||
show-confirm-bar="{{false}}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 标准 Base64 加密解密 -->
|
||||
<view class="section">
|
||||
<view class="section-title">标准 Base64 加密/解密</view>
|
||||
|
||||
<view class="action-bar">
|
||||
<button class="btn btn-primary" bindtap="handleEncrypt">加密</button>
|
||||
<button class="btn btn-secondary" bindtap="handleDecrypt">解密</button>
|
||||
</view>
|
||||
|
||||
<view class="result-box">
|
||||
<view class="result-label">加密结果：</view>
|
||||
<view class="result-content">
|
||||
<text class="result-text" selectable="{{true}}">{{encryptedText || '暂无'}}</text>
|
||||
<text
|
||||
class="copy-btn"
|
||||
data-text="{{encryptedText}}"
|
||||
bindtap="copyText"
|
||||
wx:if="{{encryptedText}}"
|
||||
>
|
||||
复制
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="result-box">
|
||||
<view class="result-label">解密结果：</view>
|
||||
<view class="result-content">
|
||||
<text class="result-text" selectable="{{true}}">{{decryptedText || '暂无'}}</text>
|
||||
<text
|
||||
class="copy-btn"
|
||||
data-text="{{decryptedText}}"
|
||||
bindtap="copyText"
|
||||
wx:if="{{decryptedText}}"
|
||||
>
|
||||
复制
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- URL Safe Base64 加密解密 -->
|
||||
<view class="section">
|
||||
<view class="section-title">URL Safe Base64 加密/解密</view>
|
||||
|
||||
<view class="action-bar">
|
||||
<button class="btn btn-primary" bindtap="handleBase64Encrypt">加密</button>
|
||||
<button class="btn btn-secondary" bindtap="handleBase64Decrypt">解密</button>
|
||||
</view>
|
||||
|
||||
<view class="result-box">
|
||||
<view class="result-label">加密结果：</view>
|
||||
<view class="result-content">
|
||||
<text class="result-text" selectable="{{true}}">{{base64EncryptedText || '暂无'}}</text>
|
||||
<text
|
||||
class="copy-btn"
|
||||
data-text="{{base64EncryptedText}}"
|
||||
bindtap="copyText"
|
||||
wx:if="{{base64EncryptedText}}"
|
||||
>
|
||||
复制
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="result-box">
|
||||
<view class="result-label">解密结果：</view>
|
||||
<view class="result-content">
|
||||
<text class="result-text" selectable="{{true}}">{{base64DecryptedText || '暂无'}}</text>
|
||||
<text
|
||||
class="copy-btn"
|
||||
data-text="{{base64DecryptedText}}"
|
||||
bindtap="copyText"
|
||||
wx:if="{{base64DecryptedText}}"
|
||||
>
|
||||
复制
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 错误信息显示 -->
|
||||
<view class="error-box" wx:if="{{errorMessage}}">
|
||||
<text class="error-text">{{errorMessage}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"navigationBarTitleText": "Request 使用示例",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationBarTextStyle": "black",
|
||||
"usingComponents": {
|
||||
"t-input": "/miniprogram_npm/tdesign-miniprogram/input/input",
|
||||
"t-button": "/miniprogram_npm/tdesign-miniprogram/button/button"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
/* pages/login/login.wxss */
|
||||
|
||||
// 容器样式
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
background: white;
|
||||
padding: 40rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 头部标题区域
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
.title {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 28rpx;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// 功能区块样式
|
||||
.form-section {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
// 输入框样式
|
||||
.input-item {
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
// 信息展示框
|
||||
.info-box {
|
||||
margin-top: 30rpx;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
border-left: 6rpx solid #0052d9;
|
||||
|
||||
&.success {
|
||||
background: #e8f5e9;
|
||||
border-left-color: #4caf50;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
// 头像区域
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.avatar-preview {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 100rpx;
|
||||
border: 4rpx solid #0052d9;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 100rpx;
|
||||
border: 4rpx dashed #cccccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8f9fa;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 文档说明区域
|
||||
.doc-section {
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 30rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
|
||||
.doc-item {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 1.8;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* Login 页面 - request.ts 使用示例
|
||||
* 演示网络请求封装的各种用法：GET、POST、PUT、DELETE、文件上传等
|
||||
*/
|
||||
|
||||
import { loginReq, type LoginParams } from '../../api/login'
|
||||
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
// 登录表单数据
|
||||
username: '王波林0001',
|
||||
password: '1/OBSNrCge2rzKLaQduNpg==',
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {},
|
||||
|
||||
// ==================== 输入框事件处理 ====================
|
||||
|
||||
/**
|
||||
* 用户名输入变化
|
||||
*/
|
||||
onUsernameChange(e: WechatMiniprogram.Input) {
|
||||
this.setData({
|
||||
username: e.detail.value,
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 密码输入变化
|
||||
*/
|
||||
onPasswordChange(e: WechatMiniprogram.Input) {
|
||||
this.setData({
|
||||
password: e.detail.value,
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户ID输入变化
|
||||
*/
|
||||
onUserIdChange(e: WechatMiniprogram.Input) {
|
||||
this.setData({
|
||||
userId: e.detail.value,
|
||||
})
|
||||
},
|
||||
|
||||
// ==================== POST 请求示例 ====================
|
||||
|
||||
/**
|
||||
* 登录处理（显示 loading）
|
||||
* 演示：POST 请求 + 默认 loading + TypeScript 类型
|
||||
*/
|
||||
async handleLogin() {
|
||||
const { username, password } = this.data
|
||||
|
||||
// 表单验证
|
||||
if (!username || !password) {
|
||||
wx.showToast({
|
||||
title: '请输入用户名和密码',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// POST 请求示例 - 默认显示 loading
|
||||
const loginParams: LoginParams = { userName: username, password }
|
||||
const res = await loginReq(loginParams)
|
||||
console.warn(res)
|
||||
|
||||
// 模拟保存 token
|
||||
// const app = getApp<IAppOption>()
|
||||
// if (res.data?.token) {
|
||||
// app.globalData.token = res.data.token
|
||||
// }
|
||||
|
||||
// wx.showToast({
|
||||
// title: '登录成功',
|
||||
// icon: 'success',
|
||||
// })
|
||||
|
||||
// 实际项目中可以跳转到首页
|
||||
// setTimeout(() => {
|
||||
// wx.switchTab({
|
||||
// url: '/pages/index/index'
|
||||
// })
|
||||
// }, 1500)
|
||||
} catch (error) {
|
||||
console.error('登录失败：', error)
|
||||
// 错误已在拦截器中统一处理，这里可以做额外处理
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {},
|
||||
})
|
||||
@@ -0,0 +1,36 @@
|
||||
<!--pages/login/login.wxml-->
|
||||
<view class="login-container">
|
||||
<!-- 标题区域 -->
|
||||
<view class="header">
|
||||
<text class="title">Request.ts 使用示例</text>
|
||||
<text class="subtitle">演示网络请求封装的各种用法</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录表单区域 -->
|
||||
<view class="form-section">
|
||||
<view class="section-title">1. POST 请求示例 - 登录</view>
|
||||
|
||||
<t-input
|
||||
placeholder="请输入用户名"
|
||||
value="{{username}}"
|
||||
bind:change="onUsernameChange"
|
||||
class="input-item"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<t-input
|
||||
placeholder="请输入密码"
|
||||
value="{{password}}"
|
||||
type="password"
|
||||
bind:change="onPasswordChange"
|
||||
class="input-item"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<view class="button-group">
|
||||
<t-button theme="primary" size="large" bind:tap="handleLogin" block>
|
||||
登录
|
||||
</t-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user