uni-app 小兔鲜儿 Day 6（有作业）

已于 2024-04-28 10:01:07 修改
阅读量562 收藏 8
点赞数 25
分类专栏： uniapp 文章标签： uni-app vue.js javascript
于 2024-04-13 08:22:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61654952/article/details/137704990
版权

​

黑马程序员uni-app 小兔鲜儿 项目及bug记录（下） Day 6（有作业）

  • 包含视频中提到的作业及最终琐屑代码

Day 6

填写订单页面

image-20240411153223677

  • 相关琐屑代码
<script setup lang="ts">
import { computed, ref } from 'vue'
import { getMemberOrderPreAPI } from '@/services/order'
import { onLoad } from '@dcloudio/uni-app'
import type { OrderPreResult } from '@/types/order'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 订单备注
const buyerMessage = ref('')
// 配送时间
const deliveryList = ref([
  { type: 1, text: '时间不限 (周一至周日)' },
  { type: 2, text: '工作日送 (周一至周五)' },
  { type: 3, text: '周末配送 (周六至周日)' },
])
// 当前配送时间下标
const activeIndex = ref(0)
// 当前配送时间
const activeDelivery = computed(() => deliveryList.value[activeIndex.value])
// 修改配送时间
const onChangeDelivery: UniHelper.SelectorPickerOnChange = (ev) => {
  activeIndex.value = ev.detail.value
}

// 获取订单信息
const orderPre = ref<OrderPreResult>()
const getMemberOrderPreData = async () => {
  const res = await getMemberOrderPreAPI()
  orderPre.value = res.result
}
onLoad(() => {
  getMemberOrderPreData()
})
</script>

<template>
  <scroll-view scroll-y class="viewport">
    <!-- 收货地址 -->
    <navigator
      v-if="false"
      class="shipment"
      hover-class="none"
      url="/pagesMember/address/address?from=order"
    >
      <view class="user"> 张三 13333333333 </view>
      <view class="address"> 广东省 广州市 天河区 黑马程序员3 </view>
      <text class="icon icon-right"></text>
    </navigator>
    <navigator
      v-else
      class="shipment"
      hover-class="none"
      url="/pagesMember/address/address?from=order"
    >
      <view class="address"> 请选择收货地址 </view>
      <text class="icon icon-right"></text>
    </navigator>

    <!-- 商品信息 -->
    <view class="goods">
      <navigator
        v-for="item in orderPre?.goods"
        :key="item.skuId"
        :url="`/pages/goods/goods?id=${item.id}`"
        class="item"
        hover-class="none"
      >
        <image class="picture" :src="item.picture" />
        <view class="meta">
          <view class="name ellipsis"> {{ item.name }}</view>
          <view class="attrs">{{ item.attrsText }} </view>
          <view class="prices">
            <view class="pay-price symbol">{{ item.payPrice }}</view>
            <view class="price symbol"> {{ item.price }} </view>
          </view>
          <view class="count">{{ item.count }}</view>
        </view>
      </navigator>
    </view>

    <!-- 配送及支付方式 -->
    <view class="related">
      <view class="item">
        <text class="text">配送时间</text>
        <picker :range="deliveryList" range-key="text" @change="onChangeDelivery">
          <view class="icon-fonts picker">{{ activeDelivery.text }}</view>
        </picker>
      </view>
      <view class="item">
        <text class="text">订单备注</text>
        <input
          class="input"
          :cursor-spacing="30"
          placeholder="选题，建议留言前先与商家沟通确认"
          v-model="buyerMessage"
        />
      </view>
    </view>

    <!-- 支付金额 -->
    <view class="settlement">
      <view class="item">
        <text class="text">商品总价: </text>
        <text class="number symbol">{{ orderPre?.summary.totalPayPrice.toFixed(2) }}</text>
      </view>
      <view class="item">
        <text class="text">运费: </text>
        <text class="number symbol">{{ orderPre?.summary.postFee.toFixed(2) }}</text>
      </view>
    </view>
  </scroll-view>

  <!-- 吸底工具栏 -->
  <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
    <view class="total-pay symbol">
      <text class="number">{{ orderPre?.summary.totalPrice.toFixed(2) }}</text>
    </view>
    <view class="button" :class="{ disabled: true }"> 提交订单 </view>
  </view>
</template>

填写订单 收货地址

image-20240411195319068

填写订单 立即购买

image-20240411201435605

作业

商品详情页收货地址

  • 获取收货地址信息在 address.vue也有用到 因此进行封装
// composables/index.ts
// 获取收货地址列表数据
export const useAddressList = () => {
  const addressList = ref<AddressItem[]>([])
  const getMemberAddressData = async () => {
    const res = await getMemberAddressAPI()
    addressList.value = res.result
  }
  return { addressList, getMemberAddressData }
}

//goods/goods.vue
// 地址列表数据 打算以父组组件通信的方式传过去
const { addressList, getMemberAddressData } = useAddressList()
// 页面加载
onLoad(() => {
  getGoodsByIdData(), getMemberAddressData()
})
    <!-- uni-ui 弹出层 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <AddressPanel
        v-if="popupName === 'address'"
        :addressList="addressList"
        @close="popup?.close()"
      />
      <ServicePanel v-if="popupName === 'service'" @close="popup?.close()" />
    </uni-popup>

// AddressPanel.vue
<script setup lang="ts">
import { useAddressList } from '@/composables'
import { defineProps } from 'vue'
import type { AddressItem } from '@/types/address'

const props = defineProps<{
  addressList: AddressItem[]
}>()

const addressList = props.addressList
</script>

<template>
  <view class="address-panel">
    <!-- 关闭按钮 -->
    <text class="close icon-close"></text>
    <!-- 标题 -->
    <view class="title">配送至</view>
    <!-- 内容 -->
    <view class="content" v-for="QiuAddress in addressList" :key="QiuAddress.id">
      <view class="item">
        <view class="user">{{ QiuAddress.receiver }} {{ QiuAddress.contact }} </view>
        <view class="address">{{ QiuAddress.fullLocation }}{{ QiuAddress.address }}</view>
        <text class="icon icon-checked"></text>
      </view>
    </view>
    <view class="footer">
      <view class="button primary"> 新建地址 </view>
      <view v-if="false" class="button primary">确定</view>
    </view>
  </view>
</template>

填写订单 提交订单

image-20240411203429476

订单详情

image-20240412090309634

  • 这里uniapp进行了升级 可看官方文档

image-20240412090615618

image-20240412100457027

作业 再次购买实现 和骨架屏

  • 再次购买没有看懂其实现的逻辑
  • 最近博主忙 改日写

订单倒计时组件

  • 查看unapp官网进行配置即可

去支付

image-20240412105218443

image-20240412110030057

模拟发货

image-20240412110718013

确认收货

image-20240412111809445

物流信息 原文档未记录

    // 订单页渲染代码 和物流信息
// order是订单对象
const order = ref<OrderResult>()
const getMemberOrderByIdData = async () => {
  const res = await getMemberOrderByIdAPI(query.id)
  order.value = res.result
  if (
    [OrderState.DaiShouHuo, OrderState.DaiPingJia, OrderState.YiQuXiao].includes(
      order.value?.orderState,
    )
  ) {
    getMemberOrderLogisticsByIdData()
  }
}
// 物流信息
const logisticList = ref<LogisticItem[]>([])
const getMemberOrderLogisticsByIdData = async () => {
  const res = await getMemberOrderLogisticsByIdAPI(query.id)
  logisticList.value = res.result.list
}

    
    <!-- 配送状态 -->
      <view class="shipment">
        <!-- 订单物流信息 -->
        <view v-for="item in logisticList" :key="item.id" class="item">
          <view class="message">
            {{ item.text }}
          </view>
          <view class="date"> {{ item.time }} </view>
        </view>
        <!-- 用户收货地址 -->
        <view class="locate">
          <view class="user"> {{ order.receiverContact }} {{ order.receiverMobile }} </view>
          <view class="address"> {{ order.receiverAddress }} </view>
        </view>
      </view>

image-20240412120306473

删除订单

image-20240412171814633

作业 取消订单

/**
 * 取消订单
 * @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,
  })
}


//pagesOrder/detail/detail.vue
// 取消理由
const cancelReason = reason.value
// 确认取消函数
const CancelOrder = () => {
  getMemberOrderCancelByIdAPI(order.value!.id, { cancelReason })
  uni.showToast({ icon: 'success', title: '取消成功' })
  setTimeout(() => {
    uni.redirectTo({ url: `/pages/cart/cart` })
  }, 400)
}

  <!-- 取消订单弹窗 -->
  <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>
          <text class="icon" :class="{ checked: item === reason }"></text>
        </view>
      </view>
      <view class="footer">
        <view class="button" @tap="popup?.close?.()">取消</view>
        <view class="button primary" @tap="CancelOrder()">确认</view>
      </view>
    </view>
  </uni-popup>

tabs滑动切换

image-20240412131817948

页面传参高亮显示

image-20240412132232302

订单的列表渲染

image-20240412135247292

image-20240412140848976

全部琐屑代码 不包括作业部分

<script setup lang="ts">
import { useGuessList } from '@/composables'
import { ref } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import {
  deleteMemberOrderAPI,
  getMemberOrderByIdAPI,
  getMemberOrderConsignmentByIdAPI,
  getMemberOrderLogisticsByIdAPI,
  getRepurchaseOrderByIdAPI,
  putMemberOrderReceiptByIdAPI,
} from '@/services/order'
import type { LogisticItem, OrderResult } from '@/types/order'
import { OrderState, orderStateList } from '@/services/constants'
import { getPayMockAPI, getPayWxPayMiniPayAPI } from '@/services/pay'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 猜你喜欢
const { guessRef, onScrolltolower } = useGuessList()
// 弹出层组件
const popup = ref<UniHelper.UniPopupInstance>()
// 取消原因列表
const reasonList = ref([
  '商品无货',
  '不想要了',
  '商品信息填错了',
  '地址信息填写错误',
  '商品降价',
  '其它',
])
// 订单取消原因
const reason = ref('')
// 复制内容
const onCopy = (id: string) => {
  // 设置系统剪贴板的内容
  uni.setClipboardData({ data: id })
}
// 获取页面参数
const query = defineProps<{
  id: string
}>()

// 获取页面栈
const pages = getCurrentPages()
// 获取当前页面实例，数组最后一项
const pageInstance = pages.at(-1) as any

// 页面渲染完毕，绑定动画效果
onReady(() => {
  // 动画效果,导航栏背景色
  pageInstance.animate(
    '.navbar', // 选择器
    [{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }], // 关键帧信息
    1000, // 动画持续时长
    {
      scrollSource: '#scroller', // scroll-view 的选择器
      startScrollOffset: 0, // 开始滚动偏移量
      endScrollOffset: 50, // 停止滚动偏移量
      timeRange: 1000, // 时间长度
    },
  )
  // 动画效果,导航栏标题
  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,
  })
})
// 订单页渲染代码 和物流信息
// order是订单对象
const order = ref<OrderResult>()
const getMemberOrderByIdData = async () => {
  const res = await getMemberOrderByIdAPI(query.id)
  order.value = res.result
  if (
    [OrderState.DaiShouHuo, OrderState.DaiPingJia, OrderState.YiQuXiao].includes(
      order.value?.orderState,
    )
  ) {
    getMemberOrderLogisticsByIdData()
  }
}
// 物流信息
const logisticList = ref<LogisticItem[]>([])
const getMemberOrderLogisticsByIdData = async () => {
  const res = await getMemberOrderLogisticsByIdAPI(query.id)
  logisticList.value = res.result.list
}

onLoad(() => {
  getMemberOrderByIdData()
})
// 再次购买接口
// TODO
const getRepurchaseOrderByIdData = (id: string) => {
  getRepurchaseOrderByIdAPI(id)
}

// 倒计时结束事件
const onTimeup = () => {
  // 修改订单状态为已取消
  order.value!.orderState = OrderState.YiQuXiao
}
// 订单支付
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: `/pagesOrder/payment/payment?id=${query.id}` })
}
// 是否为开发环境
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
  }
}

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

// 删除订单
const onOrderDelete = () => {
  uni.showModal({
    content: '是否删除订单',
    success: async (success) => {
      if (success.confirm) {
        await deleteMemberOrderAPI({ ids: [query.id] })
        uni.redirectTo({ url: '/pagesOrder/list/list' })
      }
    },
  })
}
</script>

<template>
  <!-- 自定义导航栏: 默认透明不可见, 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"
      ></navigator>
      <navigator v-else url="/pages/index/index" open-type="switchTab" class="back icon-home">
      </navigator>
      <view class="title">订单详情</view>
    </view>
  </view>
  <scroll-view scroll-y class="viewport" id="scroller" @scrolltolower="onScrolltolower">
    <template v-if="order">
      <!-- 订单状态 -->
      <view class="overview" :style="{ paddingTop: safeAreaInsets!.top + 20 + 'px' }">
        <!-- 待付款状态:展示去支付按钮和倒计时 -->
        <template v-if="order.orderState === OrderState.DaiFuKuan">
          <view class="status icon-clock">等待付款</view>
          <view class="tips">
            <text class="money">应付金额: ¥ {{ order.payMoney }}</text>
            <text class="time">支付剩余</text>
            <!-- 倒计时组件 -->
            <uni-countdown
              :second="order.countdown"
              color="#fff"
              splitor-color="#fff"
              :show-day="false"
              :show-colon="false"
              @timeup="onTimeup"
            />
          </view>
          <view class="button" @tap="onOrderPay">去支付</view>
        </template>
        <!-- 其他订单状态:展示再次购买按钮 -->
        <template v-else>
          <!-- 订单状态文字 -->
          <!-- 通过订单号来访问 外面使用v-if做了一个order的判断 -->
          <view class="status"> {{ orderStateList[order?.orderState].text }} </view>
          <view class="button-group">
            <navigator
              class="button"
              :url="`/pagesOrder/create/create?orderId=${query.id}`"
              hover-class="none"
              @tap="getRepurchaseOrderByIdData(query.id)"
            >
              再次购买
            </navigator>
            <!-- 待发货状态：模拟发货,开发期间使用,用于修改订单状态为已发货 -->
            <view
              v-if="isDev && order.orderState == OrderState.DaiFaHuo"
              @tap="onOrderSend"
              class="button"
            >
              模拟发货
            </view>
            <!-- 待收货状态: 展示确认收货按钮 -->
            <view
              v-if="order.orderState === OrderState.DaiShouHuo"
              @tap="onOrderConfirm"
              class="button"
            >
              确认收货
            </view>
          </view>
        </template>
      </view>
      <!-- 配送状态 -->
      <view class="shipment">
        <!-- 订单物流信息 -->
        <view v-for="item in logisticList" :key="item.id" class="item">
          <view class="message">
            {{ item.text }}
          </view>
          <view class="date"> {{ item.time }} </view>
        </view>
        <!-- 用户收货地址 -->
        <view class="locate">
          <view class="user"> {{ order.receiverContact }} {{ order.receiverMobile }} </view>
          <view class="address"> {{ order.receiverAddress }} </view>
        </view>
      </view>

      <!-- 商品信息 -->
      <view class="goods">
        <view class="item">
          <navigator
            class="navigator"
            v-for="item in order.skus"
            :key="item.id"
            :url="`/pages/goods/goods?id=${item.spuId}`"
            hover-class="none"
          >
            <image class="cover" :src="item.image"></image>
            <view class="meta">
              <view class="name ellipsis">{{ item.name }}</view>
              <view class="type">{{ item.attrsText }}</view>
              <view class="price">
                <view class="actual">
                  <text class="symbol">¥</text>
                  <text>{{ item.curPrice }}</text>
                </view>
              </view>
              <view class="quantity">{{ item.quantity }}</view>
            </view>
          </navigator>
          <!-- 待评价状态:展示按钮 -->
          <view class="action" v-if="order.orderState === OrderState.DaiPingJia">
            <view class="button primary">申请售后</view>
            <navigator url="" class="button"> 去评价 </navigator>
          </view>
        </view>
        <!-- 合计 -->
        <view class="total">
          <view class="row">
            <view class="text">商品总价: </view>
            <view class="symbol">{{ order.totalMoney }}</view>
          </view>
          <view class="row">
            <view class="text">运费: </view>
            <view class="symbol">{{ order.postFee }}</view>
          </view>
          <view class="row">
            <view class="text">应付金额: </view>
            <view class="symbol primary">{{ order.payMoney }} </view>
          </view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="detail">
        <view class="title">订单信息</view>
        <view class="row">
          <view class="item">
            订单编号: {{ query.id }} <text class="copy" @tap="onCopy(query.id)">复制</text>
          </view>
          <view class="item">下单时间: {{ order.createTime }}</view>
        </view>
      </view>

      <!-- 猜你喜欢 -->
      <XtxGuess ref="guessRef" />

      <!-- 底部操作栏 -->
      <view class="toolbar-height" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view>
      <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
        <!-- 待付款状态:展示支付按钮 -->
        <template v-if="order.orderState === OrderState.DaiFuKuan">
          <view class="button primary" @tap="onOrderPay"> 去支付 </view>
          <view class="button" @tap="popup?.open?.()"> 取消订单 </view>
        </template>
        <!-- 其他订单状态:按需展示按钮 -->
        <template v-else>
          <navigator
            class="button secondary"
            :url="`/pagesOrder/create/create?orderId=${query.id}`"
            hover-class="none"
          >
            再次购买
          </navigator>
          <!-- 待收货状态: 展示确认收货 -->
          <view class="button primary" v-if="order.orderState === OrderState.DaiShouHuo">
            确认收货
          </view>
          <!-- 待评价状态: 展示去评价 -->
          <view class="button" v-if="order.orderState === OrderState.DaiPingJia"> 去评价 </view>
          <!-- 待评价/已完成/已取消 状态: 展示删除订单 -->
          <view
            class="button delete"
            v-if="order.orderState >= OrderState.DaiPingJia"
            @tap="onOrderDelete"
          >
            删除订单
          </view>
        </template>
      </view>
    </template>
    <template v-else>
      <!-- 骨架屏组件 -->
      <PageSkeleton />
    </template>
  </scroll-view>
  <!-- 取消订单弹窗 -->
  <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>
          <text class="icon" :class="{ checked: item === reason }"></text>
        </view>
      </view>
      <view class="footer">
        <view class="button" @tap="popup?.close?.()">取消</view>
        <view class="button primary">确认</view>
      </view>
    </view>
  </uni-popup>
</template>

v-else>



订单取消 请选择取消订单的原因：
Qiuner
关注
  • 25
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
黑马程序员uni-app 小兔鲜儿 项目及bug记录（下） Day 5（有作业）
Qiuner的博客
04-12 568
黑马程序员uni-app 小兔鲜儿 项目及bug记录（下） Day 5
黑马程序员uni-app 小兔鲜儿 项目及bug记录（上）
Qiuner的博客
04-11 1191
黑马程序员uni-app 小兔鲜儿 项目及bug记录（上）
小程序项目【uni-app 小兔鲜儿】学习笔记-day01-项目起步
最新发布
Gilpin30的博客
04-25 349
小程序项目【uni-app 小兔鲜儿】学习笔记-day01-项目起步
uniapp+vue3+vite+ts+uview-plus 最完整最详细搭建项目步骤
热门推荐
阿Q
09-18 1万+
uniapp+vue3+vite+ts+uview-plus 最完整最详细搭建项目步骤，搭建项目的准备工作：通过vue-cli脚手架创建uni-app项目，便于更好的兼容TS写法node版本：v18.16.0pnpm版本：8.3.0。
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app-template:uni-app 通用模板
04-06
uni-app 通用模板官网地址 平台兼容说明模板说明：基于cli创建的轻量化项目模板，只保留vue最基础的使用方式，保证打包到多端时不需要作太多判断处理状态管理不建议使用vuex，因为会导致代码变得冗余，而且在编辑器...
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网...
uni-ajax：uni-app的轻量级HTTP客户端
02-04
NPM # 如果您的项目是HBuilder X创建的，根目录又没有package.json文件的话，请先执行如下命令：# npm init -y# 安装npm install uni-ajax# 更新npm update uni-ajax :croissant:实例新建ajax.js文件（文件名可...
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
uni-app
02-22
uni-app
uni-app列表项实现左划操作功能
02-25
uni-app列表项实现左划操作功能。 开箱即用。
基于Uni-app+Node.js音乐听歌系统的设计与实现
06-06
技术需求：前端采用Uni-app框架，框架语法为Vue + 小程序，基于组件、路由、状态管理、MVVM响应式数据等；后端采用Express + CSRF完成数据接口开发等。系统设计目标：可以方便的浏览音乐排行榜、搜索指定音乐；轻松...
uni-app基础.pptx
09-01
uni-app基础入门笔记,分享演示文件
基于uni-app框架的登录模板
02-21
基于uni-app框架的登录模板
address(uni-app经纬度定位范围内签到)
06-24
address(uni-app经纬度定位范围内签到)
uni-app调用Android原生可以实现通信及打开WiFi
01-13
uni-app调用Android原生可以实现通信及打开WiFi
uni-app和uni-app x的区别
02-23
uni-app是一款基于Vue.js开发的跨平台应用框架，它可以使用一套代码同时构建运行在多个平台（包括iOS、Android、H5等）的应用程序。uni-app提供了丰富的组件和API，开发者可以使用Vue.js的语法进行开发，并且可以通过插件扩展功能。 而uni-app x是uni-app的升级版本，它在uni-app的基础上进行了一些改进和优化。主要的区别如下： 1. 性能优化：uni-app x在性能方面进行了优化，提升了应用的运行效率和响应速度。 2. 构建工具升级：uni-app x使用了新的构建工具，提供了更好的开发体验和更高效的构建过程。 3. 新增特性：uni-app x引入了一些新的特性，如增强型编译模式、全局样式隔离等，使开发者能够更灵活地进行应用开发。 4. 兼容性改进：uni-app x对不同平台的兼容性进行了改进，提供了更好的跨平台适配能力。 总之，uni-app x是对uni-app的升级和改进，旨在提供更好的开发体验和更高效的应用性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值