1、pages.json和tabBar案例
2、基本组件的使用，uni-app和原生小程序的区别
基本组件的使用swiper | uni-app官网
3、命令行创建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、自动注册组件
php
// 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的持久化使用
js
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、首页导航栏
js
设置自适应导航栏
<script setup lang="ts">
//通过API获取屏幕边界到视口边界的距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<template>
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
js
pages.json文件
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom", // 自定义导航栏，隐藏导航栏
"navigationBarTextStyle": "white",//顶端字体颜色
"navigationBarTitleText": "首页"
}
},10、首页轮播图
全局组件自动导入，配置完成要重启项目
js
"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
vbnet
// 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、!和?的意思
js
?可选链，允许前面的表达式为空值，而不抛出错误
!非空断言，主观上排除空值的情况
const onChange: UniHelper.SwiperOnChange = (e) => {
console.log(e)
//?可选链，允许前面的表达式为空值，而不抛出错误
//!非空断言，主观上排除空值的情况
activeIndex.value = e.detail!.current
}12、物品推荐猜你喜欢组件的制作
1、固定导航栏使用flex布局
html
<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
js
父调子。defineExpose({
getHomeLike,
})
js
<!-- 滚动触底自动的调用函数 -->
<scroll-view @scrolltolower="onScrolltolower" class="one" scroll-y>3、轻提示uni.showToast({})
js
弹框提示
uni.showToast({
title: '没有更多了',
icon: 'none',
})13、首页下拉刷新
1、开启下拉refresher-enabled自定义下拉@refresherrefresh="onrefresherrefresh"
await Promise.all（）开启同步接收，优化网络，等待全部完成后再关闭
js
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、首页骨架屏，图片未加载上之前
只留需要的组件
js
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、点击图片放大的函数
js
//图片放大
const onTapImage = (url: string) => {
uni.previewImage({
current: url,
urls: goods.value!.mainPictures,
})
}2、弹出层
18、登入模块
js
//获取微信code登入凭证
let code = ''
onLoad(async () => {
const res = await wx.login()
code = res.code
})1、页面跳转
js
//页面跳转，跳转非taber页面
uni.switchTab({
url: '/pages/user/user',
})19、用户页面
1、分包预下载
为了提高页面的加载速度
js
// 分包加载规则
"subPackages": [
{
"root": "pagesMerbar",
"pages": [
{
"path": "settings/settings",
"style": {
"navigationBarTitleText": "设置"
}
}
]
}
],
// 分包预下载规则
"preloadRule": {
"pages/my/my": {
//进入my页面时，预下载pagesMerbar分包
"network": "all", // [!code ++]
"packages": [
"pagesMerbar"
] // [!code ++]
}
}2、退出登入
js
const onLogout = () => {
uni.showModal({
title: '提示',
content: '确定退出登录吗？',
success: (res) => {
if (res.confirm) {
uni.removeStorageSync('token') //从本地清除token
uni.reLaunch({
//关闭当前页面，跳转登录页面
url: '/pages/login/login',
})
}
},
})
}20、onShow每次展示都调用的生命周期函数
js
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连接电脑即可