231228-uniapp项目

小栗子冲冲冲

已于 2024-03-28 22:53:20 修改

阅读量1.3k

点赞数 29

文章标签： uni-app

于 2023-12-29 19:48:39 首次发布

本文链接：https://blog.csdn.net/m0_68721502/article/details/135297491

版权

搭建新项目首先要做

1.clone基本代码

2.配置appid

3.配置uni-ui

4.配置pinia并实现数据持久化

5.配置请求响应拦截器

获取订单列表 - 小兔鲜儿-小程序版 (apifox.com)

小兔鲜儿 - 订单模块 | uniapp+vue3+ts (gitee.io)

黑马前端组 / erabbit-uni-app-vue3-ts · GitLab (itcast.cn)

uni路由跳转方式

1.uni.navigateTo保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面

页面跳转路径有层级限制，不能无限制跳转新页面
跳转到 tabBar 页面只能使用 switchTab 跳转

2.uni.redirectTo关闭当前页面，跳转到应用内的某个页面

3.uni.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

4.关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

uniapp生命周期

vue：
   beforeCreate（创建前）
   created（创建后）
   beforeMount(载入前，挂载）
   mounted（载入后）
   beforeUpdate（更新前）
   updated（更新后）
   beforeDestroy（销毁前）
   destroyed（销毁后）
   小程序/uni-app：
   1. onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
   2. onShow：加载完成后、后台切到前台或重新进入页面时触发
   3. onReady：页面首次渲染完成时触发
   4. onHide：从前台切到后台或进入其他页面触发
   5. onUnload：页面卸载时触发
   6. onPullDownRefresh：监听用户下拉动作
   7. onReachBottom：页面上拉触底事件的处理函数
   8. onShareAppMessage：用户点击右上角转发

支付流程：

1.获取支付参数：后端提供接口，返回支付所需要的参数

2.wx.requestPayment()唤醒支付窗口

// 支付
const goPay = async () => {
  // 微信生产环境支付
  if (import.meta.env.PROD) {
    const res = await getWXpay(orderDetail.value?.id!)
    // 唤醒支付窗口
    await wx.requestPayment(res.result)
  } else if (import.meta.env.DEV) {
    await getWXMockpay(orderDetail.value?.id!)
  }
  uni.redirectTo({ url: `/pagesOrder/payment/payment?id=${query.id}` })
}

小程序登录流程：

1.获取用户信息
uni.getUserInfo，success返回

2. uni.login获取用户登录凭证code，然后把code传递给后端提供的登陆接口，

code可以用来查看用户是否注册过

6003表示没有注册过，200表示注册过

没有注册就调用后端提供的注册接口

微信唤醒收银台支付

vue3中的组合式函数

使用hooks函数，实现逻辑代码复用

分包和预下载（优化点）

步骤：先设置分包页面 -> 配置分包预下载

按照业务模块进行划分，例如：我的页面中的其他页面可以做一个分包

1.对于用户比较少访问的页面可以做分包（例如设置页面）

2.把小程序代码分割成多个部分，分别打包，减小小程序加载时间

3.分包默认不加载，点击对应模块才会加载。进入某个页面是，自动预下载可能需要的分包，提升后续进入分包的启动速度

按模块管理页面，方便项目维护。
减少主包体积，用到的时候再加载分包，属于性能优化解决方案。

上传修改头像

// 修改用户头像
const onChangeAvatar = () => {
  // 调用拍照/选择图片
  uni.chooseMedia({
    // 文件个数
    count: 1,
    // 文件类型
    mediaType: ['image'],
    success: (res) => {
      const { tempFilePath } = res.tempFiles[0]
      uni.uploadFile({
        url: '/member/profile/avatar',
        name: 'file',
        filePath: tempFilePath,
        success: (res) => {
          if (res.statusCode == 200) {
            const avatar = JSON.parse(res.data).result.avatar
            profileData.value.avatar = avatar
            uni.showToast({
              icon: 'success',
              title: '修改成功',
            })
          } else {
            uni.showToast({
              icon: 'fail',
              title: '参数错误',
            })
          }
        },
      })
    },
  })
}

SKU模块库存管理

/* eslint-disable */ 把这个加在script标签最上面，可以不执行eslint检查

下载插件使用

预览放大图片

uni.previewImage({ current: url, urls: goods.value!.mainPictures, })

`uni-ui` 弹出层组件

uni-popup

订单支付

分为开发环境（模拟订单支付，更新订单状态为等待发货）和生产环境

生产环境：

调用接口获取支付数据，wx.requestPayment()调用支付窗口

小程序动画

小程序框架 / 视图层 / 动画 (qq.com)

实现头部动画效果要注意给scroll-view组件绑定id !!!!

头部固定定位且透明，滚动后显示

<script>
// 获取页面栈
const pages = getCurrentPages()
// 获取小程序页面实例
// at(-1)是指获取数组最后一项
const pageInstance = pages.at(-1) as any
// 页面渲染完毕 绑定动画效果
onReady(() => {
  // 只有微信才有这个动画效果
  pageInstance.animate(
    '.navbar',
    [
      {
        backgroundColor: 'transparent',
      },
      {
        backgroundColor: '#f8f8f8',
      },
    ],
    100,
    {
      scrollSource: '#scroller',
      timeRange: 1000,
      startScrollOffset: 0,
      endScrollOffset: 50,
    },
  )
  pageInstance.animate(
    '.back',
    [
      {
        color: '#fff',
      },
      {
        color: '#000',
      },
    ],
    100,
    {
      scrollSource: '#scroller',
      timeRange: 1000,
      startScrollOffset: 0,
      endScrollOffset: 50,
    },
  )
  pageInstance.animate(
    '.title',
    [
      {
        color: 'transparent',
      },
      {
        color: '#000',
      },
    ],
    100,
    {
      scrollSource: '#scroller',
      timeRange: 1000,
      startScrollOffset: 0,
      endScrollOffset: 50,
    },
  )
})
<script>