uni-app--》基于小程序开发的电商平台项目实战（七）完结篇

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：uni-app

🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

        ⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第二站就是uni-app开发，希望看到我文章的朋友能对你有所帮助。

        今天开始使用 vue3 + uni-app 搭建一个电商购物的小程序，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的GitHub上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端uni-app知识。然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（阅读此次项目实践文章能够学习到的技术）：

uni-app：跨平台的应用开发框架，基于vue.js可以一套代码同时构建运行在多个平台。

pnpm：高性能、轻量级npm替代品，帮助开发人员更加高效地处理应用程序的依赖关系。

vue3：vue.js最新版本的用于构建用户界面的渐进式JavaScript框架。

typescript：JavaScript的超集，提供了静态类型检查，使得代码更加健壮。

pinia：vue3构建的Vuex替代品，具有响应式能力，提供非常简单的 API，进行状态管理。

uni-ui：基于vue.js和uni-app的前端UI组件库，开发人员可以快速地构建跨平台应用程序。

        如果是第一次接触uni-app并且想学习uni-app的朋友，我是不建议直接从此次实战项目开始看起，可以先阅读一下我以前的基础文章：什么是uniapp？如何开发uniapp？按部就班的学习可以让学习变得更轻松更容易上手哦，闲话少说我们直接开始今天的uni-app实战篇。

目录

订单详情

自定义导航栏交互

订单状态渲染

订单支付

待发货与待收货

删除与取消订单

订单列表

项目打包

小程序端打包

网页端打包

App端打包

上传仓库

订单详情

接下来就到了我们目前项目的最后一个需求订单详情的实现，完成了订单详情功能，本实战项目也开始正式步入尾声了，我会在文章最后附上本实战项目的源代码，需要的朋友可以随时下载学习只求别忘了给作者项目一个 star 就行。接下来让我们一起完成最后的订单详情功能的实现吧！

学习是一件比较枯燥的事情，希望大家能够坚持下去，在泥泞中向光明奔赴！

自定义导航栏交互

当我们在填写订单页面中点击提交订单按钮之后，接下来就跳转到订单详情页面了，订单的详情页面也是需要在分包中进行，因为订单详情的页面我们需要设置自定义导航栏，当我们创建好分包页面之后需要在pages.json文件中设置自定义导航栏：

当我们设置完自定义导航栏之后，原本小程序自带的返回首页或者上一页的按钮就会被自定义导航栏覆盖掉从而不能进行点击，这里不符合用户常用需求，所以这里我们需要单独通过代码来实现：

<!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"><view class="wrap"><navigator v-if="pages.length > 1" open-type="navigateBack" class="back icon-left"><uni-icons type="back" size="30"></uni-icons></navigator><navigator v-else url="/pages/home/home" open-type="switchTab" class="back icon-home"><uni-icons type="home" size="30"></uni-icons></navigator><view class="title">订单详情</view></view>
</view>

后面的具体搭建代码就不再展示，可自行下载源代码进行研读，这里呈现的效果如下：

在导航栏中我们设置了一个过渡动画，这里借助了当前页面栈中的一个动画效果，具体的使用方式讲解可参考官方文档，具体代码如下：

// 获取页面栈
const pages = getCurrentPages()
// 获取当前页面实例，数组最后一项
const pageInstance = pages.at(-1) as any
// 页面渲染完毕，绑定动画效果
onReady(() => {// 动画效果,导航栏背景色pageInstance.animate('.navbar',[{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }],1000,{scrollSource: '#scroller',timeRange: 1000,startScrollOffset: 0,endScrollOffset: 50,},)// 动画效果,导航栏标题pageInstance.animate('.navbar .title', [{ color: 'transparent' }, { color: '#000' }], 1000, {scrollSource: '#scroller',timeRange: 1000,startScrollOffset: 0,endScrollOffset: 50,})// 动画效果,导航栏返回按钮pageInstance.animate('.navbar .back', [{ color: '#fff' }, { color: '#000' }], 1000, {scrollSource: '#scroller',timeRange: 1000,startScrollOffset: 0,endScrollOffset: 50,})
})

呈现的效果如下：

订单状态渲染

接下来实现订单状态功能的实现，根据用户传递过来的商品id生成对应的订单详情，接下来我们开始编写相应的接口函数：

/*** 获取订单详情* @param id 订单id*/
export const getMemberOrderByIdAPI = (id: string) => {return http<OrderResult>({method: 'GET',url: `/member/order/${id}`,})
}

在订单详情页面调用该接口函数，将获取到的数据存储在响应式ref当中：

// 获取订单详情
const order = ref<OrderResult>()
const getMemberOrderByIdData = async () => {const res = await getMemberOrderByIdAPI(query.id || '1714616959061987329')order.value = res.result
}
onLoad(() => {getMemberOrderByIdData()
})

将所有的状态单独抽离出来封装成一个ts组件，如下：

/** 订单状态枚举 */
export enum OrderState {/** 待付款 */DaiFuKuan = 1,/** 待发货 */DaiFaHuo = 2,/** 待收货 */DaiShouHuo = 3,/** 待评价 */DaiPingJia = 4,/** 已完成 */YiWanCheng = 5,/** 已取消 */YiQuXiao = 6,
}/** 订单状态列表 */
export const orderStateList = [{ id: 0, text: '' },{ id: 1, text: '待付款' },{ id: 2, text: '待发货' },{ id: 3, text: '待收货' },{ id: 4, text: '待评价' },{ id: 5, text: '已完成' },{ id: 6, text: '已取消' },
]

通过判断当前有无订单来判断当前处于待支付状态：

借助uniapp提供的倒计时组件，进行待支付跳转的判断：

如果时间超时的话，将当前的状态改为已取消状态：

// 倒计时结束事件
const onTimeup = () => {// 修改订单状态已取消order.value!.orderState = OrderState.YiQuXiao
}

呈现的效果如下：

订单支付

接下来我们实现当我们点击等待付款中的去支付按钮，进行相关支付功能的实现，因为我是个人开发者，所以我的appid是不能调用支付的二维码的，所以这里我们需要设置模拟支付的情况，这里我也编写了两个支持按钮，一个是正式环境的支付另一个是开发环境的模拟支付，如下：

import { http } from '@/utils/http'
/*** 获取微信支付参数* @param data orderId 订单id*/
export const getPayWxPayMiniPayAPI = (data: { orderId: string }) => {return http<WechatMiniprogram.RequestPaymentOption>({method: 'GET',url: '/pay/wxPay/miniPay',data,})
}/*** 模拟支付-内测版* @param data orderId 订单id*/
export const getPayMockAPI = (data: { orderId: string }) => {return http({method: 'GET',url: '/pay/mock',data,})
}

接下来在订单详情界面调用该api函数，如下：

// 订单支付
const onOrderPay = async () => {if (import.meta.env.DEV) {// 开发环境模拟支付await getPayMockAPI({ orderId: query.id })} else {// 正式环境微信支付const res = await getPayWxPayMiniPayAPI({ orderId: query.id })await wx.requestPayment(res.result)}// 关闭当前页，再跳转支付结果页uni.redirectTo({ url: `/subpackage/payment/payment?id=${query.id}` })
}

当订单支付成功之后，我们跳转到支付结果页面，支付结果页面也是一个分包页面：

<template><scroll-view class="viewport" scroll-y @scrolltolower="onScrolltolower"><!-- 订单状态 --><view class="overview"><view class="status icon-checked">支付成功</view><view class="buttons"><navigatorhover-class="none"class="button navigator"url="/pages/home/home"open-type="switchTab">返回首页</navigator><navigatorhover-class="none"class="button navigator":url="`/subpackage/detail/detail?id=${query.id}`"open-type="redirect">查看订单</navigator></view></view><!-- 猜你喜欢 --><SwGuess ref="guessRef" /></scroll-view>
</template>

呈现的结果如下：

待发货与待收货

待发货因为是商家的工作，这里我们编写一个API，用来模拟发货成功：

/*** 模拟发货-内测版* @description 在DEV环境下使用，仅在订单状态为待发货时，可模拟发货，调用后订单状态修改为待收货，包含模拟物流。* @param id 订单id*/
export const getMemberOrderConsignmentByIdAPI = (id: string) => {return http({method: 'GET',url: `/member/order/consignment/${id}`,})
}

首先我们先判断当前是否处于开发环境并处于待发货状态，并且给其设置了一个点击函数：

我们在回调函数中判断当前处于开发环境时调用API函数进行相应的模拟发货，并更改订单状态：

// 是否为开发环境
const isDev = import.meta.env.DEV
// 模拟发货
const onOrderSend = async () => {if (isDev) {await getMemberOrderConsignmentByIdAPI(query.id)uni.showToast({ icon: 'success', title: '模拟发货完成' })// 主动更新订单状态order.value!.orderState = OrderState.DaiShouHuo}
}

然后我们再编写一个确认收获的API，如下：

/*** 确认收货* @description 仅在订单状态为待收货时，可确认收货。* @param id 订单id*/
export const putMemberOrderReceiptByIdAPI = (id: string) => {return http<OrderResult>({method: 'PUT',url: `/member/order/${id}/receipt`,})
}

和上面一样，这里需要我们判断一下当前是否处于待发货状态：

给其设置了一个回调函数，弹窗提示用户相关信息：

// 确认收货
const onOrderConfirm = () => {// 二次确认弹窗uni.showModal({content: '为保障您的权益，请收到货并确认无误后，再确认收货',confirmColor: '#27BA9B',success: async (success) => {if (success.confirm) {const res = await putMemberOrderReceiptByIdAPI(query.id)// 更新订单状态order.value = res.result}},})
}

最终呈现的结果如下：

接下来实现待收货完成之后的订单物流的展示，这里也需要编写相应的API接口：

/*** 获取订单物流* @description 仅在订单状态为待收货，待评价，已完成时，可获取物流信息。* @param id 订单id*/
export const getMemberOrderLogisticsByIdAPI = (id: string) => {return http<OrderLogisticResult>({method: 'GET',url: `/member/order/${id}/logistics`,})
}

编写完接口函数之后，这里我们需要监听当前已经完成了第三种状态之后才能获取物流信息：

这里我们将物流信息获取到的数据通过插值语法进行动态渲染：

最终呈现的结果如下：

删除与取消订单

删除订单页只有当订单处于待评价的时候才会出现：

这里删除订单仍在要借助API函数，如下：

/*** 取消订单* @description 仅在订单状态为待付款时，可取消订单。* @param id 订单id* @param data cancelReason 取消理由*/
export const getMemberOrderCancelByIdAPI = (id: string, data: { cancelReason: string }) => {return http<OrderResult>({method: 'PUT',url: `/member/order/${id}/cancel`,data,})
}

这里我们开始在删除按钮的回调函数中调用该接口函数，删除订单之后将会跳转到订单列表列表界面，这里的仍然要创建一个分包界面，用于存放订单列表界面，这里不再赘述：

// 删除订单
const onOrderDelete = () => {// 二次确认uni.showModal({content: '是否删除订单',confirmColor: '#27BA9B',success: async (success) => {if (success.confirm) {await deleteMemberOrderAPI({ ids: [query.id] })uni.redirectTo({ url: '/subpackage/list/list' })}},})
}

最终呈现的结果如下：

因为订单详情的数据较大，这里我们可以设置一下骨架屏，找到微信小程序的生成骨架屏按钮，将工具生成好的wxml和wxss文件复制到vscode中转换为vue文件，然后导入该组件即可：

最后再处理一下取消订单的弹框

<!-- 取消订单弹窗 -->
<uni-popup ref="popup" type="bottom" background-color="#fff"><view class="popup-root"><view class="title">订单取消</view><view class="description"><view class="tips">请选择取消订单的原因：</view><view class="cell" v-for="item in reasonList" :key="item" @tap="reason = item"><text class="text">{{ item }}</text><radio class="icon" :value="item" :checked="item === reason" /></view></view><view class="footer"><view class="button" @tap="popup?.close?.()">取消</view><view class="button primary" @tap="onOrderCancel">确认</view></view></view>
</uni-popup>

这里仍然需要编写相应的接口函数：

/*** 取消订单* @description 仅在订单状态为待付款时，可取消订单。* @param id 订单id* @param data cancelReason 取消理由*/
export const getMemberOrderCancelByIdAPI = (id: string, data: { cancelReason: string }) => {return http<OrderResult>({method: 'PUT',url: `/member/order/${id}/cancel`,data,})
}

在取消订单的回调函数中调用该接口函数进行取消订单：

// 取消订单
const onOrderCancel = async () => {// 发送请求const res = await getMemberOrderCancelByIdAPI(query.id, { cancelReason: reason.value })// 更新订单信息order.value = res.result// 关闭弹窗popup.value?.close!()// 轻提示uni.showToast({ icon: 'none', title: '订单取消成功' })
}

最终呈现的结果如下：

订单列表

当我们进入到订单列表界面后，首先在页面顶部设置一个tabs按钮：

<view class="tabs"><textclass="item"v-for="(item, index) in orderTabs":key="item.orderState"@tap="activeIndex = index">{{ item.title }}</text><!-- 游标 --><view class="cursor" :style="{ left: activeIndex * 20 + '%' }"></view>
</view><script setup lang="ts">
// tabs 数据
const orderTabs = ref([{ orderState: 0, title: '全部' },{ orderState: 1, title: '待付款' },{ orderState: 2, title: '待发货' },{ orderState: 3, title: '待收货' },{ orderState: 4, title: '待评价' },
])
</script>

在个人中心页面的订单位置，我们可以设置跳转链接进行订单列表的跳转：

订单列表界面接受个人中心页面传递过来的参数进行当前下标比较：

// 接受页面参数
const query = defineProps<{type: string
}>()
// 设置高亮下标
const activeIndex = ref<number>(orderTabs.value.findIndex((v) => v.orderState == Number(query.type)),
)

tabs按钮下面的滚动容器因为状态很多所以这里单独抽离出一个组件，没有啥难度也是调用接口进行数据的渲染，这里就不再赘述了直接给出源代码：

<template><scroll-view scroll-y class="orders" enable-flex><view class="card" v-for="item in orderList" :key="item.id"><!-- 订单信息 --><view class="status"><text class="date">{{ item.createTime }}</text><!-- 订单状态文字 --><text>{{ orderStateList[item.orderState].text }}</text><!-- 待评价/已完成/已取消 状态: 展示删除订单 --><uni-iconsv-if="item.orderState >= OrderState.DaiPingJia"class="icon-delete"type="trash"size="20"></uni-icons></view><!-- 商品信息，点击商品跳转到订单详情，不是商品详情 --><navigatorv-for="sku in item.skus":key="sku.id"class="goods":url="`/subpackage/detail/detail?id=${item.id}`"hover-class="none"><view class="cover"><image mode="aspectFit" :src="sku.image"></image></view><view class="meta"><view class="name ellipsis">{{ sku.name }}</view><view class="type">{{ sku.attrsText }}</view></view></navigator><!-- 支付信息 --><view class="payment"><text class="quantity">共{{ item.totalNum }}件商品</text><text>实付</text><text class="amount"> <text class="symbol">¥</text>{{ item.payMoney }}</text></view><!-- 订单操作按钮 --><view class="action"><!-- 待付款状态：显示去支付按钮 --><template v-if="item.orderState === OrderState.DaiFuKuan"><view class="button primary" @tap="onOrderPay(item.id)">去支付</view></template><template v-else><navigatorv-for="sku in item.skus"class="button secondary":url="`/pages/goods/goods?id=${sku.spuId}`"hover-class="none":key="sku.spuId">再次购买</navigator><!-- 待收货状态: 展示确认收货 --><view v-if="item.orderState === OrderState.DaiShouHuo" class="button primary">确认收货</view></template></view></view><!-- 底部提示文字 --><view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">{{ true ? '没有更多数据~' : '正在加载...' }}</view></scroll-view>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { OrderItem, OrderListParams } from '@/types/order'
import { getMemberOrderAPI } from '@/api/order'
import { OrderState, orderStateList } from '@/api/order/constants'
import { getPayMockAPI, getPayWxPayMiniPayAPI } from '@/api/pay'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 接受父组件传递过来的订单数据
const props = defineProps<{orderState: number
}>()
// 请求参数
const queryParams: OrderListParams = {page: 1,pageSize: 5,orderState: props.orderState,
}
// 获取订单列表
const orderList = ref<OrderItem[]>()
const getMemberOrderData = async () => {const res = await getMemberOrderAPI(queryParams)orderList.value = res.result.items
}
onMounted(() => {getMemberOrderData()
})
// 订单支付
const onOrderPay = async (id: string) => {if (import.meta.env.DEV) {// 开发环境模拟支付await getPayMockAPI({ orderId: id })} else {// 正式环境微信支付const res = await getPayWxPayMiniPayAPI({ orderId: id })await wx.requestPayment(res.result)}// 成功提示uni.showToast({ icon: 'none', title: '支付成功' })// 更新订单状态const order = orderList.value?.find((v) => v.id === id)order!.orderState = OrderState.DaiFaHuo
}
</script>

最终呈现的结果如下：

项目打包

项目完成之后，接下来开始实现项目打包相关的操作，如下：

小程序端打包

终端执行如下命令进行小程序项目的打包：

pnpm build:mp-weixin

可以看到当我们执行打包命令之后，dist文件夹就会生成相应的build文件：

现在我们要把打包后的build文件夹中的mp-weixin导入的微信开发者工具当中，点击微信开发者工具左上角的项目，点击导入项目，然后找到我们打包好的mp-weixin目的，点击确定即可：

上传完成之后，我们就可以在当前的开发者工具中对已经写好的项目进行一些调试，没有问题的话就点击右上角的上传按钮进行上传：

点击确定项目再一次被打包，过一会就会提示上传成功：

上传成功之后，我们就需要登录我们的微信开发者后台管理平台，找到我们的版本管理，就可以看到我们刚刚上传好的项目，然后再填写一些相关信息之后就可以审核发布了，这里不再赘述：

网页端打包

按照uni-app规范开发可保证多平台兼容，但每个平台都有自己的一些特性。注意：网页端不支持微信平台授权登录等功能，但我们可以通过条件编译，让代码按条件编译到不同平台。

条件编译语法：通过特殊注释，以 #ifdef 或 #ifndef 加平台名称 开头，以 #endif 结尾。

如果我们想编译允许网页端的命令，终端执行如下命令：

pnpm dev:h5

进入到网页端之后，我们需要通过条件编译语法，将小程序端特有的代码进行一个特殊注释说明

小程序端有很多，这里就不再一一赘述了，大家可以自行去进行设置

打包之前我们还需要在manifest.json文件中设置网页端特有的基础路径配置：

做好网页端兼容之后，接下来终端执行如下命令进行打包网页端项目：

pnpm build:h5

打包完成之后，我们在打包好的build文件夹下，找到h5文件夹，然后允许index.html文件：

App端打包

接下来我们需要将我们完成的项目进行App端的打包，这里我们需要借助Hbuilder X工具进行，所以我们需要将我们完成好的项目在拖到Hbuilder X工具当中。

这里我们需要先点击manifest.json文件夹配置一下打包App的相关信息

这里设置一下图标：

配置完成之后，接下来我们点击发行中的App云打包，这里我们选择云端正式：

初次使用的话需要点击详情，然后登录到该平台，点击云端证书进行创建即可，我这里已经开始创建了：

ok接下来开始下面的操作没问题直接点击打包即可。

打包完成之后，控制台会出现当前打包完成后生成的apk文件目录，进入该目录进行手机下载即可

上传仓库

创建远程仓库：进入github网址，登录自己的账号后点击右上角头像新建仓库，如下

创建完成后，会跳转到如下界面，上面代码详细的告诉你如何将代码提交到远程库：  

提交代码需要借用一个 git 工具，如何下载这里不再赘述，自行百度。如果想详细的了解git的使用，可以参考一下我之前的专栏：git专栏 ，详细操作如下： 

生成本地仓库：具体步骤如下：

git init 生成工作区

git status 查看提交的文件情况

git add . 提交到暂存区

git commit -m "提交信息" 提交到版本区

推送到远程仓库：具体步骤如下：

git remote add origin git@github.com:ztK63LrD/  关联别名

git push -u origin main 推送分支

推送完成之后，刷新github页面就会将我们推送的代码呈现在页面上，如下：

后面写项目如果想上传直接在vscode工具中运行即可：

然后同步更改到本地仓库当中：

至此项目的大概内容已经完成了，项目的github源代码地址为：项目地址 。如果觉得不错的话可以给个一键三联或者项目源地址给个star哦，您的支持就是博主创作的最大动力。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/115357.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python Pandas数据处理作图——波尔共振实验

Python Pandas数据处理作图——波尔共振实验

import matplotlib.pyplot as plt import pandas as pd from pylab import mplmpl.rcParams["font.sans-serif"] ["SimHei"]data {频率比例w/wr: [1.036, 1.030, 1.025, 1.020, 1.012, 1.007, 1.002,0.997,0.993,0.990,0.986,0.977,0.969],振幅测量值θ&…
阅读更多...
Python实战小项目分享

Python实战小项目分享

Python实战小项目包括网络爬虫、数据分析和可视化、文本处理、图像处理、聊天机器人、任务管理工具、游戏开发和网络服务器等。这些项目提供了实际应用场景和问题解决思路&#xff0c;可以选择感兴趣的项目进行实践&#xff0c;加深对Python编程的理解和掌握。在实践过程中&…
阅读更多...
2023-mac brew安装python最新版本，遇见的问题和处理方式

2023-mac brew安装python最新版本，遇见的问题和处理方式

#### 创建Python3.11.6符号链接我现在遇见这个问题了&#xff1a;python --version -bash: python: command not found 192:bin wangyang$ python3 --version Python 3.9.6 192:bin wangyang$ /usr/local/bin/python3 --version Python 3.11.6我要怎么做&#xff0c;我才可以直…
阅读更多...
Qt耗时操作添加动画等待加载效果

Qt耗时操作添加动画等待加载效果

Qt耗时操作添加动画等待加载效果_qt 等待动画-CSDN博客本例模拟耗时请求实现动画等待加载效果&#xff0c;采用QtConcurrent::run实现异步耗时操作&#xff0c;通过QFutureWatcher异步监测耗时操作结果的返回值做相应的动画演示。_qt 等待动画https://blog.csdn.net/qq_3666686…
阅读更多...
高效访问数据的关键：解析MySQL主键自增长的运作机制！

高效访问数据的关键：解析MySQL主键自增长的运作机制！

文章目录 &#x1f34a; 主键自增长的概念&#x1f34a; 主键自增长的数据类型&#x1f34a; 主键自增长的步长&#x1f34a; 主键自增长的性能优化&#x1f389; 为什么需要主键自增长的性能优化?&#x1f389; 主键自增长的性能优化方案&#x1f4dd; 1. 调整主键自增长的步…
阅读更多...
istio介绍(一)

istio介绍(一)

1. 概念 1.1 虚拟服务 虚拟服务提供流量路由功能&#xff0c;它基于 Istio 和平台提供的基本的连通性和服务发现能力&#xff0c;让您配置如何在服务网格内将请求路由到服务 示例&#xff1a; apiVersion: networking.istio.io/v1alpha3 kind: VirtualService metadata:nam…
阅读更多...
信钰证券：长江电力180亿市值，招商证券、摩根大通等浮盈超一成

信钰证券：长江电力180亿市值，招商证券、摩根大通等浮盈超一成

本周A股限售股解禁规划环比有所上升。 Wind数据核算闪现&#xff0c;除去新上市公司&#xff0c;本周共有64家公司限售股解禁&#xff0c;解禁数量51.52亿股&#xff0c;以最新收盘价核算&#xff08;下同&#xff09;&#xff0c;解禁市值776.21亿元。 本周解禁市值跨越10亿…
阅读更多...
RN：报错info Opening flipper://null/React?device=React%20Native

RN：报错info Opening flipper://null/React?device=React%20Native

背景 在 ios 上使用 debug 模式的时候&#xff0c;报错&#xff1a;info Opening flipper://null/React?deviceReact%20Native&#xff0c;我找到了这个 issue 其实也可以看到现在打开 debug&#xff0c;是 open debug&#xff0c;也不是之前的 debug for chrome 了&#xf…
阅读更多...
每日一题 2316. 统计无向图中无法互相到达点对数（中等，图连通分量）

每日一题 2316. 统计无向图中无法互相到达点对数（中等，图连通分量）

题目很简单&#xff0c;只要求出每个连通分量有多少个节点即可首先通过建立一个字典来表示每个节点的邻接关系遍历每个节点&#xff0c;并通过邻接关系标记在当前连通分量内的所有的点&#xff0c;这样就可以知道一个连通分量内有多少个点在这里我陷入了一个误区&#xff0c;导…
阅读更多...
计算机系统概论

计算机系统概论

1. 现代计算机由哪两部分组成 计算机系统&#xff1a;硬件、软件
阅读更多...
分享一下抽奖活动小程序怎么做

分享一下抽奖活动小程序怎么做

在当今数字化时代&#xff0c;抽奖活动小程序已成为一种高效、创新的营销方式。它不仅能够吸引用户的注意力&#xff0c;提高品牌知名度&#xff0c;还能促进用户参与度&#xff0c;增强用户对品牌的忠诚度。本文将详细介绍如何制作一个成功的抽奖活动小程序&#xff0c;以及它…
阅读更多...
Python爬虫如何设置代理服务器（搭建代理服务器教程）

Python爬虫如何设置代理服务器（搭建代理服务器教程）

在Python爬虫中使用代理服务器可以提高爬取数据的效率和稳定性。本文将为您提供搭建代理服务器的详细教程&#xff0c;并提供示例代码&#xff0c;帮助您在Python爬虫中设置代理服务器&#xff0c;实现更高效、稳定的数据抓取。 Python爬虫怎么设置代理服务器&#xff08;搭建代…
阅读更多...
python打包和发布package

python打包和发布package

打包 偶尔有一些复用性很高&#xff0c;复杂度也很高的函数要反复调用&#xff0c;可以自行打包&#xff0c;安装 打包结构如下 以iso_timer为例 mkdir common vim __init__.py cd common vim __init__.py vim format.py# init.py from .common import *# /common/init.p…
阅读更多...
C++11 正则表达式详解

C++11 正则表达式详解

目录 1 正则表达式语法1.1 字符和特殊字符1.2 限定符1.3 定位符1.4 选择和反向引用 2 C正则表达式标准库常用接口3 C正则表达式模板的使用3.1 匹配&#xff08;Match&#xff09;3.2 搜索&#xff08;Search&#xff09;3.3 分词&#xff08;Tokenize&#xff09;3.4 替换&…
阅读更多...
Python —— hou.NetworkItem class

Python —— hou.NetworkItem class

在一个network内&#xff0c;所有可见元素的基类&#xff1b; 此类没有方法&#xff0c;仅作为 hou.NetworkMovabelItem、hou.NodeConnection 基类存在&#xff0c;这两个子类在网络编辑器内均是可见的&#xff0c;是没有真正有意义的基类的&#xff1b;通过提供一个公共的基类…
阅读更多...
【干货】Java函数式编程公式大全，收藏学习！

【干货】Java函数式编程公式大全，收藏学习！

函数操作是现代编程领域中的核心概念之一&#xff0c;它以类似 Excel 表格的方式进行数据处理和计算。它的特点是使用公式和函数来描述数据之间的关系和计算逻辑&#xff1b;它允许我们以更高效、更有组织的方式管理和处理数据。 在函数式编程中&#xff0c;数据被组织成表格的…
阅读更多...
LongAdder为什么在高并发下保持良好性能？LongAdder源码详细分析

LongAdder为什么在高并发下保持良好性能？LongAdder源码详细分析

文章目录 一、LongAdder概述1、为什么用LongAdder2、LongAdder使用3、LongAdder继承关系图4、总述&#xff1a;LongAdder为什么这么快5、基本原理 二、Striped64源码分析1、Striped64重要概念2、Striped64常用变量或方法3、静态代码块初始化UNSAFE4、casBase方法5、casCellsBus…
阅读更多...
如何利用验证链技术减少大型语言模型中的幻觉

如何利用验证链技术减少大型语言模型中的幻觉

一、前言 随着大型语言模型在自然语言处理领域取得了惊人的进步。相信深度使用过大模型产品的朋友都会发现一个问题&#xff0c;就是有时候在上下文内容比较多&#xff0c;对话比较长&#xff0c;或者是模型本身知识不了解的情况下与GPT模型对话&#xff0c;模型反馈出来的结果…
阅读更多...
阿里云服务器续费流程_一篇文章搞定

阿里云服务器续费流程_一篇文章搞定

阿里云服务器如何续费&#xff1f;续费流程来了&#xff0c;在云服务器ECS管理控制台选择续费实例、续费时长和续费优惠券&#xff0c;然后提交订单&#xff0c;分分钟即可完成阿里云服务器续费流程&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云服务器详细续费方法&am…
阅读更多...
微信扫一扫抽奖活动怎么做

微信扫一扫抽奖活动怎么做

在当今数字化时代&#xff0c;微信作为中国最大的社交媒体平台之一&#xff0c;拥有着庞大的用户群体和广泛的影响力。微信扫一扫抽奖活动作为一种创新的营销方式&#xff0c;可以利用微信的用户基础和社交属性&#xff0c;吸引更多的目标用户参与&#xff0c;提高品牌知名度和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023