uniapp + Vue3 + TypeScript 项目学习笔记

骨架屏：

微信开发者工具  在... 生成骨架屏

wxml和wxss复制到 VS中 形成一个组件

导入到所需页面中

通过v-if和v-else 使页面内容没有渲染完成时显示骨架屏

------------------------------------------------------------------------------------

 

轮播图交互

自定义下标 + 大图预览

// 轮播图变化时

const currentIndex = ref(0)

const onChange : UniHelper.SwiperOnChange = (ev) => {

        currentIndex.value = ev.detail.current

}

// 点击图片时

const onTapImage = ( url: string ) => {

        // 大图预览

        uni.previreImage({

                current: url,

                urls: goods.value!.mainPictures

})

----------------------------------------------------------------------------

 

弹出层交互

uni-ui 弹出层组件：uni-popup

静态结构

提供 服务说明 和 收获地址 两个组件的静态结构，实现弹出层交互。

ServicePanel.vue // AddressPanel.vue

 

商品详情页：通过组件 ref 获取弹出层组件实例，调用打开弹出层方法。

// uni-ui 弹出层组件 ref

const popup = ref<{

open: (type?: UniHelper.UniPopupType) => void

close: () => void

}>()

 弹出层条件渲染

const popupName = ref<'address' | 'service'>()

const openPopup = (name: typeof popupName.value) => {

// 修改弹出层名称

popupName.value = name

// 打开弹出层

popup.value?.open()

}

 

 <!-- 操作面板 -->

<view>

        <view class="action">

                <view class="item arrow">

                <text class="label">选择</text>

                <text class="text ellipsis"> 请选择商品规格 </text>

        </view>

        <view @tap="openPopup('address')" class="item arrow">

                <text class="label">送至</text>

                <text class="text ellipsis"> 请选择收获地址 </text>

        </view>

        <view @tap="openPopup('service')" class="item arrow">

                <text class="label">服务</text>

                <text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text>

         </view>

</view>

 <!-- uni-ui 弹出层 -->

<uni-popup ref="popup" type="bottom" background-color="#fff">

        <AddressPanel v-if="popupName === 'address'" @close="popup?.close()" />

        <ServicePanel v-if="popupName === 'service'" @close="popup?.close()" /> 

</uni-popup>

 

服务说明 和 收获地址 组件通讯：通过子调父，关闭弹出层。

<script setup lang="ts">
// 子调父
const emit = defineEmits<{
  (event: 'close'): void
}>()
</script>

<template>
  <view class="service-panel">
    <!-- 关闭按钮 -->
    <text class="close icon-close" @tap="emit('close')"></text>
    ...省略
  </view>
</template>

----------------------------------------------------------------------------------

 

微信登录​

微信小程序的开放能力，允许开发者获取微信用户的基本信息（昵称、性别、手机号码等），开发者常用来实现注册/登录的功能。

登录方式​

常见登录/注册方式：

1. 用户名/手机号 + 密码
2. 手机号 + 验证码
3. 授权登录

微信授权登录

用户在使用小程序时，其实已登录微信，其本质上就是：微信授权给小程序读取微信用户信息。

获取登录凭证​

前端：调用 wx.login() 接口获取登录凭证（code）。

后端：通过凭证（code）向微信服务器生成用户登录态。

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'

// 获取 code 登录凭证
let code = ''
onLoad(async () => {
  const res = await wx.login()
  code = res.code
})
</script>

注意

• code 获取不要在 getphonenumber 事件回调函数调用，否则可能会出现错误！！！

• 用户登录态，不包含用户昵称、性别、手机号码等信息，作用是用于后端与微信服务器通讯。

获取手机号码​

出于安全限制，小程序【规定】想获取用户的手机号，必须由用户主动【点击按钮】并【允许申请】才可获取加密的手机号信息。

前端：提供 open-type 按钮，在事件处理函数中获取加密的手机号信息。

后端：解密手机号信息，把手机号和用户登录态关联在一起。

 

 

<script setup lang="ts">
// 获取用户手机号码
        const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = (ev) => {
          console.log(ev)
        }
</script>

<template>
  <view class="viewport">
    <view class="login">
      <button class="button phone" open-type="getPhoneNumber"         @getphonenumber="onGetphonenumber">
                <text class="icon icon-phone"></text>
                手机号快捷登录
      </button>
    </view>
  </view>
</template>

 

 

普通页面跳转可用  navigateTo        带tabBar的页面 需要用 uni.switchTab

用户信息持久化储存

 

------------------------------------------------------------------------------------------------------------------

小程序分包和预下载

 

-----------------------------------------------------------------------------------------------------------------------

退出登录

 

-------------------------------------------------------------------------------------------

 

修改用户头像

 

个人信息页总结

 

地址模块

 

onShow与onLoad

在微信小程序开发中，onShow和onLoad都是页面的生命周期函数，但它们的触发时机和用途有所不同。

1. onLoad：

   • 触发时机：当页面加载时，onLoad会被调用。这个函数在页面首次打开时执行，并且只会在页面的生命周期内被调用一次。
   • 使用场景：通常用来初始化数据、获取参数（如页面跳转时传递的query参数）和进行一些只需要在页面加载时执行的操作。

2. onShow：

   • 触发时机：每次页面显示时，onShow都会被调用，无论是初次加载还是从其他页面返回到该页面。
   • 使用场景：适用于需要在页面每次显示时都要刷新数据或更新视图的场景，比如从其他页面获取到新的信息，想要在返回该页面时同步更新。

总结来说，onLoad在页面加载时调用，适合进行一次性的初始化操作，而onShow在每次页面展示时调用，更适合用来处理需要动态更新的内容。

 

购物车模块

购物车单选全选

// 修改商品选中状态

const onChangeSelected = (item: CartItem) => {

  // 是否选中取反

  item.selected = !item.selected

  // 调用修改接口 后端更新选中状态

  putMemberCartBySkuIdAPI(item.skuId, { selected: item.selected })

}

 

// 计算全选状态

const isSelectedAll = computed(() => {

  return cartList.value.length > 0 && cartList.value.every((v) => v.selected)

})

 

// 修改选中状态-全选修改

const onChangeSelectedAll = () => {

  // 全选状态取反

  const _isSelectedAll = !isSelectedAll.value

  // 前端数据更新

  cartList.value.forEach((v) => {

    v.selected = _isSelectedAll

// 调用修改接口 后端更新选中状态

  putMemberCartSelectedAPI({ selected: _isSelectedAll 

  })

}

 

滚动驱动的动画

 

订单支付

 

项目打包

 

微信小程序端

 

网页端

 

APP端

APP端云打包

 

 

iOS APP端 打包

 

 

跨端兼容

样式兼容

 

组件兼容

 

JS API兼容

 

uniCloud 云开发

 

​​​​​​​