uniapp学习

1、pages.json和tabBar案例

2、基本组件的使用，uni-app和原生小程序的区别

基本组件的使用swiper | uni-app官网

3、命令行创建uni-app项目

uni-app官网

npx degit dcloudio/uni-preset-vue#vite-ts [名称]

下载失败可千往仓库下载，下载仓库 · DCloud/uni-preset-vue - Gitee.com 记得在 manifest.json添加appid

pnpm i

pnpm dev:mp-weixin

在微信开发者工具导入打包好的mp-weixin文件夹

4、使用vscode开发uniapp

1、vdcode开发uniapp配置wx小程序appid

5、使用uni-ui组件库

uni-ui官网 安装命令pnpm i @dcloudio/uni-ui

1、自动注册组件

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

2、ts类型声明文件@uni-helper/uni-ui-types - npm为使得uni-ui的标签变为绿色并且变为安全

安装依赖pnpm i -D @uni-helper/uni-ui-types

6、pinia的持久化使用

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const pinia = createPinia()
// 使用持久化存储插件
pinia.use(persist)

// 默认导出，给 main.ts 使用
export default pinia

// 模块统一导出
export * from './modules/member'

7、请求器的封装

1、拦截器，uploadFile上传文件,request请求

为了更好的获取数据

8、uniapp的路由在page.json中是声明好的

2、http响应状态码

响应行： 100 信息 200 成功 300 重定向消息 400 客户端错误（浏览器报错） 500 服务端错误 404 （服务器找不到资源）

9、首页导航栏

设置自适应导航栏
<script setup lang="ts">
//通过API获取屏幕边界到视口边界的距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">

pages.json文件
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom", // 自定义导航栏，隐藏导航栏
        "navigationBarTextStyle": "white",//顶端字体颜色
        "navigationBarTitleText": "首页"
      }
    },

10、首页轮播图

全局组件自动导入，配置完成要重启项目

 "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      //全局组件自动导入，配置完成要重启项目
      "Xtx(.*)": "@/components/Xtx$1.vue"
    }
  },

全局组件类型声明，声明后颜色高亮

Volar 插件说明：Vue Language Tools

// src/types/components.d.ts
import XtxSwiper from './XtxSwiper.vue'
declare module 'vue' {
  export interface GlobalComponents {
    XtxSwiper: typeof XtxSwiper
  }
}

::: danger 版本升级 新版 Volar 把 declare module '@vue/runtime-core' 调整为 declare module 'vue' :::

1、轮播图总结

11、!和?的意思

  ?可选链，允许前面的表达式为空值，而不抛出错误
  !非空断言，主观上排除空值的情况
  const onChange: UniHelper.SwiperOnChange = (e) => {
  console.log(e)
  //?可选链，允许前面的表达式为空值，而不抛出错误
  //!非空断言，主观上排除空值的情况
  activeIndex.value = e.detail!.current
}

12、物品推荐猜你喜欢组件的制作

1、固定导航栏使用flex布局

<style lang="scss">
//固定导航栏样式
.page-container {
  background-color: #f7f7f7;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 滚动视图样式 */
.one {
  height: 100%;
  flex: 1;
  overflow-y: auto;
}
</style>

2、滚动触底自动的调用函数@scrolltolower

父调子。defineExpose({
  getHomeLike,
})

    <!-- 滚动触底自动的调用函数 -->
    <scroll-view @scrolltolower="onScrolltolower" class="one" scroll-y>

3、轻提示uni.showToast({})

弹框提示
uni.showToast({
      title: '没有更多了',
      icon: 'none',
    })

13、首页下拉刷新

1、开启下拉refresher-enabled自定义下拉@refresherrefresh="onrefresherrefresh"

await Promise.all（）开启同步接收，优化网络，等待全部完成后再关闭

const istrig = ref(false)
const onrefresherrefresh = async () => {
  istrig.value = true
  await Promise.all([getHomeBanner(), 
  getHomeCategory(), getHomeHotData()]) //同时接收，最后一个完成后再关闭
  istrig.value = false
}
</script>

<template>
  <div class="page-container">
    <CustomNarbar />
    <!-- 滚动触底自动的调用函数 -->
    <scroll-view
      refresher-enabled
      @refresherrefresh="onrefresherrefresh"
      :refresher-triggered="istrig"
      @scrolltolower="onScrolltolower"
      class="one"
      scroll-y
    >
      <XtxSwiper :list="banderList"></XtxSwiper>
      <CustomPanei :list="categoryList" />
      <Hotpanel :list="hotList" />
      <XtxGuess ref="guessRef"></XtxGuess>
    </scroll-view>
  </div>
</template>

14、首页骨架屏，图片未加载上之前

只留需要的组件

const isLoading = ref(false)
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getHomeBanner(), getHomeCategory(), getHomeHotData()])
  isLoading.value = false
})

<PageSk v-if="isLoading" />
      <template v-else>
        <XtxSwiper :list="banderList"></XtxSwiper>
        <CustomPanei :list="categoryList" />
        <Hotpanel :list="hotList" />
        <XtxGuess ref="guessRef"></XtxGuess>
      </template>

15、热门推荐

1、路由传值

16、商品分类页面

17、商品详情页面

1、点击图片放大的函数

//图片放大
const onTapImage = (url: string) => {
  uni.previewImage({
    current: url,
    urls: goods.value!.mainPictures,
  })
}

2、弹出层

uni-popup 弹出层 | uni-app官网

18、登入模块

//获取微信code登入凭证
let code = ''
onLoad(async () => {
  const res = await wx.login()
  code = res.code
})

1、页面跳转

//页面跳转，跳转非taber页面
  uni.switchTab({
    url: '/pages/user/user',
  })

19、用户页面

1、分包预下载

为了提高页面的加载速度

  // 分包加载规则
  "subPackages": [
    {
      "root": "pagesMerbar",
      "pages": [
        {
          "path": "settings/settings",
          "style": {
            "navigationBarTitleText": "设置"
          }
        }
      ]
    }
  ],
  // 分包预下载规则
  "preloadRule": {
    "pages/my/my": {
      //进入my页面时，预下载pagesMerbar分包
      "network": "all", // [!code ++]
      "packages": [
        "pagesMerbar"
      ] // [!code ++]
    }
  }

2、退出登入

const onLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.removeStorageSync('token') //从本地清除token
        uni.reLaunch({
          //关闭当前页面，跳转登录页面
          url: '/pages/login/login',
        })
      }
    },
  })
}

20、onShow每次展示都调用的生命周期函数

onShow(() => {
  getMemberAddress()
})

21、SUK模块，购买弹窗模块

【开箱即用】商品多规格sku选择器组件豪华独立版【业务型数据驱动式组件】支持vue3 - DCloud 插件市场

22、把taber页面封装为普通页

项目打包

1、打包微信端

pnpm build:mp-weixin

2、打包网页端

pnpm dev:h5 pnpm build:h5

3、App端打包

手机下载Hbuilder基座打开开发者模式，usb连接电脑即可