🚀 作者 ：“二当家-小D”

🚀 博主简介：⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人，8年开发架构经验，精通java,擅长分布式高并发架构,自动化压力测试，微服务容器化k8s等

🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬

🍅文末获取源码联系 配套笔记打包🍅

一、微信小程序项目分类页面开发

1.1布局开发

  <script lang="ts" setup>
  import NavigationBar from './components/NavigationBar.vue'
  import ProductContainer from './components/ProductContainer.vue'
  </script>
  
  <template>
    <view style="background-color: #f3f3f3" overflow-x-hidden>
      <NavigationBar />
      <ProductContainer />
    </view>
  </template>

1.2课程展示子组件

 <script lang="ts" setup>
  import Product from './ProductContainer/Product.vue'
  import { queryProductById } from '@/api/category';
  
  let products = $ref<any>()
  products = queryProductById().data.current_data;
  
  </script>
  
  <template>
    <view class="container">
      <view class="products">
        <Product v-for="item, index in products" :key="index" :product="item" />
      </view>
    </view>
  </template>

<script lang="ts" setup>
  import type { IProduct } from '@/typings/interface'
  
  defineProps<{ product: IProduct }>()
  
  </script>
  
  <template>
    <view class="product">
      <image :src="product.coverImg" mode="scaleToFill" />
      <text class="title">
        {{ product.title }}
      </text>
      <view class="level_price">
        <view class="price">
          <view>
            <text class="dollor">
              ¥
            </text>
            <text class="price">
              {{ product.amount }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </template>

二、微信小程序项目学习页面开发—布局+数据获取

2.1布局+数据获取

  <script lang="ts" setup>
  import { queryPlayRecordPage } from '@/api/user'
  
  let playRecordPage = $ref<any[]>([])
  
  playRecordPage = queryPlayRecordPage().data.current_data
  
  </script>
  
  <template>
    <view class="container">
      <view class="products">
        111
      </view>
    </view>
  </template>

2.2课程播放记录列表

 <script lang="ts" setup>
  import type { IPlayRecord } from '@/typings/interface'
  
  defineProps<{ product: IPlayRecord }>()
  
  function getProgress(product: IPlayRecord) {
    const progress = Math.ceil((product?.learnIds.split(',')?.length / product?.episodeNum) * 100)
    return !product?.learnIds ? 0 : progress >= 100 ? 100 : progress
  }
  
  </script>
  
  <template>
    <view class="product">
      <image :src="product?.coverImg" mode="scaleToFill" />
      <view class="right">
        <text class="title">
          {{ product?.productTitle }}
        </text>
        <view class="progress">
          <progress :percent="getProgress(product)" active-color="#f59a23" border-radius="35" />
          <text>已学习</text>
          <text class="percent">
            {{ getProgress(product) }}%
          </text>
        </view>
        <view class="bottom">
          <text v-if="product?.learnIds" class="chapter">
            学习到：{{ product?.episodeTitle }}
          </text>
          <text v-else class="chapter">
            还未学习
          </text>
        </view>
      </view>
    </view>
  </template>

三、微信小程序项目我的页面开发

3.1未登录的页面

  <script lang="ts" setup>
  
  </script>
  
  <template>
    <uni-nav-bar :fixed="true" :status-bar="true" :border="false" background-color="#ffffff" left-width="300rpx"
      right-width="300rpx">
      <template #left>
        <text class="my_study">
          我的
        </text>
      </template>
    </uni-nav-bar>
  </template>

3.2登录的页面

<script lang="ts" setup>
  const { isLogin } = $(useUser())
  
  const username = computed(() => (isLogin ? '大钊' : '点击登录'))
  const avatar = computed(() => (isLogin ? '/static/images/icons/mine/user.png' : '/static/images/icons/mine/user.png'))
  const learnTime = computed(() =>
    isLogin ? `学习时长：${(100 / 3600).toFixed(2)}小时` : '新用户专属200D币礼包'
  )
  
  
  </script>
  
  <template>
    <view class="flex px-2" w-full>
      <view relative>
        <image :src="avatar" w-120 h-120 rounded-full class="b b-#f38e48" />
      </view>
      <view m="y-1 x-4" flex="~ col">
        <text text="40 #4d555d">
          {{ username }}
        </text>
        <view between w-full>
          <text text="30 #f38e48">
            {{ learnTime }}
          </text>
        </view>
      </view>
    </view>
  </template>

结束语

今天的内容接着上次内容讲述了uni-app结合Vue 3和TypeScript开发微信小程序项目全部步骤，从首页布局到数据获取，分类页面、学习、我的页面，都一一详细介绍了具体的步骤和代码。通过这些内容，我们了解到了如何利用uni-app框架结合Vue 3和TypeScript快速构建小程序页面。

今天的文章就到这里了，还有更多内容下次继续。

资料获取📚
完整代码和笔记已经准备好，如果有问题，可以在评论区留言讨论💬
原创不易，别忘了点赞👍+收藏⭐哦！
点击下方链接即可获取完整资料压缩包🎁，快来领取吧！↓↓↓↓