【uni-app】uni-app-微信小程序项目笔记

最新推荐文章于 2025-02-28 17:02:26 发布

披着床单的小王子

最新推荐文章于 2025-02-28 17:02:26 发布

阅读量1.9k

点赞数

分类专栏： uni-app

本文链接：https://blog.youkuaiyun.com/wy233333/article/details/105256090

版权

本文记录了基于uni-app的微信小程序项目搭建过程，包括新建项目、引入字体图标、uni-ui组件库的使用以及uni-api的封装。详细介绍了首页模块的搭建，如分段器组件的样式优化、自定义异步请求的封装，并讲解了首页推荐页面的数据动态渲染和分页功能实现。同时，文章还涵盖了专辑模块的功能分析和实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 项目搭建

1.1 新建项目

创建项目 vue create -p dcloudio/uni-preset-vue dnpicture
安装 sass依赖 npm install sass-loader node-sass

1 新增 tabbar 页面

在这里插入图片描述

1.2 引入字体图标

字体图标使用的是 iconfont
在 App.vue中全局引入

Iconfont-阿里巴巴矢量图标库：https://www.iconfont.cn

这里有个坑就是：微信不支持本地字体图标

从阿里巴巴矢量图标库下载到本地的，但是uni-app不支持本地iconfont.css，报错

00:42:22.580 Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './iconfont.eot?t=1521557349802' in 'D:\workspace\appProjects\uniQingchi\pages\index'
00:42:22.592     at factoryCallback (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\Compilation.js:264:39)
00:42:22.592     at factory (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModuleFactory.js:247:20)
00:42:22.603     at resolver (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModuleFactory.js:65:21)
00:42:22.613     at asyncLib.parallel (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModuleFactory.js:138:21)

解决方案：从阿里巴巴矢量图标库获取在线连接

在这里插入图片描述

@import "./styles/iconfont.wxss";

<text class="iconfont">&#xe75d;</text>

1.3 uni-ui

1 uni-ui 介绍

https://uniapp.dcloud.io/component/README?id=uniui
uni-ui 是 DCloud 提供的一个跨端 ui 库，它是基于vue组件的，flex布局的，无dom 的跨全端 ui 框架
uni-ui 不包括基础组件，它是基础组件的补充
数字角标，日历，卡片，折叠面板，倒计时，抽屉，悬浮按钮，收藏按钮，底部购物导航，宫格，图标，索引列表，加载更多，自定义导航栏，通告栏，数字输入框，分页器，弹出层，评分，搜索栏，分段器，步骤条，滑动操作，轮播图指示点，标签

2 uni-ui 使用

安装 uni-ui

npm install @dcloudio/uni-ui

局部引入组件
注册组件
使用组件

在 script 中引用组件：

import {
   uniBadge} from '@dcloudio/uni-ui'
//import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
export default {
   
    components: {
   uniBadge}
}

在 template 中使用组件：

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

https://uniapp.dcloud.io/api/README
原生的微信小程序的 api 都是不支持 promise（承诺）
uni-app 对大部分的小程序的原生 api 做了封装。使之支持 promise
使用方法
- 原生微信小程序 wx.request
- uni-api 的方式 uni.request
- 其他 api 的使用方式也类似

onLoad() {
   
		//http://157.122.54.189:9088/image/v3/homepage/vertical
		// 1 原生的微信小程序的 api
		wx.request({
   
			url:"http://157.122.54.189:9088/image/v3/homepage/vertical",
			success:(res) =>{
   
				console.log(res)
			}
		})
		
		//2. uni-api
		uni.request({
   
			url:"http://157.122.54.189:9088/image/v3/homepage/vertical",
		}).then(res => {
   
			console.log(res)
		})
		
		
	},

2. 首页模块

2.1 功能分析

修改导航栏的外观
使用分段器组件搭建子页面
封装自己的异步请求

在这里插入图片描述

2.2 搭建子页面

1. 子页面

首页模块分为 4个部分，分别是推荐，分类，最新，专辑
新建自定义组件来代替上述的4个页面
- home-recommend（推荐）
- home-category（分类）
- home-new（最新）
- home-album（专辑）

2. 分段器介绍

分段器·指的是 uni-ui 中的一个组件，其实就是我们俗称的标签页，tab页

https://ext.dcloud.net.cn/plugin?id=54

<!-- 首页 -->
<template>
	<view class="content">
		<view>
			<uni-segmented-control 
			:current="current" 
			:values="items.map(a=>a.title)" 
			@clickItem="onClickItem" 
			style-type