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

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>

更多

1.4 uni-api 介绍

• 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